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.
In this article, let us discuss different divider types that are available in Semantic UI. A divider is generally used to divide the content concisely into different sections.
Semantic-UI Divider 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.
- Vertical Divider: A divider can segment webpage content vertically.
Syntax:
<div class="ui horizontal divider"> .... </div>
Example 1: The following example demonstrates the standard divider class.
<!DOCTYPE html> < html >
< head >
< link href =
rel = "stylesheet" />
</ head >
< body >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< strong >Semantic UI Standard divider</ strong >
< div class = "ui divider" >
< h3 > This is the first paragraph.</ h3 >
< div class = "ui divider" >
< 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 divider" >
< h3 > This is the second paragraph</ h3 >
< div class = "ui divider" >
< 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 class = "ui divider" >
< h3 > End of paragraph </ h3 >
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: The following example will divide the section into two equal halves horizontally as shown below using the horizontal class.
<!DOCTYPE html> < html >
< head >
< link href =
rel = "stylesheet" />
</ head >
< body >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< b >
< p >Semantic UI horizontal divider</ p >
</ b >
< div class = "ui center aligned basic segment" >
< div class = "ui message" >
< 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 >
< div class = "ui horizontal divider" >
Or
</ div >
< div class = "ui message" >
< 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 >
</ div >
</ body >
</ html >
|
Output:
Example 3. This example will divide the section or columns into two equal halves vertically using the vertical class.
<!DOCTYPE html> < html >
< head >
< link href =
rel = "stylesheet" />
</ head >
< body >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< b >
< p >Semantic UI vertical divider</ p >
</ b >
< div class = "ui segment" >
< div class = "ui two column very relaxed grid" >
< div class = "column" >
< p >
JavaScript is the world most popular
lightweight, interpreted compiled
programming language. It is also
known as scripting language for web
pages.
</ p >
< p >
It is well-known for the development
of web pages, many non-browser
environments also use it.
</ p >
< p >
We can add JavaScript directly to
our HTML file by writing the code
inside the script tag.
</ p >
< p >
We can write JavaScript code in
other file having an extension .js
</ p >
</ div >
< div class = "column" >
< p >
CSS (Cascading Style Sheets) is a
stylesheet language used to design
the webpage to make it attractive.
</ p >
< p >
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 >
< p >
Styling is the essential property
for any website. It increases the
standards and overall look of the
website that makes it easier for
the user to interact with it
</ p >
</ div >
</ div >
< div class = "ui vertical divider" >
and
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://semantic-ui.com/elements/divider.html#divider