How to use the progress bar in Bootstrap

One way to show how far a user has progressed in a process is by using the progress bar. Bootstrap makes it easy to create and customize a progress bar with its ready-made classes.

Implementation

The following are steps to create a basic progress bar:

• Create a container with the class .progress.

• Create a child element inside the container with class .progress.bar.

Explanation

• In line 8, we create a container with class .progress.

• In line 9, we create a child element (another container) with class .progress-bar and width 65%. This sets up our progress bar.

Customization

There are other ways to customize the progress bar. This includes setting its height, label, color, and other properties.

• Setting the height: This can simply be done using the CSS property. Note that we must set the same height for the progress container and the progress bar.

• Setting labels: A text added to the child element shows the visible percentage.

• Adding colors: Any of the Bootstrap 4 contextual background classes can be used to set up the progress bar colors.

• Striped progress bar: The .progress-bar-stripped class is used to add stripes to the progress bar.

• Animated progress bar: Use the .progress-bar-animated class to animate the progress bar.

Explanation

• In line 8, we create a container with class .progress.

• In line 9, we create a child element (another container) with the following classes and CSS attributes:

  • .progress-bar, which sets up the progress bar.

  • progress-bar-striped, which adds stripes to the progress bar.

  • progress-bar-animated, which animates the progress bar.

  • bg-dark, which adds the black color.

  • width: 65%, which sets the width of the progress bar.

  • height: 30px, which sets the height to 30px.