A progress bar can be used to track the amount of progress that has been made during a process.
Bootstrap provides many different types of progress bar styles.
In this example we can see what a basic progress bar looks like.
The html code below shows how it was created.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" style="width:80%">
We start with a
<div> element and add the class attribute set to progress.
We then create another nested
<div>, and attach the class progress-bar. The role needs to be set to progressbar as well.
The style=width:50% refers to how much progress the bar should show by default. It is currently set to 50% so the bar shows half progress. We can increase or decrease this value anywhere between 0 to 100%.
We can add labels to a progress bar by typing the desired text into the
We can also apply the contextual classes to a progress bar by adding the following code:
We have used the progress-bar-success classs, but you can use any of the others as well, such as info, warning, danger and default.
To add stripes to the progress bar insert the following class name:
We can animate a striped progress bar by adding the active class.