Semantic-UI Divider Variations

Last Updated : 22 Apr, 2022

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. It uses predefined CSS and jQuery to incorporate different frameworks.

A divider is generally used to divide the content concisely into different sections. Semantic UI has 3 different types of dividers, which can have 5 different variations as listed below. In this article, let us discuss the different divider variations of horizontal divider type supported in Semantic UI.

Semantic-UI Divider Variations: As we mentioned in the above paragraph that we have three types of divider and each types has the fixed 5 variant of divider.

Inverted: Inverted Variation will invert the original colors to their straight opposite color.
Fitted: Fitted Variation will fit the divider without leaving space above and below.
Hidden: Hidden variation creates a divider that is hidden.
Section: Section variation gives large margins to divide sections of web content.
Clearing: Clearing variation clear the contents above the divider.

Syntax:

<div class="ui Divider-Variation divider">
    ...
</div>

Below examples illustrate the Semantic-UI Divider Variations:

Example 1:

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title>Semantic UI vertical divider</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
         rel="stylesheet" />
</head>  
<body>
    <h1>GeeksforGeeks</h1>
    <strong>Semantic-UI Divider Variations</strong>
    <br><br>
    <strong>Inverted Divider:</strong>
    <div class="ui inverted segment">
       
<p>
        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.  
        It uses predefined CSS and jQuery to incorporate
        different frameworks. 
      </p>
 
 
      <div class="ui inverted divider"></div>
       
<p>
        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.  
        It uses predefined CSS and jQuery to incorporate
        different frameworks.
      </p>
 
    </div>
    <strong>Fitted Divider:</strong>
    <div class="ui segment">
      Geeksforgeeks
      <div class="ui fitted divider">
          We provide a variety of services for you to learn,
        thrive and also have fun!
      </div>
    </div>
</body>  
</html>

Output:

Semantic-UI Divider Variations

Example 2:

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title>Semantic UI vertical divider</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
         rel="stylesheet" />
</head>  
<body>
    <h1>GeeksforGeeks</h1>
    <strong>Semantic-UI Divider Variations</strong>
    <br><br>
    <hr><hr>
    <strong>Hidden Divider:</strong>
    <br>
    <strong class="ui header">GeeksforGeeks</strong>
     
<p>
      Free Tutorials, Millions of Articles, Live, 
      Online and Classroom Courses ,Frequent Coding 
      Competitions ,Webinars by Industry Experts,
      Internship opportunities and Job Opportunities.
    </p>
 
 
    <div class="ui hidden divider"></div>
    <strong class="ui header">Geeks Portal</strong>
     
<p>
      Free Tutorials, Millions of Articles, Live, 
      Online and Classroom Courses ,Frequent Coding 
      Competitions ,Webinars by Industry Experts,
      Internship opportunities and Job Opportunities.
    </p>
 
 
    <hr><hr>
    <strong>Section Divider:</strong>
    <br>
    <strong class="ui header">GeeksforGeeks</strong>
     
<p>
      Free Tutorials, Millions of Articles, Live, 
      Online and Classroom Courses ,Frequent Coding 
      Competitions ,Webinars by Industry Experts,
      Internship opportunities and Job Opportunities.
    </p>
 
 
    <div class="ui section divider"></div>
    <strong class="ui header">Geeks Portal</strong>
     
<p>
      Free Tutorials, Millions of Articles, Live, 
      Online and Classroom Courses ,Frequent Coding 
      Competitions ,Webinars by Industry Experts,
      Internship opportunities and Job Opportunities.
    </p>
 
 
    <hr><hr>
    <strong>Clearing Divider:</strong>
    <br>
    <div class="ui segment">
      <strong class="ui right floated header">
        Geeks Portal
      </strong>
      <div class="ui clearing divider"></div>
       
<p>
        Free Tutorials, Millions of Articles, Live, 
        Online and Classroom Courses ,Frequent Coding 
        Competitions ,Webinars by Industry Experts,
        Internship opportunities and Job Opportunities.
      </p>
 
    </div>
</body>  
</html>

Output:

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

Suggest improvement

Semantic-UI Divider Types

Semantic-UI | Flag

Share your thoughts in the comments

Semantic-UI Button