Skip to content
Related Articles

Related Articles

Semantic-UI Divider Variations Clearing Variant

View Discussion
Improve Article
Save Article
  • Last Updated : 06 Feb, 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.

Semantic-UI Divider is used to create the divider between two elements, this offers us 3 types of the divider with 5 variations Inverted, Fitted, Section, Clearing, and Hidden. In this article, we will know about the Clearing Variant

Semantic-UI Divider Variations Clearing Variant Class:

  • clearing: This class is used to clear the contents above it.

Syntax:

<div class="ui segment">
  <h2 class="ui right floated header">.....</h2>
  <div class="ui clearing divider"></div>
  ....
</div>

Below example illustrate the Semantic-UI Divider Variations Clearing Variant:

Example 1: The following example demonstrates the clearing divider variation type with the left floated header.

HTML




<!DOCTYPE html>
<html>
    
<head>   
    <link href=
        rel="stylesheet" />
</head>
    
<body>
    <h1>GeeksforGeeks</h1>
    <strong>
        Semantic-UI Divider Variations Clearing Variant
    </strong>
    <h3 class="ui right floated header">
        Semantic UI
    </h3>
    <div>
      <div class="ui clearing 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. In 
           terms of user-friendliness,    Semantic UI
           is better than Bootstrap.
       </p>
  
       <h3 class="ui left floated header"
          Semantic UI - Clearing type Divider 
       </h3>
       <div class="ui clearing divider"></div>
       <p>
         The clearing variation divider clears
         the contents specified above the divider.
         This type of divider is used when more space
         is required between any two sections. 
       </p>
  
     </div>
</body>  
</html>

Output: 

Example 2: In the below code we can see a slightly different example, we can see a clearing divider variation using a vertical divider, which divides two sections into sectioned vertical sections. 

HTML




<!DOCTYPE html>
<html>
    
<head>
    <link href=
         rel="stylesheet" />
</head>  
<body>
    <h1>GeeksforGeeks</h1>
    <strong>Semantic-UI Divider Variations Clearing Variant</strong>
    <div class="ui segment">
        <div class="ui two column very relaxed grid">
            <div class="column">
                <h3 class="ui header"> Semantic UI </h3>
                <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. 
                    In terms of user-friendliness, Semantic UI 
                    is better than Bootstrap.
                </p>
  
            </div>  
            <div class = "column">
                <h3 class="ui header">
                    Semantic UI - Clearing divider variation 
                </h3>
                <p>
                    The Clearing variation divider clears the 
                    contents specified above the divider. 
                    This type of divider is used when more 
                    space is required between any two sections.
                </p>
      
            </div>
        </div>
        <div class="ui clearing vertical divider">AND</div>
    </div>
</body>  
</html>

Output:

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!