Open In App

Semantic-UI Divider Variations Fitted Variant

Improve
Improve
Like Article
Like
Save
Share
Report

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=
        rel="stylesheet" />
</head>
  
<body>
    <h1>GeeksforGeeks</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=
        rel="stylesheet" />
</head>
  
<body>
    <h1>GeeksforGeeks</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:

Semantic-UI Divider Variations Fitted Variant

Semantic-UI Divider Variations Fitted Variant

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



Last Updated : 02 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads