Semantic-UI | Rail

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 
                                programiming 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>

chevron_right


Output:

Example: The following example shows the inernal rail.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 
                            programiming 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>

chevron_right


Output:



Example: The following example shows dividing rail.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" class="ui container">
        <h2>Dividng 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 
                                programiming 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>

chevron_right


Output:

Example: The following example shows attached rail.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 
                                programiming 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>

chevron_right


Output:

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




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.