Welcome to The Coding College! In this guide, we’ll explore Bootstrap 4 Progress Bars, a simple and effective way to visually represent progress in tasks, uploads, or other ongoing activities. Progress bars are highly customizable, making them an excellent tool for improving the user experience on your website.
By the end of this tutorial, you’ll know how to create and style progress bars using Bootstrap 4.
What Are Bootstrap 4 Progress Bars?
A progress bar is a visual representation of a task’s completion level. In Bootstrap 4, progress bars are easy to create and style using the .progress and .progress-bar classes.
Basic Progress Bar
The most basic progress bar is created using a <div> with the .progress class and an inner <div> with the .progress-bar class. The width of the progress bar is controlled by the style attribute.
Example:
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div> Explanation:
.progress: Creates the container for the progress bar..progress-bar: Creates the inner bar that indicates progress.style="width: 50%;": Sets the progress bar width to 50%.- ARIA Attributes: Improves accessibility by describing the progress bar’s state.
Adding Labels to Progress Bars
You can add text inside the progress bar to display the progress percentage or other details.
Example:
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div> Contextual Progress Bars
Bootstrap 4 provides contextual classes to indicate different states, such as success, danger, warning, or info.
| Contextual Class | Color | Usage Example |
|---|---|---|
.bg-success | Green | Indicates success |
.bg-danger | Red | Indicates an error |
.bg-warning | Yellow | Represents a warning |
.bg-info | Blue | Represents information |
Example:
<div class="progress mb-3">
<div class="progress-bar bg-success" role="progressbar" style="width: 40%;">40%</div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-danger" role="progressbar" style="width: 60%;">60%</div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 80%;">80%</div>
</div> Striped Progress Bars
To create a striped effect, use the .progress-bar-striped class.
Example:
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 50%;">50%</div>
</div> Animated Stripes
You can animate the stripes by adding the .progress-bar-animated class.
Example:
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%;">75%</div>
</div> Multiple Progress Bars
To include multiple progress bars within a single container, add multiple .progress-bar elements inside the .progress container.
Example:
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 40%;">40%</div>
<div class="progress-bar bg-warning" role="progressbar" style="width: 30%;">30%</div>
<div class="progress-bar bg-danger" role="progressbar" style="width: 30%;">30%</div>
</div> Progress Bar Heights
You can customize the height of progress bars using inline styles or utility classes like .progress-sm or .progress-lg.
Example:
<div class="progress" style="height: 20px;">
<div class="progress-bar bg-info" role="progressbar" style="width: 70%;">70%</div>
</div>
<div class="progress mt-3" style="height: 10px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 50%;"></div>
</div> Dynamic Progress Bars with JavaScript
You can dynamically update the progress bar width using JavaScript, making it perfect for real-time progress tracking.
Example:
<div class="progress">
<div id="dynamic-bar" class="progress-bar bg-primary" role="progressbar" style="width: 0%;">0%</div>
</div>
<button class="btn btn-success mt-3" onclick="increaseProgress()">Increase Progress</button>
<script>
let progress = 0;
function increaseProgress() {
progress += 10;
if (progress > 100) progress = 100;
document.getElementById("dynamic-bar").style.width = progress + "%";
document.getElementById("dynamic-bar").innerText = progress + "%";
}
</script> Practical Example: Progress Bars in Action
Here’s a complete example that demonstrates the various types of progress bars in Bootstrap 4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Progress Bars</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container my-5">
<h1 class="text-center text-primary">Bootstrap 4 Progress Bars</h1>
<!-- Basic Progress Bar -->
<h3>Basic Progress Bar</h3>
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 50%;">50%</div>
</div>
<!-- Contextual Progress Bars -->
<h3>Contextual Progress Bars</h3>
<div class="progress mb-3">
<div class="progress-bar bg-success" role="progressbar" style="width: 40%;">40%</div>
</div>
<!-- Striped and Animated Progress Bars -->
<h3>Striped and Animated Progress Bars</h3>
<div class="progress mb-3">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 75%;">75%</div>
</div>
<!-- Dynamic Progress Bar -->
<h3>Dynamic Progress Bar</h3>
<div class="progress mb-3">
<div id="dynamic-bar-example" class="progress-bar bg-primary" role="progressbar" style="width: 0%;">0%</div>
</div>
<button class="btn btn-success" onclick="increaseProgressExample()">Increase Progress</button>
<script>
let progressValue = 0;
function increaseProgressExample() {
progressValue += 10;
if (progressValue > 100) progressValue = 100;
document.getElementById("dynamic-bar-example").style.width = progressValue + "%";
document.getElementById("dynamic-bar-example").innerText = progressValue + "%";
}
</script>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html> Learn More with The Coding College
Bootstrap 4 Progress Bars are a simple yet powerful way to enhance your website’s interactivity and user experience. At The Coding College, we’re committed to helping you master Bootstrap and other web technologies with easy-to-follow tutorials.