Skip to content
Related Articles

Related Articles

Semantic-UI | Divider
  • Last Updated : 09 Jul, 2020

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:

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

chevron_right


Output

Example: The following example demonstrates the Vertical Divider.

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

chevron_right


Output:



<pExample: The following example demonstrates the Horizontal Divider.

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

chevron_right


Output:

Example: The following example demonstrates the Inverted Divider.

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

chevron_right


Output

My Personal Notes arrow_drop_up
Recommended Articles
Page :