Semantic-UI Divider Variations Clearing Variant
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> </ head > < body > < h1 >w3wiki</ 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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> </ head > < body > < h1 >w3wiki</ 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