June 10th, 2020 
Prerana Kasar Bootstrap 4 Progress Bars
The progress bar is used to know about the completion of the work. Bootstrap 4 provides the class to enhance the look and feel of the normal progress bar.
The class .progress and .progress-bar is used to create the progress bar.
Example 1 – Bootstrap 4 Progress Bar Example
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html><html><head> <title>Bootstrap 4 Progress Bars Example</title> <!-- link the bootstrap online or through CDN --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script></head><body> <div class="container-fluid"> <h2>Progress Bar Example</h2> <div class="progress"> <div class="progress-bar" style="width:70%;"> </div> </div> </div></body></html> |
On the above code, we apply the class .progress is applied to the parent container element and class .progress-bar is applied to the child element. And properties width and height are used to set the width and the height of the progress bar.
Bootstrap 4 Progress Bar Labels
To show the percentag of the of the progress bar inside in it.
Example 2 – Bootstrap 4 Progress Bar Labels Example
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html><html><head> <title>Bootstrap 4 Progress Bars Example</title> <!-- link the bootstrap online or through CDN --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script></head><body> <div class="container-fluid"> <h2>Progress Bar Example</h2> <div class="progress"> <div class="progress-bar" style="width:70%;"> 70% </div> </div> </div></body></html> |
On the above code the value of the progress bar is passes to the child progress bar container.
Bootstrap 4 Colored Progress Bar
Using the background-color classes to the progress bar, the color of the progress by changed to the default color(blue) of the progress bar.
Example 3 – Bootstrap 4 Colored Progress Bar Example
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html><html><head> <title>Bootstrap 4 Progress Bars Example</title> <!-- link the bootstrap online or through CDN --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script></head><body> <div class="container-fluid"> <h2>Colored Progress Bar Example</h2> <div class="progress"> <div class="progress-bar bg-success" style="width:40%;"> 40% </div> </div><br> <div class="progress"> <div class="progress-bar bg-info" style="width:55%;"> 55% </div> </div><br> <div class="progress"> <div class="progress-bar bg-warning" style="width:70%;"> 70% </div> </div> </div></body></html> |
On the above code, we apply a class of background-color to the progress bar container, the colored of the progress bar will be changing as per the applied background-color.
Bootstrap 4 Striped Progress Bar
The class .progress-bar-striped is used to create the stripes to the progress bar.
Example 4 – Bootstrap 4 Striped Progress Bar Example
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html><html><head> <title>Bootstrap 4 Progress Bars Example</title> <!-- link the bootstrap online or through CDN --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script></head><body> <div class="container-fluid"> <h2>Striped Progress Bar Example</h2> <div class="progress"> <div class="progress-bar bg-success progress-bar-striped" style="width:40%;"> 50% (Progress Success Bar) </div> </div><br> <div class="progress"> <div class="progress-bar bg-info progress-bar-striped" style="width:55%;"> 60% (Progress Info Bar) </div> </div><br> <div class="progress"> <div class="progress-bar bg-warning progress-bar-striped" style="width:70%;"> 70% (Progress Warning Bar) </div> </div> </div></body></html> |
On the above code, we apply a class .progress-bar-striped to the progress-bar container to create stripes to the progress-bar.
Bootstrap 4 Animated Progress Bar
The class .progress-bar-striped is used to create the stripes to the progress bar and it is a static striped to make it as ran the class .progress-bar-animated is used.
Example 5 – Bootstrap 4 Animated Progress Bar Example
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html><html><head> <title>Bootstrap 4 Progress Bars Example</title> <!-- link the bootstrap online or through CDN --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script></head><body> <div class="container-fluid"> <h2>Animated Striped Progress Bar Example</h2> <div class="progress"> <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width:40%;"> 50% (Progress Success Bar) </div> </div><br> <div class="progress"> <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width:55%;"> 60% (Progress Info Bar) </div> </div><br> <div class="progress"> <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width:70%;"> 70% (Progress Warning Bar) </div> </div> </div></body></html> |
On the above code, we apply a class .progress-bar-striped and class .progress-bar-animated is applied to the progress-bar container to create animated stripes to the progress-bar.
Bootstrap 4 Multiple Progress Bar
To create the multiple progress bar in the single-bar or stacked progress-bar.
Example 6 – Bootstrap 4 Multiple Progress Bar Example
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html><html><head> <title>Bootstrap 4 Progress Bars Example</title> <!-- link the bootstrap online or through CDN --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script></head><body> <div class="container-fluid"> <h2>Multiple Progress Bar Example</h2> <div class="progress"> <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width:50%;"> 50% </div> <br> <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width:20%;"> 70% </div> <br> <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width:10%;"> 80% </div> </div> </div></body></html> |
On the above code, we apply all the progress bar container into the single progress container to create a multiple or stacked progress bar.
Posted in 
Tags: 
