Bootstrap 4 Progress Bars

Bootstrap 4 progress bars specify the progress of the current action or task.

Basic steps to create Bootstrap 4 Progress Bars.

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

Example

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.

Example

General Syntax

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

Try It Now

Source Code

	
		<div class="container mt-5">
  <div class="progress">
    <div class="progress-bar" style="width: 70%;">60%</div>
  </div>
</div>

Try it yourself

Source Code : Output

60%

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.

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

		<div class="progress">
  <div class="progress-bar" style="width: 60%;">60%</div>
</div>

Try It Now

Source Code

	
		<div class="container mt-5 text-center">
  <div class="progress">
    <div class="progress-bar" style="width: 60%;">60%</div>
  </div>
</div>

Try it yourself

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 CSS height property to the element containing .progress class.

Example

General Syntax

		<div class="progress" style="height: 30px;">
  <div class="progress-bar" style="width: 50%;"></div>
</div>

Try It Now

Source Code

	
		<div class="container mt-5 text-center">
  <div class="progress" style="height: 30px;">
    <div class="progress-bar" style="width: 50%;"></div>
  </div>
</div>

Try it yourself

Source Code : Output

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

Striped Progress Bar

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

Example

General Syntax

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

Try It Now

Source Code

	
		<div class="container mt-5 text-center">
  <div class="progress">
    <div class="progress-bar progress-bar-striped" style="width: 70%;"></div>
  </div>
</div>

Try it yourself

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

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

Try It Now

Source Code

	
		<div class="container mt-5 text-center">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:70%">70%</div>
</div>

Try it yourself

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 progress bar element having .progress-bar class inside parent container having .progress class.

Example

General Syntax

		<div class="progress">
  <div class="progress-bar bg-success" style="width: 40%;">Free Space</div>
  <div class="progress-bar bg-danger" style="width: 20%;">Danger</div>
  <div class="progress-bar bg-warning" style="width: 10%;">Warning</div>
</div>

Try It Now

Source Code

	
		<div class="container mt-5 text-center">
  <div class="progress">
    <div class="progress-bar bg-success" style="width: 40%;">Free Space</div>
    <div class="progress-bar bg-danger" style="width: 20%;">Danger</div>
    <div class="progress-bar bg-warning" style="width: 10%;">Warning</div>
  </div>
</div>

Try it yourself

Source Code : Output

Free Space

Danger

Warning

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

Colored Progress Bars

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

General Syntax

		<div class="progress">
  <div class="progress-bar bg-success" style="width: 20%;"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" style="width: 30%;"></div>
</div>

Try It Now

Source Code

	
		<div class="container mt-5">
  <div class="progress">
    <div class="progress-bar bg-success" style="width: 20%;"></div>
  </div>
  <div class="progress">
    <div class="progress-bar bg-info" style="width: 30%;"></div>
  </div>
</div>

Try it yourself

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

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS