Change color of Bootstrap Progress Bar in HTML,PHP

How to create progress bar with multiple different colors using bootstrap classes inside web page.

Bootstrap progress bar can be designed into multiple colors. So here is the complete step by step tutorial for Change color of Bootstrap Progress Bar in HTML,PHP.

How to Change color of Bootstrap Progress Bar in HTML,PHP.

https://www.android-examples.com/demo/heading-tag.html
Code for ProgressBar-with-multiple-colors.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Progress Bar With Multiple Colors</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h1>Progress Bar With Multiple Colors</h1>

<div class="progress">

 <div class="progress-bar progress-bar-danger" style="width: 25%;">
 
 25%
 
 </div>
 </div>
 
 <div class="progress">

 <div class="progress-bar progress-bar-info" style="width: 35%;">
 
 35%
 
 </div>
 </div>
 
 <div class="progress">

 <div class="progress-bar progress-bar-success" style="width: 45%;">
 
 45%
 
 </div>
 </div>
 
 <div class="progress">

 <div class="progress-bar progress-bar-warning" style="width: 55%;">
 
 55%
 
 </div>
 </div>

</div>
</body>
</html>

Screenshot:

Change color of Bootstrap Progress Bar in HTML,PHP

Leave a Reply

Your email address will not be published. Required fields are marked *