Semantic-UI Divider Horizontal Type

Last Updated : 22 Mar, 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. In terms of user-friendliness, Semantic UI is better than Bootstrap styling. Top companies like Snapchat, Accenture have started adopting Semantic UI for the frontend.

Semantic-UI Divider Horizontal Types Class:

divider: A conventional way of dividing the webpage content into different parts of a grid.
horizontal divider: A divider can segment webpage content horizontally.

In this article, we’ll discuss the Horizontal divider type of Semantic UI. A divider is generally used to divide the content concisely into different sections.

Syntax:

<div class="ui center aligned basic segment">
    <h3 class="ui header"> ... </h3>
    <div class="ui horizontal divider"> ... </div>
    <p> ... </p>
</div>

Horizontal Type divider will divide the section into two equal halves horizontally as shown below. They are useful when multiple paragraphs are to be divided and presently concisely on the same page.

Example 1: This example illustrates the horizontal divider between two components:

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> 
    <div class="ui center aligned basic segment"> 
        <div class="ui left icon action input"> 
            <i class="search icon"></i> 
            <input type="text" placeholder="Type your favorite food"> 
            <div class="ui yellow submit button">Search</div> 
        </div> 
        <div class="ui horizontal divider"> 
            Or 
        </div> 
        <div class="ui left aligned basic segment"> 
            <div class="ui left icon action input"> 
                <i class="search icon"></i> 
                <input type="text" placeholder="Enter restaurant name"> 
                <div class="ui red submit button">Find</div> 
  
                <div class="ui right aligned basic segment"> 
                    <div class="ui left icon action input"> 
                        <div class="ui green submit button"> 
                            Order History 
                        </div> 
                    </div> 
  
                    <div class="ui horizontal divider"> 
                        Thanks 
                    </div> 
  
                </div> 
  
                <div class="ui red labeled icon button"> 
                    Add food to your cart 
                    <i class="shopping cart icon"></i> 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html> 

Output:

Horizontal divider type

Example 2: The second example shows a horizontal type divider that divides two paragraphic sections using horizontal divider type in Semantic UI.

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> 
    <center> 
        <h1>Geeksforgeeks</h1> 
        <strong>Semantic UI Horizontal Divider </strong> 
    </center> 
  
    <div class="ui horizontal divider"> 
        This is a Horizontal divider 
    </div> 
    <strong>Semantic-UI Checkbox-Types:</strong> 
    <br><br> 
      
    <div class="ui center aligned basic segment"> 
        <p> 
            Please go through the terms 
            and conditions thoroughly 
        </p> 
  
        <input type="radio" name="radio"> 
        <label>Accept terms and conditions</label> 
        <div class="ui horizontal divider"> OR </div> 
    </div> 
  
    <div class="ui center aligned basic segment"> 
        <p> 
            Do you like us to send a copy 
            of our updates via email 
        </p> 
  
        <input type="checkbox" name="example"> 
        <label>Sign up for newsletters </label> 
        <div class="ui horizontal divider"> Thanks </div> 
    </div> 
</body> 
  
</html> 