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
Please Login to comment...