Semantic-UI Divider Variations Fitted 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.
A Semantic UI divider is generally used to divide the content concisely into different sections. Semantic UI has 3 different types of dividers, each type can have 5 different variations. In this article, let us discuss fitted variations in the divider variations supported in Semantic UI.
In this article, let us discuss fitted variation in the divider class supported in Semantic UI. Semantic UI Divider is generally used to divide the content concisely into different sections.
Semantic-UI Divider Fitted variation class:
- fitted: This class is used to be fitted, without any space above or below it.
Syntax:
<div class ="ui segment"> <div class="ui fitted divider"> ... </div> .... </div>
Below example illustrate the Semantic-UI Divider Variations Fitted Variant
Example 1: The following example demonstrates the fitted variation of the divider class.
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 Fitted Variant </ strong > < div class = "ui segment" > < 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 fitted divider" ></ div > < 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 > </ body > </ html > |
Output:
Example 2: The second example shows a slight variation of fitted divider variation with header and paragraphs leaving no extra spaces between the 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 Fitted Variant </ strong > < h3 class = "ui header" > Semantic UI </ h3 > < div class = "ui fitted 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 header" > Semantic UI - Fitted type Divider </ h3 > < div class = "ui fitted divider" ></ div > < p > A conventional divider leaves some space above and below the divider whereas, the fitted variation divides the section without leaving any space above or below the divider. </ p > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/elements/divider.html#fitted