Bootstrap 4 Progress Bars

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

<!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 Bars
Fig.1 – Bootstrap 4 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

<!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 Progress Bar Examples
Fig.2 – Bootstrap 4 Progress Bar Labels.

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

<!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 Colored Progress Bar
Fig.3 – Bootstrap 4 Colored Progress Bar.

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

<!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 Striped Progress Bar
Fig.4 – Bootstrap 4 Striped 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

<!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 Animated Striped Progress Bar
Fig.5 – Bootstrap 4 Animated 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

<!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.

Bootstrap 4 Multiple Progress Bar
Fig.6 – Bootstrap 4 Multiple Progress Bar.
You can leave a response, or trackback from your own site.
Leave a Reply to the article

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!          Protected by Copyscape

VeChain