Semantic-UI Step Fluid Variation

Last Updated : 21 Mar, 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 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 Variations Fluid Variant. This variant is used to create steps that will take the whole width of the container.

Semantic-UI Step Variations Fluid Variant takes up the width of its container. So if you want to design a step that will take the full width of the container you can just add this class.

Semantic UI Step Variations Fluid Variant class:

fluid: This class is used to takes up the width of its container

Syntax:

<div class="ui fluid steps">
    ...
</div>

Example: The below example illustrate the Semantic UI Step Variations Fluid Variant:

HTML

<!DOCTYPE html> 
<html> 
   <head> 
      <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
            rel="stylesheet" /> 
   </head> 
   <body> 
      <center> 
         <h1 class="ui header green">Geeksforgeeks</h1> 
         <strong> 
         Semantic-UI Step Variations Fluid Variant 
         </strong> 
         <br><br> 
      </center> 
      <strong>Fluid Steps:</strong> 
      <div class="ui fluid steps"> 
      <div class="step"> 
         <i class="truck icon green"></i> 
         <div class="content"> 
            <div class="title">Shipping</div> 
            <div class="description"> 
               Select your Address 
            </div> 
         </div> 
      </div> 
      <div class="step"> 
         <i class="file alternate blue icon"></i> 
         <div class="content"> 
            <div class="title">Billing</div> 
            <div class="description"> 
               Select your way to pay 
            </div> 
         </div> 
      </div> 
      <div class="step"> 
         <i class="file alternate icon"></i> 
         <div class="content"> 
            <div class="title">Delivered</div> 
            <div class="description"> 
               Check you package 
            </div> 
         </div> 
      </div> 
      </div> 
      <br><br> 
      <strong>Non Fluid Steps:</strong> 
      <div class="ui steps"> 
      <div class="step"> 
         <i class="truck icon green"></i> 
         <div class="content"> 
            <div class="title">Shipping</div> 
            <div class="description"> 
               Select your Address 
            </div> 
         </div> 
      </div> 
      <div class="step"> 
         <i class="file alternate blue icon"></i> 
         <div class="content"> 
            <div class="title">Billing</div> 
            <div class="description"> 
               Select your way to pay 
            </div> 
         </div> 
      </div> 
      <div class="step"> 
         <i class="file alternate icon"></i> 
         <div class="content"> 
            <div class="title">Delivered</div> 
            <div class="description"> 
               Check you package 
            </div> 
         </div> 
      </div> 
      </div> 
   </body> 
</html>