Bootstrap 5 Progress Bar

Bootstrap 5 Progress Bar

Bootstrap 5 progress bar points progress of current action/task.

Example:

Steps: to create bootstrap 5 progress bar:

  • Assign .progress to the container.
  • Assign .progress-bar to the child element of the container.
  • To set the width of the progress bar, you have to use the CSS width property.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:Follow the above mention step to create the bootstrap progress bar component.

Progress Bar:Label

To create progress bar label,place text inside .progress-bar.

Example

60%

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:To create a progress bar label, assign text information inside the element having .progress-bar class.

Progress Bar:Height

The default height of the progress bar is 16px.It can also be changed by assigning CSS height property to the .progress element.

Example

height:25px

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Progress Bar Height

height:22px
height:25px

Code Explanation

Note: Progress bar height can be changed by providing CSS height property to the element having .progress.

Progress Bar : Background Color

Bootsrap progress bar background color can be set using background utility classes.

Example

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: Assign bg-* to the element having .progress-bar to create the different colored progress bar.

Multiple bars:Inline Progress Bar

It includes more than one progress bar inside a progress component.

Example

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:To create an Inline Progress Bar, assign all the progress bar elements inside the container having class .progress.

Stripped Progress Bar

Example

Bootstrap stripped progress bar can be created easily by adding .progress-bar-striped class to the .progress-bar.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: To create stripped progress bar assign .progress-bar-striped to the element having .progress-bar class.

Bootstrap 5 Animated Progress Bar

To create bootstrap 5 animated progress bar, add .progress-bar-striped to the .progress-bar element to create an animated progress bar.

Example

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:To create animated stripped progress bar assign .progress-bar-animated to the element having .progress-bar class.

Online Test / Quiz