Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

bootstrap
communitycreator

How to use the progress bar in Bootstrap

Akande Olalekan Toheeb

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.

RELATED TAGS

bootstrap
communitycreator

CONTRIBUTOR

Akande Olalekan Toheeb
RELATED COURSES

View all Courses

Keep Exploring