Open In App

Semantic-UI | Divider

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 09 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads