Semantic-UI Step Unstackable Variation

Last Updated : 09 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. It consists of pre-built semantic components with the help of which one can create beautiful and responsive layouts.

A Step shows the completion status of an activity in a series of activities. It is an essential component that helps the user to keep a track of his/her activities. For example: If you order an item from an app, then the app shows you the completion status of your order starting from order placed to successfully delivered. This same can be achieved with the help of Steps in Semantic-UI.

There are times when we have to create a step in a certain manner such that it has to be horizontal i.e. the steps shouldn’t stack on top of each other even in the mobile view. This desired result can be achieved with the help of Step Unstackable Variation in the Semantic-UI framework that does not allow steps to be stacked on top of each other.

Semantic-UI Step Unstackable Variation Class:

unstackable: This class is used to make the steps unstackable and it should be used on the parent. This means that the steps do not stack upon each other and reside beside each other.

Syntax:

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

Now let us have a look at a couple of examples in which we will use the Step Unstackable Variation.

Example 1:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <br> 
    <div class="ui green huge header"> 
      GeeksforGeeks 
    </div> 
  
    <div class="ui large header"> 
      Step Stackable Variation 
    </div> 
  
    <!--Stackable Step Created-->
    <div class="ui tablet stackable steps"> 
        <div class="active step"> 
            <i class="truck icon"></i> 
            <div class="content"> 
                <div class="title"> 
                    Transporting 
                </div> 
                <div class="description"> 
                    Will Reach In 2 Days 
                </div> 
            </div> 
        </div> 
  
        <div class="disabled step"> 
            <i class="thumbs up icon"></i> 
            <div class="content"> 
                <div class="title"> 
                    Delivered 
                </div> 
                <div class="description"> 
                    Package Successfully Delivered 
                </div> 
            </div> 
        </div> 
  
        <div class="disabled step"> 
            <i class="info circle icon"></i> 
            <div class="content"> 
                <div class="title"> 
                    Feedback 
                </div> 
                <div class="description"> 
                    Please Do Give A Feedback 
                </div> 
            </div> 
        </div> 
    </div> 
  
    <div class="ui large header"> 
      Step Unstackable Variation 
    </div> 
  
    <!--Unstackable Step Created-->
    <div class="ui unstackable steps"> 
        <div class="active step"> 
            <i class="truck icon"></i> 
            <div class="content"> 
                <div class="title"> 
                    Transporting 
                </div> 
                <div class="description"> 
                    Will Reach In 2 Days 
                </div> 
            </div> 
        </div> 
  
        <div class="disabled step"> 
            <i class="thumbs up icon"></i> 
            <div class="content"> 
                <div class="title"> 
                    Delivered 
                </div> 
                <div class="description"> 
                    Package Successfully Delivered 
                </div> 
            </div> 
        </div> 
  
        <div class="disabled step"> 
            <i class="info circle icon"></i> 
            <div class="content"> 
                <div class="title"> 
                    Feedback 
                </div> 
                <div class="description"> 
                    Please Do Give A Feedback 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <br> 
    <div class="ui green huge header"> 
        GeeksforGeeks 
    </div> 
    <div class="ui large header"> 
        Step Stackable Variation 
    </div> 
  
    <div class="ui tablet stackable steps"> 
        <!--stackable Step Created-->
  
        <div class="step"> 
            <i class="money icon"></i> 
            <div class="content"> 
                <div class="title"> 
                    Payment 
                </div> 
                <div class="description"> 
                    Payment Accepted 
                </div> 
            </div> 
        </div> 
  
        <div class="active step"> 
            <i class="food icon"></i> 
            <div class="content"> 
                <div class="title"> 
                    Chef 
                </div> 
                <div class="description"> 
                    Food Prepared 
                </div> 
            </div> 
        </div> 
  
        <div class="disabled step"> 
            <i class="motorcycle icon"></i> 
            <div class="content"> 
                <div class="title"> 
                    Order Delivered 
                </div> 
                <div class="description"> 
                    Enjoy Your Meal 
                </div> 
            </div> 
        </div> 
    </div> 
  
  
    <div class="ui large header"> 
        Step Unstackable Variation 
    </div> 
  
    <!--Unstackable Step Created-->
  
    <div class="ui unstackable steps"> 
        <div class="step"> 
            <i class="money icon"></i> 
            <div class="content"> 
                <div class="title"> 
                    Payment 
                </div> 
                <div class="description"> 
                    Payment Accepted 
                </div> 
            </div> 
        </div> 
  
        <div class="active step"> 
            <i class="food icon"></i> 
            <div class="content"> 
                <div class="title"> 
                    Chef 
                </div> 
                <div class="description"> 
                    Food Prepared 
                </div> 
            </div> 
        </div> 
  
        <div class="disabled step"> 
            <i class="motorcycle icon"></i> 
            <div class="content"> 
                <div class="title"> 
                    Order Delivered 
                </div> 
                <div class="description"> 
                    Enjoy Your Meal 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>