Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create a stacked progress bar using Bootstrap 5 ?

  • Last Updated : 08 Oct, 2021

In this article, we will know how to create the stacked progress bar with the label on it using Bootstrap. Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. A Progress bar is used to display the progress of a process on a computer. A progress bar displays how much of the process is completed and how much is left. We can add a progress bar on a web page using predefined bootstrap classes. Bootstrap provides many types of progress bars & also supports several custom progress bar which includes Stacked Progress Bar and Animated Progress Bar.

By using the Bootstrap Progress Bar, users can quickly identify the status of tasks executed for a particular process. For instance, if a user is downloading something, the progress bar will display the status of completion or the progress of that ongoing download. A similar case can think for uploading & etc.

Syntax:

<div class="progress"> Contents <div>

Approach: To create a progress bar:

  • Use class progress inside a div class.
  • Inside the already made div class, add another div tag with a class .progress-bar. Here, bg-success is used for showing the progress.
  • Mention the progress of the bar under a style attribute using the width as a percentage. For eg- style=”width:50%

 



Example 1: This example illustrates the default progress bar in Bootstrap.

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Load Bootstrap -->
    <link href=
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous" />
</head>
  
<body style="text-align: center">
    <div class="container mt-3" style="width: 700px">
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <h4>Progress Bar</h4>
          
        <div class="progress">
            <div class="progress-bar bg-success" 
                style="width: 60%">
            </div>
        </div>
    </div>
</body>
  
</html>

Output:

Now, we will follow the below steps to build our Stacked Progress Bar.

Step 1: Download Bootstrap’s latest version or we can directly include the Bootstrap CDN link into the <head> tag.

<!–Bootstrap CSS plugin–>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=”anonymous”>

<!–Bootstrap JavaScript plugin–>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js” integrity=”sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM” crossorigin=”anonymous”></script>

Step 2: Declare the class as a container with values as .progress  in the outer <div>.

<div class="progress">
    <div></div>
    <div></div>
</div>

Step 3:  Add .progress-bar class to inner <div> container. To specify the width for the progress bar, we can use the pre-defined bootstrap class for the width that will set the width of the bar. For instance, w-25 p-3 will set the width of 25%, w-50 p-3 will set the width of 50% & so on.

<div class="progress">
    <div class="progress-bar bg-success w-25 p-3">
        Progress 1
    </div>

    <div class="progress-bar bg-success w-50 p-3">
        Progress 2
    </div>
</div>

Step 4: For Labelled Stacked Progress Bar, the text inside the stack progress bar will display the multiple task completion in percentage.

Example 2: This example illustrates the Labelled Stacked Progress Bar using Bootstrap v5.0.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        Bootstrap 5 Labelled Stacked Progress Bar
    </title>
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
    <link rel="stylesheet" href=
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous" />
</head>
  
<body style="text-align: center">
    <div class="container mt-5">
        <h1 class="text-success">GeeksforGeeks</h1>
        <h3 class="text-secondary">
            Labelled Stacked Progress Bar
        </h3>
        <br />
          
        <div class="progress" style="height: 30px">
            <div class="progress-bar bg-primary w-25 p-3">
                Progress 15%
            </div>
            <div class="progress-bar bg-info w-50 p-3">
                Progress 35%
            </div>
            <div class="progress-bar bg-secondary w-25 p-3">
                Progress 12%
            </div>
            <div class="progress-bar bg-success w-50 p-3" role="">
                Progress 38%
            </div>
        </div>
    </div>
</body>
  
</html>

Output: 




My Personal Notes arrow_drop_up
Recommended Articles
Page :