Semantic-UI Rail Dividing Type

Last Updated : 16 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. The main viewport and the rails can be divided using the divided class.

Semantic-UI Rail Dividing Type Classes:

dividing: Creates a division between the rail and the main viewport.

Syntax:

<div class="ui segment">
    <div class="ui rail dividing">
        <div class="ui segment">
            ...
        </div>
    </div>
    ...
</div>
...

Example 1: In the below example, we have divided the rails and the main viewport.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI Rail Dividing 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 Dividing Type</h4>
            <hr>
            <br/>
            <div class="ui segment" 
                 style="margin: auto; width:500px;">
                <div class="ui left rail dividing">
                    <div class="ui tiny segment">
                      This is a tiny rail divided from
                      the main viewport.
                    </div>
                </div>
                <div class="ui right rail dividing">
                    <div class="ui tiny segment">
                      This is a tiny rail divided from
                      the main viewport.
                    </div>
                </div>
                <p>Main Viewport</p>
                <p>Main Viewport</p>
            </div>
        </div>
    </body>
</html>

Output:

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

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI Rail Dividing 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 Dividing Type</h4>
            <hr>
            <br/>
            <div class="ui segment" style="margin: auto; width:500px;">
                <div class="ui left rail dividing">
                    <div class="ui tiny segment">
                      This is a tiny rail divided
                      from the main viewport.
                    </div>
                </div>
                <div class="ui right rail">
                    <div class="ui tiny segment">
                        This is a tiny normal rail.
                    </div>
                </div>
                <p>Main Viewport</p>
                <p>Main Viewport</p>

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