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!

Written by Shaikh Abdul Shahid

A Full-Stack Developer with experience in PHP, Laravel, JavaScript, and React.
Founder of Online Learner, sharing practical knowledge and programming tutorials.
Building and maintaining real-world web applications since 2017.

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Badges

Next: Margin

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.