Semantic-UI Rail Internal Type

Last Updated : 11 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.

Semantic UI gives us the option to attach the rails to the internal side of the container using the internal class.

Semantic UI Rail Internal Type Class:

internal: Positions the rail to the inner side of the container.

Syntax:

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

Example 1: In the below example, we have positioned the rails to the inner side of the main viewport.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic UI Rail Internal Type</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> 
  
    <div class="ui container"> 
        <h2 class="ui green header">GeeksforGeeks</h2> 
        <h4>Semantic UI Rail Internal Type</h4> 
        <hr> 
        <br/> 
        <div class="ui segment" style="width:700px;"> 
            <div class="ui left rail internal"> 
                <div class="ui small segment"> 
                    This is a small rail positioned on the 
                    inner side of the main viewport. 
                </div> 
            </div> 
            <div class="ui right rail internal"> 
                <div class="ui small segment"> 
                    This is a small rail positioned on  
                    the inner side of the main viewport. 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Semantic-UI Rail Internal Type

Example 2: In the below example, we have illustrated the difference between a normal rail and an inner rail.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic UI Rail Internal Type</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> 
  
    <div class="ui container"> 
        <h2 class="ui green header">GeekforGeeks</h2> 
        <h4>Semantic UI Rail Internal Type</h4> 
        <hr> 
        <br/> 
        <div class="ui segment" style="width:700px;"> 
            <div class="ui left rail internal"> 
                <div class="ui small segment"> 
                  This is a small rail positioned on  
                  the inner side of the main viewport. 
                </div> 
            </div> 
            <div class="ui right rail"> 
                <div class="ui small segment"> 
                    This is a small normal rail. 
                </div> 
            </div> 
  
        </div> 
    </div> 
</body> 
  
</html>