Semantic-UI Divider Types
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.
HTML
<!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:
Semantic-UI Divider Types
Example 2: The following example will divide the section into two equal halves horizontally as shown below using the horizontal class.
HTML
<!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:
Semantic-UI Divider Types
Example 3. This example will divide the section or columns into two equal halves vertically using the vertical class.
HTML
<!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:
Semantic-UI Divider Types
Reference: https://semantic-ui.com/elements/divider.html#divider
Please Login to comment...