One of the types of visual displays of data is a progress bar. It is very useful when you are creating an engaging user experience in the website as progress bars tend to enforce users to spend more time to get it to 100%.
By the end of this lesson, you will know how to create and style Bootstrap progress bars. Use the examples too: you can modify and test them out in our code editor.
Contents
Bootstrap Progress Bar: Main Tips
- Make sure your progress bar is consistent with your website style.
- Like most other Bootstrap 4 classes, it can be combined with contextual classes. Use .bg-* contextual classes with the .progress-bar class to add color.
- For a more compelling progress bar, you can use Bootstrap to make it animated.
Creating and Styling Progress Bars
To create a static progress bar you need to create a <div> element with the class .progress and then create a <div> container with the .progress-bar class and the class attribute that sets the width property in percent to represent the progress you'd like to display. Take a look at the example below to grasp the idea better:
<div class="progress">
<div style="width: 50%;" class="progress-bar"></div>
</div>You can also create stacked progress bars, which can show the progress of different tasks. In this case, you would just have to add the same markup below the first one. You can style all progress bars at once, or assign different styles to each one.
Note: If you want your progress bar to be dynamic (fill up after loading or a task is complete), you will need to use JavaScript and jQuery. Here we explore only the styling options.
Now that you've finished creating your custom progress bars Bootstrap offers multiple ways to style them.
Height
The default height for a Bootstrap progress bar is 16px. In order to change it, you'd have to assign a different height to the progress bar Bootstrap element.
This is what doubling a progress bar (from 16px to 32px) would look like:
<div class="progress" style="height: 32px;">
<div style="width: 50%;" class="progress-bar"></div>
</div>Color
To change the colors on your progress bars, you can use Bootstrap contextual classes. In the example below, you can see .bg-info contextual class combined with the .progress-bar class:
<div class="progress">
<div style="width: 50%;" class="progress-bar bg-info"></div>
</div>Labels
Using Bootstrap labels (text between <div> tags) will make your progress bar easier to understand. You have to make sure to keep them short, though, as the bar itself doesn't provide a lot of space for text.
To add Bootstrap labels inside the progress bar, you need to simply add it to the content of the progress bar Bootstrap element (in the example below it is "50%"). The markup could look like this:
<div class="progress">
<div style="width: 50%;" class="progress-bar">50%</div>
</div>Striped
You can also make the Bootstrap progress bar striped by using progress-bar-striped class. It might come in handy if you plan, for example, to draw a certain number of zebras and want to track your progress. Just kidding - honestly, it's just another way to make the site look less boring. It's all a matter of taste, though!
Here's an example markup for a striped progress bar:
<div class="progress">
<div style="width: 50%;" class="progress-bar progress-bar-striped"></div>
</div>Animated
If striped progress bars are more up your alley, you can take it one step further and animate them. In this case, you should combine progress-bar-animated with progress-bar-striped like you can see in the example below:
<div class="progress">
<div style="width: 50%;" class="progress-bar progress-bar-animated progress-bar-striped"></div>
</div>This makes the progress bar more engaging and it becomes more of a focus point for tracking loading.
Using Multiple Progress Bars
Displaying multiple Bootstrap progress bars in a single progress container is a viable option as well. It might be useful if you wish to show the progress of different stages of tasks (i.e. to do, in progress, and done) that are assigned to the same project. Take a look at the example of the markup to get a better idea:
<div class="progress">
<div style="width: 20%;" class="progress-bar bg-primary"></div>
<div style="width: 30%;" class="progress-bar bg-success"></div>
<div style="width: 50%;" class="progress-bar bg-info"></div>
</div>Bootstrap Progress Bar: Summary
- You can create Bootstrap progress bars to convey the progress of anything you're writing on the page.
- Contextual classes can be used with progress bars. To add color, combine .bg-* contextual classes with the .progress-bar class.
- Bootstrap allows to have differently styled progress bars, so your users don't get bored.