Progress Bars Bootstrap

In Bootstrap 4, progress bars are a great way to visually represent the progress of a task or process. They are built using the progress and progress-bar classes. Here's a basic rundown of how to use them, along with some examples:

Basic Structure

Container: The progress class is used on a div element to serve as the container for the progress bar.
Bar: The progress-bar class is used on a div element inside the container to represent the progress itself.

Basic Example

Here's a simple example of a progress bar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Progress Bar</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
  <h2>Basic Progress Bar</h2>
  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Key Components

progress: This class styles the container for the progress bar.
progress-bar: This class styles the inner element that represents the progress.
role="progressbar": This attribute specifies that the div is a progress bar.
style="width: 25%;": This inline style sets the width of the progress bar to 25%, indicating progress.
aria-valuenow="25": This attribute specifies the current progress value.
aria-valuemin="0" and aria-valuemax="100": These attributes define the minimum and maximum values for the progress bar.

Variants

Bootstrap provides different background colors for progress bars to indicate different states:

Default: Blue background by default.
Success: Green background.
Info: Light blue background.
Warning: Yellow background.
Danger: Red background.

Here’s an example of a success progress bar:

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

Animated Progress Bar

To create an animated progress bar, you can use the progress-bar-animated class:

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

This adds a striped pattern and animation to the progress bar.

Striped Progress Bar

You can also add stripes to the progress bar with the progress-bar-striped class:

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

These examples should help you get started with using progress bars in Bootstrap 4. Feel free to customize them to fit your needs!

Previous: Badges

Next: Margin

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us