Open In App

Semantic-UI Rail Close Variation

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 16 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads