Semantic-UI Divider Vertical Type
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> </ head > < body > < h2 style = "color:green" > w3wiki </ 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:
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> </ head > < body > < h2 style = "color:green" > w3wiki </ 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:
Reference: https://semantic-ui.com/elements/divider.html#vertical-divider
Contact Us