Bootstrap 4 Progress Bar

Bootstrap 4 Progress Bar

Bootstrap 4 progress bar can be created by following ways:

  • Place .progress class to parent container.
  • Place .progress-bar class to inner container i.e child element of parent container having class .progress.
  • To set the width of progress bar, you have to use the CSS width property .

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

70%

Note: To set the height of the progress bar, use inline style sheet inside .progress element and to set width of the progress bar use inline style sheet inside .progress-bar element.

Note: You can provide width and height of progress bar by using CSS. To set the height of the progress bar, use inline style sheet inside .progress element and to set width of the progress bar use inline style sheet inside .progress-bar element.

Creating Progress-bar Label

To create progress-bar label, you have to write progress bar message inside progress bar i.e element containing .progress-bar class.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

60%

Remember: Write progress bar lable information inside the <div> having .progress-bar.

Progress Bar Height

Please keep in mind that by default height of the progress bar is 16px. It could be changed by applying the CSS height property to the element containing .progress class.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Note: Progress bar height can be changes by assign CSS height property of the element having .progress class.

Bootstrap Striped Progress Bar

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

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Attention: To create striped progress bar add .progress-bar-striped to the child element having .progress-bar class.

Animated Progress Bar

Add .progress-bar-striped class to the element having .progress-bar.progress-bar-striped class.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

70%

Note: To create animated progress bar use,.progress-bar-animated to the element having .progress-bar class.

Multiple Progress Bars

To create multiple progress bar, put multiple proress bar element having .progress-bar class inside parent container having .progress class.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Success
Danger
Warning

Note: Multiple progress bar can be created by assigning multiple progress bar element inside the parent container having .progress class.

Bootstrap 4 Progress Bar Color

To create a bootstrap 4 colored progress bar, you have to use Bootstrap 4, contextual background classes.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Note: Add followings background contextual classes to provide different color.These background contextual classes are: .bg-success,.bg-info,.bg-warning,.bg-danger,.bg-white, .bg-secondary,.bg-light,.bg-dark