Skip to content
Related Articles
Open in App
Not now

Related Articles

Semantic-UI Rail Close Variation

Improve Article
Save Article
Like Article
  • Last Updated : 16 Mar, 2022
Improve Article
Save Article
Like Article

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. The semantic UI rails can be positioned closer to the main viewport using the close class.

Semantic UI Rail Close Variation Classes:

  • close: Positions the rail closer to the main viewport.

Syntax:

<div class="ui segment">
    <div class="ui rail close">
        <div class="ui segment">
            Rail content
        </div>
    </div>
    ...
</div>
...

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

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI Rail Close Variation</title>
        <link href=
              rel="stylesheet" />
        <script src=
            integrity=
 "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
                crossorigin="anonymous">
        </script>
        <script src=
        </script>
    </head>
    <body>
        <div class="ui container">
            <h2 class="ui green header">GeeksforGeeks</h2>
            <h4>Semantic UI Rail Close Variation</h4>
            <hr>
            <br/>
            <div class="ui segment" 
                 style="margin: auto; width:500px;">
                <div class="ui left rail close">
                    <div class="ui small segment">
                      This is a small rail closer
                      to the main viewport.
                    </div>
                </div>
                <div class="ui right rail close">
                    <div class="ui small segment">
                      This is a small rail closer 
                      to the main viewport.
                    </div>
                </div>
                <p>Main Viewport</p>
                <p>Main Viewport</p>
            </div>
        </div>
    </body>
</html>


Output:

Semantic-UI Rail Close Variation

Semantic-UI Rail Close Variation

Example 2: In the below example, we have illustrated the difference between closer rails and normal rails.

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI Rail Close Variation</title>
        <link href=
              rel="stylesheet" />
        <script src=
            integrity=
 "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
                crossorigin="anonymous">
        </script>
        <script src=
        </script>
    </head>
    <body>
        <div class="ui container">
            <h2 class="ui green header">GeeksforGeeks</h2>
            <h4>Semantic UI Rail Close Variation</h4>
            <hr>
            <br/>
            <div class="ui segment" 
                 style="margin: auto; width:500px;">
                <div class="ui left rail close">
                    <div class="ui small segment">
                      This is a small rail closer 
                      to the main viewport.
                    </div>
                </div>
                <div class="ui right rail ">
                    <div class="ui small segment">
                        This is a small normal rail.
                    </div>
                </div>
                <p>Main Viewport</p>
                <p>Main Viewport</p>
  
            </div>
        </div>
    </body>
</html>


Output:

Semantic-UI Rail Close Variation

Semantic-UI Rail Close Variation

Reference: https://semantic-ui.com/elements/rail.html


My Personal Notes arrow_drop_up
Like Article
Save Article
Related Articles

Start Your Coding Journey Now!