Bootstrap 4 Tutorial

BS4 Introduction

How to use Bootstrap

BS4 Layout

BS4 Grid System

BS4 Typography

BS4 Colors

BS4 Table

BS4 Images

BS4 Jumbotron

BS4 Alerts

BS4 Buttons

BS4 Button Group

BS4 Badges

BS4 Progress Bar

BS4 Pagination

BS4 Breadcrumb

BS4 Card

BS4 Collapse

BS4 Nav Tabs Pills

BS4 Navbar

BS4 Tooltip

BS4 Carousel

BS4 Scrollspy

BS4 Forms

BS4 Form Validation

BS4 Form Custom

Page Stats

Visitor: 427

Bootstrap 4 Progress Bar

Bootstrap 4 progress bar is use to show a user progress, loading. Bootstrap uses CSS3 transitions and animations to perform progress bar effect.

Default Progress Bar

To create a basic progress bar, apply progress class in a div, than create another div with a class .progress-bar, than add a style attribute with the width expressed in a percentage indicates that the progress bar completion task.

<div class="progress">
  <div class="progress-bar" style="width:70%">
    70% Complete
  </div>
</div>
70% Complete

Progress Bar Height: By Default, the height of the progress bar is 16px. Use the CSS height property to change it. Set the height for the progress container.

75% Complete with 35px Height
<div class="progress" style="height:35px;">
  <div class="progress-bar w-75"></div>
</div>

Progress Bars contextual classes

Progress Bars contextual classes that can be used with progress bars are:

.progress-bar (default : blue)
.progress-bar bg-success
.progress-bar bg-info
.progress-bar bg-warning
.progress-bar bg-danger 
.progress-bar bg-white
.progress-bar bg-secondary
.progress-bar bg-light
.progress-bar bg-dark
50% Complete
80% Complete
60% Complete
40% Complete
90% Complete
40% Complete
80% Complete
20% Complete
60% Complete

Striped Progress Bars

Use the .progress-bar-striped class to add stripes to the progress bars.

80% Complete
60% Complete
40% Complete
90% Complete
50% Complete

Animated Progress Bar

Add the .progress-bar-animated class to animate the progress bar.

80% Complete
50% Complete

Multiple Progress Bars

Progress bars can also be stacked

HTML 30%
CSS 50%
JavaScript 20%
<div class="progress">
  <div class="progress-bar bg-success" style="width:30%">
    HTML 30%
  </div>
  <div class="progress-bar bg-warning" style="width:50%">
    CSS 50%
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    JavaScript 20%
  </div>
</div>
Updated: 14-Apr-20