Skip to content
Related Articles

Related Articles

Semantic-UI | Divider
  • Last Updated : 09 Jul, 2020
GeeksforGeeks - Summer Carnival Banner

Semantic UI is an open-source framework available for building nice and flexible user interfaces using CSS and jQuery. It is very much similar to bootstrap having different elements for website creation. It majorly uses classes to add styles to different elements of HTML. Divider helps in visually dividing the content of the screen into groups.

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px"  
            class="ui container">
        <h2>Divider</h2>
        <div class="ui divider">
            <br>
            <p>
                Semantic UI is an open-source 
                that uses CSS and jQuery to
                build great user interfaces.
                It is 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.
            </p>
        </div>
    </div>
  
    <script src=
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
  
</body>
  
</html>

Output

Example: The following example demonstrates the Vertical Divider.




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" class="ui container">
        <h2>Vertical Divider</h2>
        <div class="ui placeholder segment">
            <div class="ui two column very 
                    relaxed stackable grid">
                <div class="middle aligned column">
                    <div class="ui huge button">
                        Student Log In
                    </div>
                </div>
                <div class="middle aligned column">
                    <div class="ui huge button">
                        Teacher Log In
                    </div>
                </div>
            </div>
            <div class="ui vertical divider">
                Or
            </div>
        </div>
    </div>
  
    <script src=
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
</body>
  
</html>

Output:



<pExample: The following example demonstrates the Horizontal Divider.




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" class="ui container">
        <h2>Horizontal Divider</h2>
        <div class="ui center aligned basic segment">
            <div class="ui button">
                Student Log In
            </div>
            <div class="ui horizontal divider">
                Or
            </div>
            <div class="ui button">
                Teacher Log In.
            </div>
        </div>
    </div>
  
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
            crossorigin="anonymous">
    </script>
  
    <script src=
    </script>
</body>
  
</html>

Output:

Example: The following example demonstrates the Inverted Divider.




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div style="margin-top: 100px" class="ui container">
        <h2>Inverted Divider</h2>
        <div class="ui placeholder inverted segment">
            <div class="ui two column very 
                    relaxed stackable grid">
                <div class="middle aligned column">
                    <div class="ui huge button">
                        Student Log In
                    </div>
                </div>
                <div class="middle aligned column">
                    <div class="ui huge button">
                        Teacher Log In
                    </div>
                </div>
            </div>
            <div class="ui inverted vertical divider">
                Or
            </div>
        </div>
    </div>
  
    <script src=
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
        crossorigin="anonymous">
    </script>
      
    <script src
    </script>
</body>
  
</html>

Output

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :