Semantic-UI Rail Attached Variation

Last Updated : 09 Mar, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.

Rails are an excellent way to display additional content to the user, usually, they are used to display ads. They are placed either to the left or right of the main viewport with a default width of 300px. For the semantic rails to work, the main container should have a width between 600 pixels to 800 pixels. Rails can be attached to the main viewport using the attached class.

Semantic UI Rail Attached Variation Classes:

left: Positions the rail to the left side of the viewport.
right: Positions the rail to the right side of the viewport.
attached: Attaches the rail to the viewport.

Syntax:

<div class="ui segment">
    <div class="ui position-class rail attached">
        ...
    </div>
    ...
</div>

Example 1: In the below example, we have attached the left rail to the main viewport.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic UI Rail Attached Variation</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
  
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
        crossorigin="anonymous"> 
    </script> 
  
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body style="width: 100vw; height: 100vh;"> 
  
    <div class="ui container"> 
        <h2 style="color: green;">GeeksForGeeks</h2> 
        <h4>Semantic UI Rail Attached Variation</h4> 
        <hr> 
        <br /> 
        <div class="ui segment" style="margin-left: auto; 
             margin-right: auto; width:700px;"> 
            <div class="ui left rail attached"> 
                <div class="ui small segment"> 
                    This is a small rail attached  
                    to the main viewport. 
                </div> 
            </div> 
              
<p>Main Viewport</p> 
  
              
<p>Main Viewport</p> 
  
        </div> 
    </div> 
</body> 
  
</html>

Output:

Attached left rail to the main viewport

Example 2: In the below example, we have attached the right rail to the main viewport.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic UI Rail Attached Variation</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
  
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
        crossorigin="anonymous"> 
    </script> 
  
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body style="width: 100vw; height: 100vh;"> 
  
    <div class="ui container"> 
        <h2 style="color: green;">GeeksForGeeks</h2> 
        <h4>Semantic UI Rail Attached Variation</h4> 
        <hr> 
        <br /> 
        <div class="ui segment" style="margin-left: auto; 
            margin-right: auto; width:700px;"> 
            <div class="ui right rail attached"> 
                <div class="ui tiny segment"> 
                    This is a tiny rail attached  
                    to the main viewport. 
                </div> 
            </div> 
            <p>Main Viewport</p> 
            <p>Main Viewport</p> 
        </div> 
    </div> 
</body> 
  
</html>