Skip to content
Related Articles

Related Articles

Semantic-UI Divider Variations

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

Semantic-UI Divider Variations

Example 2:

HTML




<!DOCTYPE html>
<html>
   
<head>
    <title>Semantic UI vertical divider</title>
    <link href=
         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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!