Skip to content
Related Articles

Related Articles

Semantic-UI Divider Types

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

Semantic UI is a free open-source front-end development framework that is equipped with pre-built semantic components that helps create responsive layouts using user-friendly HTML. In terms of user-friendliness, Semantic UI is better than Bootstrap styling. Top companies like Snapchat, Accenture have started adopting Semantic UI for the frontend.  

In this article, let us discuss different divider types that are available in Semantic UI. A divider is generally used to divide the content concisely into different sections.

Semantic-UI Divider Types Class:

  • Divider: A conventional way of dividing the webpage content into different parts of a grid.
  • Horizontal Divider: A divider can segment webpage content horizontally.
  • Vertical Divider: A divider can segment webpage content vertically.

Syntax:

<div class="ui horizontal divider">
  ....
</div>

Example 1: The following example demonstrates the standard divider class.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link href=
        rel="stylesheet" />
</head>
 
<body>
    <h2 style="color:green">
        GeeksforGeeks
    </h2>
     
    <strong>Semantic UI Standard divider</strong>
     
    <div class="ui divider">
        <h3> This is the first paragraph.</h3>
        <div class="ui divider">
             
<p>
                CSS (Cascading Style Sheets) is a
                stylesheet language used to design
                the webpage to make it attractive.
                The reason for using this is to
                simplify the process of making
                web pages presentable. It allows
                you to apply styles to web pages.
            </p>
 
 
            <div class="ui divider">
                <h3> This is the second paragraph</h3>
                <div class="ui divider">
                     
<p>
                        JavaScript is the world most
                        popular lightweight, interpreted
                        compiled programming language.
                        It is also known as scripting
                        language for web pages. It is
                        well-known for the development
                        of web pages, many non-browser
                        environments also use it.
                    </p>
 
 
                    <div class="ui divider">
                        <h3> End of paragraph </h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

Semantic-UI Divider Types

Semantic-UI Divider Types

Example 2: The following example will divide the section into two equal halves horizontally as shown below using the horizontal class.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link href=
        rel="stylesheet" />
</head>
 
<body>
    <h2 style="color:green">
        GeeksforGeeks
    </h2>
     
    <b>
         
<p>Semantic UI horizontal divider</p>
 
    </b>
     
    <div class="ui center aligned basic segment">
        <div class="ui message">
             
<p>
                CSS (Cascading Style Sheets) is
                a stylesheet\language used to
                design the webpage to make it
                attractive. The reason for using
                this is to simplify the process
                of making web pages presentable.
                It allows you to apply styles to
                web pages.
            </p>
 
        </div>
 
        <div class="ui horizontal divider">
            Or
        </div>
         
        <div class="ui message">
             
<p>
                JavaScript is the world most
                popular lightweight, interpreted
                compiled programming language.
                It is also known as scripting
                language for web pages. It is
                well-known for the development
                of web pages, many non-browser
                environments also use it.
            </p>
 
        </div>
    </div>
</body>
 
</html>


Output:

Semantic-UI Divider Types

Semantic-UI Divider Types

Example 3. This example will divide the section or columns into two equal halves vertically using the vertical class.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link href=
        rel="stylesheet" />
</head>
 
<body>
    <h2 style="color:green">
        GeeksforGeeks
    </h2>
     
    <b>
         
<p>Semantic UI vertical divider</p>
 
    </b>
     
    <div class="ui segment">
        <div class="ui two column very relaxed grid">
            <div class="column">
                 
<p>
                    JavaScript is the world most popular
                    lightweight, interpreted compiled
                    programming language. It is also
                    known as scripting language for web
                    pages.
                </p>
 
 
                 
<p>
                    It is well-known for the development
                    of web pages, many non-browser
                    environments also use it.
                </p>
 
 
                 
<p>
                    We can add JavaScript directly to
                    our HTML file by writing the code
                    inside the script tag.
                </p>
 
 
                 
<p>
                    We can write JavaScript code in
                    other file having an extension .js
                </p>
 
 
            </div>
            <div class="column">
                 
<p>
                    CSS (Cascading Style Sheets) is a
                    stylesheet language used to design
                    the webpage to make it attractive.
                </p>
 
 
                 
<p>
                    The reason for using this is to
                    simplify the process of making
                    web pages presentable. It allows
                    you to apply styles to web pages.
                </p>
 
 
                 
<p>
                    Styling is the essential property
                    for any website. It increases the
                    standards and overall look of the
                    website that makes it easier for
                    the user to interact with it
                </p>
 
            </div>
        </div>
 
        <div class="ui vertical divider">
            and
        </div>
    </div>
</body>
 
</html>


Output:

Semantic-UI Divider Types

Semantic-UI Divider Types

Reference: https://semantic-ui.com/elements/divider.html#divider


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!