Semantic-UI Rail Variations

Last Updated : 22 Apr, 2022

Semantic UI is the open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive website.

Semantic-UI Rail is used to showing the content outside the main view of the site. It is mostly on the left and right sides when our main content is in the center. There are different Rail Variations like attached, close, size, etc. In this article, we will discuss Rail Variations in Semantic-UI.

Semantic-UI Rail Variations:

Attached: This variation is used to attach the rail to the main viewport.
Close: This variation creates the rail close to the main viewport.
Size: This variation is used to create different sizes of rails.

Syntax:

<div class="ui segment">
  <div class="ui Rail-Variations rail">
     ....
  </div>
  ...
</div>

Example 1: The following code demonstrates the Semantic-UI Rail Attached Variation.

HTML

<!DOCTYPE html>
<html>

<head>
  <title> Semantic-UI Rail Variations </title>
  
  <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet"/>
</head>

<body>
  <div class="ui container center aligned">
    <h2 class="ui green header"> GeeksforGeeks </h2>  
    <h3> Semantic-UI Rail Variations </h3>
  </div> <br>

  <div class="ui segment" 
       style="margin-left: auto;
              margin-right: auto;
              width:100px;">
    <div class="ui left attached rail">
      <div class="ui segment">
        <strong> Left Rail attached </strong>
        

<p> GeeksforGeeks </p>


      </div>
    </div>
    <div class="ui right attached rail">
      <div class="ui segment">
        <strong> Right Rail attached </strong>
        

<p> GeeksforGeeks </p>



      </div>
    </div>
    

<p> GFG </p>


    

<p> Rail </p>


  </div>
</body>
  
</html>

Output:

Example 2: The following code demonstrates the Semantic-UI Rail Close Variation.

HTML

<!DOCTYPE html>
<html>

<head>
  <title> Semantic-UI Rail Variations </title>
  <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet"/>
</head>

<body>
  <div class="ui container center aligned">
    <h2 class="ui green header"> GeeksforGeeks </h2>  
    <h3> Semantic-UI Rail Variations </h3>
  </div> <br>

  <div class="ui segment" 
       style="margin-left: auto;
             margin-right: auto;
              width:80px;">
    <div class="ui left close rail">
      <div class="ui segment">
        <strong> Left Rail Close </strong>
        

<p> GeeksforGeeks </p>


      </div>
    </div>
    <div class="ui right close rail">
      <div class="ui segment">
        <strong> Right Rail Close </strong>
        

<p> GeeksforGeeks </p>


      </div>
    </div>
    

<p> GFG </p>


    

<p> Rail </p>


  </div>

  <div class="ui segment" 
       style="margin-left: auto;
              margin-right: auto; 
              width:80px;">
    <div class="ui left very close rail">
      <div class="ui segment">
        <strong> Left Rail Very Close </strong>
        

<p> GeeksforGeeks </p>


      </div>
    </div>
    <div class="ui right very close rail">
      <div class="ui segment">
        <strong> Right Rail Very Close </strong>
        

<p> GeeksforGeeks </p>


      </div>
    </div>
    

<p> GFG </p>


    

<p> Rail </p>


  </div>
</body>
</html>

Output:

Example 3: The following code demonstrates the Semantic-UI Rail Size Variation.

HTML

<!DOCTYPE html>
<html>

<head>
  <title> Semantic-UI Rail Variations </title>
  <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet"/>
</head>

<body>
  <div class="ui container center aligned">
    <h2 class="ui green header"> GeeksforGeeks </h2>  
    <h3> Semantic-UI Rail Variations </h3>
  </div> <br>

  <div class="ui segment" 
       style="margin-left: auto;
              margin-right: auto;
              width:80px;">
    <div class="ui left mini rail">
      <div class="ui mini segment">
        <strong> Rail Mini size </strong>
        

<p> GeeksforGeeks </p>


      </div>
    </div>
    <div class="ui right small rail">
      <div class="ui small segment">
        <strong> Rail Small size </strong>
        

<p> GeeksforGeeks </p>


      </div>
    </div>
    

<p> GFG </p>

   
    

<p> Rail </p>


  </div>
  <div class="ui segment" 
       style="margin-left: auto;
              margin-right: auto; 
              width:80px;">
    <div class="ui left large rail">
      <div class="ui large segment">
        <strong> Rail Large size </strong>
        

<p> GeeksforGeeks </p>


      </div>
    </div>
    <div class="ui right huge rail">
      <div class="ui huge segment">
        <strong> Rail Huge size </strong>
        

<p> GeeksforGeeks </p>


      </div>
    </div>    
    

<p> GFG </p>


    

<p> Rail </p>


  </div>
</body>
  
</html>