PHP Bootstrap

PHP

Bootstrap

Coding

Hosting

PHP Bootstrap

Web Design, Hosting & Domain Services!


SERVING CLIENTS FOR 17 YEARS

Get Hosting + A Free Domain For Your 1st Year

Launch your website with cPanel hosting, free SSL certificates, professional email, daily backups, and a free domain with annual hosting.

View Hosting Plans →
Find Your Perfect Domain Name:
Enter your name or keywords to check availability.

Progress Bars

A progress bar can be used to show a visitor where they are in a certain phase or process.

Basic Progress Bar



<div class="progress" style="height: 25px;">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Progress Bar With Label

75%


<div class="progress" style="height: 25px;">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>

Contexual Progress Bars

25%

50%

75%

100%


<div class="progress" style="height: 25px;">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

<div class="progress" style="height: 25px;">
  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>

<div class="progress" style="height: 25px;">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>

<div class="progress" style="height: 25px;">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
</div>

Striped Progress Bars




<div class="progress" style="height: 25px;">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 23%" aria-valuenow="23" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress" style="height: 25px;">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 49%" aria-valuenow="49" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress" style="height: 25px;">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 87%" aria-valuenow="87" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Animated Progress Bars

75%

60%


<div class="progress" style="height: 25px;">
  <div class="progress-bar progress-bar-striped bg-primary progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" 
		aria-valuemax="100" style="width: 75%">75%</div>
</div>

<div class="progress" style="height: 25px;">
  <div class="progress-bar progress-bar-striped bg-warning progress-bar-animated" role="progressbar" aria-valuenow="60" aria-valuemin="0" 
		aria-valuemax="100" style="width: 60%">60%</div>
</div>

Stacked Progress Bar

10%
15%
20%
15% 

<div class="progress" style="height: 25px;">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width:10%">
10%
</div>

<div class="progress-bar bg-info" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width:15%">
15%
</div>

<div class="progress-bar progress-bar-striped bg-warning progress-bar-animated" role="progressbar" aria-valuenow="20" aria-valuemin="0" 
		aria-valuemax="100" style="width:20%">
20%
</div>
<div class="progress-bar progress-bar-striped bg-danger progress-bar-animated" role="progressbar" aria-valuenow="15" aria-valuemin="0" 
		aria-valuemax="100" style="width:15%">
15%
</div>
</div>