Semantic-UI Divider Vertical Type
Last Updated :
12 Feb, 2022
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.
Semantic-UI Divider Vertical is used to divide the section into two equal halves vertically as shown below. They are useful when the section has to be divided column-wise. Modern-day log-in and sign-up systems use vertical dividers. One additional feature of a vertical divider is that it will automatically swap to a horizontal divider at mobile resolutions when used inside a stackable grid.
In this article, let us discuss the Semantic UI vertical divider type. A divider is generally used to divide the content concisely into different sections.
Semantic UI Divider Vertical Type Class:
- vertical divider: This class is used to segment the webpage content vertically.
Syntax:
<div class="ui vertical divider">
...
</div>
Note: Due to a change in W3C implementation of absolutely positioned elements in flex containers vertical dividers now currently only support 50/50 splits automatically.
Example: A vertical divider dividing a section into two.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI vertical divider</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< b >
< p >Semantic UI vertical divider</ p >
</ b >
< div class = "ui placeholder segment" >
< div class="ui two column very
relaxed stackable grid">
< div class = "column" >
< div class = "ui form" >
< div class = "field" >
< label >Username</ label >
< div class = "ui left icon input" >
< input type = "text"
placeholder = "Username" >
< i class = "user icon" ></ i >
</ div >
</ div >
< div class = "field" >
< label >Password</ label >
< div class = "ui left icon input" >
< input type = "password" >
< i class = "lock icon" ></ i >
</ div >
</ div >
< div class = "ui blue submit button" >Login</ div >
</ div >
</ div >
< div class = "middle aligned column" >
< div class = "ui big button" >
< i class = "signup icon" ></ i >
Sign Up
</ div >
</ div >
</ div >
< div class = "ui vertical divider" >
Or
</ div >
</ div >
</ body >
</ html >
|
Output:
Semantic-UI Divider Vertical Type
Example 2: The above example shown is a type of stackable grid separated by a vertical divider.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI vertical divider</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< b >
< p >Semantic UI vertical divider</ p >
</ b >
< div class = "ui placeholder segment" >
< div class="ui two column very
relaxed stackable grid">
< div class = "column" >
< div class = "ui form" >
< div class = "field" >
< label >Email id</ label >
< div class = "ui left icon input" >
< input type = "text"
placeholder = "Enter your email" >
< i class = "user icon" ></ i >
</ div >
</ div >
< div class = "ui blue submit button" >
Click here to subscribe
</ div >
</ div >
</ div >
< div class = "middle aligned column" >
< div class = "ui big button" >
< i class = "Blogs & Articles" ></ i >
Sign Up
</ div >
</ div >
</ div >
< div class = "ui vertical divider" >
Or
</ div >
</ div >
</ body >
</ html >
|
Output:
Semantic-UI Divider Vertical Type
Reference: https://semantic-ui.com/elements/divider.html#vertical-divider
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...