Skip to content
Related Articles

Related Articles

Semantic-UI | Rail

View Discussion
Improve Article
Save Article
  • Last Updated : 08 Apr, 2022
View Discussion
Improve Article
Save Article

Semantic UI open-source framework provides Rail which helps in showing content outside the boundaries of the main view of the website. It is mostly on the left and right side when your website’s main view is in the center. It is very similar to bootstrap usage and has great different elements to use to make your website look more amazing.

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
 
<body>
    <div style="margin-top: 100px"
            class="ui container">
        <h2>Rail</h2>
        <br>
        <div class="ui grid container">
            <div class="ui four wide column">
 
            </div>
            <div class="ui segment eight wide column">
                <div class="ui left rail">
                    <div class="ui segment">
                        Left Rail
                        <ul>
                            <strong>Menu</strong>
                            <li>Data Structure</li>
                            <li>Web Programming</li>
                            <li>C++ Programming</li>
                        </ul>
                    </div>
                </div>
                <div class="ui right rail">
                    <div class="ui segment">
                        Right Rail
                        <ul>
                            <strong>
                                More you wanna try
                            </strong>
                            <li>
                                Try new basic computer
                                programming course
                            </li>
                            <li>
                                Full stack
                                developer course
                            </li>
                        </ul>
                    </div>
                </div>
                <h1>Welcome to geeksforgeeks.</h1>
            </div>
        </div>
    </div>
    <script src=
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
     
    <script src=
    </script>
</body>
 
</html>


Output:

Example: The following example shows the internal rail.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
 
<body>
    <div style="margin-top: 100px" class="ui container">
        <h2>Internal Rail</h2>
        <br>
        <div class="ui segment eight wide column">
            <div class="ui left internal rail">
                <div class="ui segment">
                    Left Rail
                    <ul>
                        <strong>Menu</strong>
                        <li>Data Structure</li>
                        <li>Web Programming</li>
                        <li>C++ Programming</li>
                    </ul>
                </div>
            </div>
            <div class="ui right internal rail">
                <div class="ui segment">
                    Right Rail
                    <ul>
                        <strong>More you wanna try</strong>
                        <li>
                            Try new basic computer
                            programming course
                        </li>
                        <li>Full stack developer course</li>
                    </ul>
                </div>
            </div>
            <center>
                <h3>Welcome to geeksforgeeks.</h3>
                 
 
<p>Learn anything you want</p>
 
 
                 
 
<p>Get tutorial of anything related
                    to computer science.</p>
 
 
                 
 
<p>Courses on programming</p>
 
 
                 
 
<p>Solve programming problems.</p>
 
 
                 
 
<p>Help other by writing articles.</p>
 
 
 
            </center>
        </div>
    </div>
 
    <script src=
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
     
    <script src=
    </script>
</body>
 
</html>


Output:

Example: The following example shows dividing rail.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
 
<body>
    <div style="margin-top: 100px" class="ui container">
        <h2>Dividing Rail</h2>
        <br>
        <div class="ui grid container">
            <div class="ui four wide column">
 
            </div>
            <div class="ui segment eight wide column">
                <div class="ui left dividing rail">
                    <div class="ui segment">
                        Left Rail
                        <ul>
                            <strong>Menu</strong>
                            <li>Data Structure</li>
                            <li>Web Programming</li>
                            <li>C++ Programming</li>
                        </ul>
                    </div>
                </div>
                <div class="ui right dividing rail">
                    <div class="ui segment">
                        Right Rail
                        <ul>
                            <strong>
                                More you wanna try
                            </strong>
                            <li>Try new basic computer
                                programming course</li>
                            <li>Full stack developer course</li>
                        </ul>
                    </div>
                </div>
                <center>
                    <h3>Welcome to geeksforgeeks.</h3>
                     
 
<p>Learn anything you want</p>
 
 
                     
 
<p>Get tutorial of anything related
                        to computer science.</p>
 
 
                     
 
<p>Courses on programming</p>
 
 
                     
 
<p>Solve programming problems.</p>
 
 
                     
 
<p>Help other by writing articles.</p>
 
 
 
                </center>
            </div>
        </div>
    </div>
    <script src=
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
     
    <script src=
    </script>
</body>
 
</html>


Output:

Example: The following example shows attached rail.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
 
<body>
    <div style="margin-top: 100px" class="ui container">
        <h2>Attached Rail</h2>
        <br>
        <div class="ui grid container">
            <div class="ui four wide column">
 
            </div>
            <div class="ui segment eight wide column">
                <div class="ui left attached rail">
                    <div class="ui segment">
                        Left Rail
                        <ul>
                            <strong>Menu</strong>
                            <li>Data Structure</li>
                            <li>Web Programming</li>
                            <li>C++ Programming</li>
                        </ul>
                    </div>
                </div>
                <div class="ui right attached rail">
                    <div class="ui segment">
                        Right Rail
                        <ul>
                            <strong>
                                More you wanna try
                            </strong>
                            <li>Try new basic computer
                                programming course</li>
                            <li>Full stack developer course</li>
                        </ul>
                    </div>
                </div>
                <center>
                    <h3>Welcome to geeksforgeeks.</h3>
                     
 
<p>Learn anything you want</p>
 
 
                     
 
<p>Get tutorial of anything related
                        to computer science.</p>
 
 
                     
 
<p>Courses on programming</p>
 
 
                     
 
<p>Solve programming problems.</p>
 
 
                     
 
<p>Help other by writing articles.</p>
 
 
                </center>
            </div>
        </div>
    </div>
     
    <script src=
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
     
    <script src=
    </script>
</body>
 
</html>


Output:

You can use classes like tiny, small, large, huge, massive to change the size of the rail.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!