Open In App

Semantic-UI Rail Size 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. We can change the size of the rails using various classes like tiny, small, huge, etc.

Semantic-UI Rails Size Variation Classes:

  • tiny: Makes the size and shape of the rail tiny.
  • mini: Makes the size and shape of the rail mini.
  • small: Makes the size and shape of the rail small.
  • large: Makes the size and shape of the rail large.
  • big: Makes the size and shape of the rail big.
  • huge: Makes the size and shape of the rail huge.
  • massive: Makes the size and shape of the rail massive.

Syntax:

<div class="ui segment">
    <div class="ui left rail">
        <div class="ui segment size-class">
            ...
        </div>
    </div>
    <div class="ui right rail">
        <div class="ui segment size-class">
            ...
        </div>
    </div>
    ...
</div>
...

Example 1: The below example illustrates all the lower-sized rails.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI Rail Size Variation</title>
    <link href=
         rel="stylesheet" />
        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 Size Variation</h4>
        <hr>
        <br />
        <center>
            <div class="ui segment" style="width:700px;">
                <div class="ui left rail">
                    <div class="ui mini segment">
                        This is the mini rail
                    </div>
                </div>
                <div class="ui right rail">
                    <div class="ui tiny segment">
                        This is the tiny rail
                    </div>
                </div>
                <p>Main Viewport</p>
                <p>Main Viewport</p>
            </div>
            <div class="ui segment" style="width:700px;">
                <div class="ui left rail">
                    <div class="ui small segment">
                        This is the small rail
                    </div>
                </div>
                <p>Main Viewport</p>
                <p>Main Viewport</p>
            </div>
        </center>
    </div>
</body>
  
</html>


Output:

Illustrates small-sized rails

Example 2: The below example illustrates all the larger-sized rails.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI Rail Size Variation</title>
    <link href=
        rel="stylesheet" />
        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 Size Variation</h4>
        <hr>
        <br />
        <center>
            <div class="ui segment" style="width:700px;">
                <div class="ui left rail">
                    <div class="ui large segment">
                        This is the large rail
                    </div>
                </div>
                <div class="ui right rail">
                    <div class="ui big segment">
                        This is the big rail
                    </div>
                </div>
                <p>Main Viewport</p>
                <p>Main Viewport</p>
            </div>
            <div class="ui segment" style="width:700px;">
                <div class="ui left rail">
                    <div class="ui huge segment">
                        This is the huge rail
                    </div>
                </div>
                <div class="ui right rail">
                    <div class="ui massive segment">
                        This is the massive rail
                    </div>
                </div>
                <p>Main Viewport</p>
                <p>Main Viewport</p>
            </div>
        </center>
    </div>
</body>
  
</html>


Output:

Illustrates large-sized rails

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



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