Create Progress Bar using Bootstrap classes in HTML,PHP

How to design make simple horizontal progress bar inside web page using bootstrap CSS classes.

Bootstrap gives us .progress class to make progress bar inside our web page. Using this class web developer can make simple progress bar. So here is the complete step by step tutorial for Create Progress Bar using Bootstrap classes in HTML,PHP.

How to Create Progress Bar using Bootstrap classes in HTML,PHP.

https://www.android-examples.com/demo/heading-tag.html

Code for progress-bar.html file.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Progress Bar</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</h1>

<div class="progress">

 <div class="progress-bar" style="width: 75%;">
 
 <span class="sr-only">75% Complete</span>
 
 </div>
 </div>

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

Screenshot:

Create Progress Bar using Bootstrap classes in HTML,PHP

Leave a Reply

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