Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Progress Bars

A progress bar is used to display the progress of a process. It displays how much of the process is completed and how much is left.


Basic Progress Bar

A Progress bar is built with two HTML elements and some CSS to set the width:

Run code

Example explained:

We use the .progress as a wrapper to indicate the max value of the progress bar.

We use the inner .progress-bar to indicate the progress. The .progress-bar requires custom CSS to set their width.


Progress Bar Labels

0
25%
50%
100%

Add labels to your progress bars by placing text within the .progress-bar class:

Run code

Progress Bar Height

25%
50%
75%
100%

The height of the progress bar is 16px by default. Set a height value on the .progress to change it.

Note that if we change height value of the .progress, the inner .progress-bar will automatically resize accordingly.

Run code

Progress Bar Backgrounds

Use background utility classes to change the appearance of individual progress bars:

Run code

Multiple Bars

We can even stack multiple progress bars.

Free Space
Success
Warning
Danger

Place the multiple progress bars into the same .progress to stack them:

Run code

Striped Progress Bars

Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background:

Run code

Animated Stripes

The striped gradient can also be animated.

Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations:

Run code

Changing Progress Bar Value Dynamically

The following example shows how to update the progress of a Bootstrap 4 progress bar dynamically using jQuery:

10

Run code