Semantic-UI Step Evenly Divided Variation
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap in use and has great different elements to use to make your website look more amazing. Semantic-UI Step Variations offer us different variety in steps, Stackable, Fluid, Unstackable, Attached, Evenly Divided, and Size. In this article, we will know about the Semantic-UI Step Evenly Divided Variation. The evenly divided variation is used to display the steps into equal width space.
Semantic-UI Step Evenly Divided Variation Class:
- *number: This class is used to divide the steps into equal widths.
Syntax:
<div class="ui *number steps">
<div class="step">
...
</div>
...
</div>
Example 1: In this example, we will describe the Semantic-UI Step Evenly Divided Variation.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
Semantic-UI Step Evenly Divided Variation
</ title >
< link rel = "stylesheet"
href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui container center aligned" >
< h2 class = "header ui green" >
GeeksforGeeks
</ h2 >
< h3 >Semantic-UI Step Evenly Divided Variation</ h3 >
< div class = "ui three steps" >
< div class = "step" >
< i class = "address book icon green" ></ i >
< div class = "content" >
< div class = "title" >Contact List</ div >
< div class = "description" >
Open Contact List
</ div >
</ div >
</ div >
< div class = "step" >
< i class = "phone blue icon" ></ i >
< div class = "content" >
< div class = "title" >Number</ div >
< div class = "description" >
Select Contact Number
</ div >
</ div >
</ div >
< div class = "step" >
< i class = "tasks icon" ></ i >
< div class = "content" >
< div class = "title" >Detailed Info</ div >
< div class = "description" >
Contact Number Information
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Semantic-UI Step Evenly Divided Variation
Example 2: In this example, we will describe the Semantic-UI Step Evenly Divided Variation.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
Semantic-UI Step Evenly Divided Variation
</ title >
< link rel = "stylesheet"
href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui container center aligned" >
< h2 class = "header ui green" >
GeeksforGeeks
</ h2 >
< h3 >Semantic-UI Step Evenly Divided Variation</ h3 >
< div class = "ui four steps" >
< div class = "active step" >
< i class = "address book icon green" ></ i >
< div class = "content" >
< div class = "title" >Contact List</ div >
< div class = "description" >
Open Contact List
</ div >
</ div >
</ div >
< div class = "step" >
< i class = "phone blue icon" ></ i >
< div class = "content" >
< div class = "title" >Number</ div >
< div class = "description" >
Select Contact Number
</ div >
</ div >
</ div >
< div class = "step" >
< i class = "tasks icon" ></ i >
< div class = "content" >
< div class = "title" >Detailed Info</ div >
< div class = "description" >
Contact Number Information
</ div >
</ div >
</ div >
< div class = "disabled step" >
< i class = "trash alternate icon" ></ i >
< div class = "content" >
< div class = "title" >Delete</ div >
< div class = "description" >
Delete Contact Information
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Semantic-UI Step Evenly Divided Variation
Reference: https://semantic-ui.com/elements/step.html#evenly-divided
Last Updated :
08 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...