Logo

Bootstrap 4 Progress Bar

Bootstrap Progress Bar

Bootstrap 4 offers progress bars that are used to represent the progress of tasks such as downloading a file, software installation, etc. on the computer. It represents the percentage of the work done and also the remaining work.

In bootstrap 4, the progress component is created by using  two HTML elements, CSS, some attributes instead of using default <progress> element of HTML 5.

Bootstrap 4 has several designs of progress bars, such as stacked bars, text labels, animated backgrounds, etc.

Syntax

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

Basic Progress Bar

A basic progress bar is a simple or default progress bar that has a gray background and represents the progress of a task using primary colors.

Steps of creating Progress Bar

  • Add the .progress class in the parent <div> element. This class is used as a wrapper for representing the max value of the progress bar.
  • Add the .progress-bar class to the child <div> element that represents the progress of the task.
  • Add the width property for setting the height of the progress bars.

Syntax

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Progress Bar Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 </head>
 <body> 
 <div class="container">
   <h2>Basic Progress Bar</h2>
   <div class="progress">
     <div class="progress-bar" style="width:40%"></div>
   </div>
 </div> 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap 4 Progress Bar

Progress Bar Height

Bootstrap supports the predefined properties of CSS that helps in setting the width of the progress bar accordingly. The default height of the progress bar is 16px. The CSS height property is used with the .progress  class to set the height of the progress bar.

Note: The height of the progress bar and progress bar container should always be the same.

Syntax

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Progress Bar Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 </head>
 <body> 
 <div class="container">
   <h2>Progress Bar Height</h2>
   <div class="progress" style="height:15px">
     <div class="progress-bar" style="width:40%;height:15px"></div>
   </div>
   <br>
   <div class="progress" style="height:30px">
     <div class="progress-bar" style="width:60%;height:30px"></div>
   </div>
   <br>
   <div class="progress" style="height:40px">
     <div class="progress-bar" style="width:70%;height:40px"></div> 
   </div>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap 4 Progress Bar

Progress Bar Labels

The progress bar label is used to add text in the progress bar, especially for representing the progress percentage of the task that has been completed.

To add the labels in the progress bar, you have to add your text just before the closing </div> tag.

Syntax

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Progress Bar Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 </head>
 <body>
 <div class="container">
   <h2>Progress Bar With Label</h2>
   <div class="progress">
     <div class="progress-bar" style="width:60%">60%</div>
   </div>
 </div> 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap 4 Progress Bar

Colored Progress Bars

Just like the other components of the progress bar, you can also set the color of the progress bar according to your need. The default color of the progress bar is blue (primary). The bootstrap 4 contextual classes are used to set the color of the progress bar.

Syntax

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Progress Bar Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 </head> 
 <body>
 <div class="container">
   <h2>Colored Progress Bars</h2>
   <br>
   <!-- Blue -->
   <div class="progress"> 
     <div class="progress-bar" style="width:10%"></div>
   </div><br>
   <!-- Green -->
   <div class="progress">
     <div class="progress-bar bg-success" style="width:20%"></div>
   </div><br> 
   <!-- Turquoise -->
   <div class="progress">
     <div class="progress-bar bg-info" style="width:30%"></div>
   </div><br>
   <!-- Orange -->
   <div class="progress"> 
      <div class="progress-bar bg-warning" style="width:40%"></div>
   </div><br>
   <!-- Red -->
   <div class="progress">
     <div class="progress-bar bg-danger" style="width:50%"></div>
   </div><br> 
   <!-- White -->
   <div class="progress border">
     <div class="progress-bar bg-white" style="width:60%"></div>
   </div><br>
   <!-- Grey -->
   <div class="progress">
     <div class="progress-bar bg-secondary" style="width:70%"></div>
   </div><br>
   <!-- Light Grey --> 
   <div class="progress border">
     <div class="progress-bar bg-light" style="width:80%"></div>
   </div><br>
   <!-- Dark Grey -->
   <div class="progress">
     <div class="progress-bar bg-dark" style="width:90%"></div>
   </div>
 </div> 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap 4 Progress Bar

Striped Progress Bar

 The progress bar that has stripes with CSS color gradient over the background color of the progress bar is known as a striped progress bar.

Add the .progress-bar-striped class along with the .progress-bar class and contextual color class for creating a striped progress bar.

Syntax

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Progress Bar Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> 
 </head>
 <body>
 <div class="container">
   <h2>Striped Progress Bars</h2>
   <div class="progress">
     <div class="progress-bar progress-bar-striped" style="width:30%"></div>
   </div>
   <br>
   <div class="progress">
     <div class="progress-bar bg-success progress-bar-striped" style="width:40%"></div>
   </div>
   <br> 
   <div class="progress">
     <div class="progress-bar bg-info progress-bar-striped" style="width:50%"></div>
   </div>
   <br>
   <div class="progress">
     <div class="progress-bar bg-warning progress-bar-striped" style="width:60%"></div>
   </div> 
   <br>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> 
 </body>
 </html>

Output

Bootstrap 4 Progress Bar

Animated Progress Bar

We can also animate the progress bar from right to left by using CSS 3 animation.  For creating animated progress bar you have to add the .progress-bar-animated class along with the .progress-bar class and .progress-bar-striped class.

Note: We can only animate the striped progress bars and not the default progress bars.

Syntax

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Progress Bar Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 </head> 
 <body>
 <div class="container">
   <h2>Animated Progress Bar</h2><br>
   <div class="progress">
     <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
   </div> 
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap 4 Progress Bar

Multiple Progress Bar

Bootstrap also offers the class that helps in creating multiple progress bars in the single line. You can create more than one progress bar of different colors in a single progress bar. The multiple progress bar is created when you want to display the progress of more than one task into a single progress bar. 

Syntax

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Progress Bar Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 </head> 
 <div class="container">
   <h2>Multiple Progress Bars</h2> <br>
   <div class="progress">
     <div class="progress-bar bg-success" style="width:40%">
       40% 
     </div>
     <div class="progress-bar bg-warning" style="width:10%">
       10%
     </div>
     <div class="progress-bar bg-danger" style="width:20%"> 
       20%
     </div>
   </div>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap 4 Progress Bar

Related Topics

Bootstrap 4 navbar

A navigation navbar or navbar uses in every website to make it more user-friendly. Navigating through the website is easier, and the user can instantly search for the topic of...

8 minutes read.

Bootstrap Buttons Groups

Bootstrap 4 Button Group Bootstrap 4 provides a feature button group that helps in creating a series of buttons together in a group. Basic Button Group  The .btn-group class is used within the <div> tag to create a...

6 minutes read.

Bootstrap 4 Spinners

Bootstrap 4 offers spinner is a loading indicator that is used to display the loading state of any component or web page. The spinner is also known as a loader...

7 minutes read.

Bootstrap Tables

We can create different types of responsive and awesome bootstrap table like: striped , border etc. Bootstrap Basic Table We can create a basic bootstrap table by using its class .table. It has...

3 minutes read.

Bootstrap 4 Card

In Bootstrap 4, a card is a bordered box with padding around its content. It has options for headers, footers, colors, content, etc. The card provides the link, title, image,...

8 minutes read.

Bootstrap Validation Example

Validation We can provide valuable and actionable feedback to the users through an HTML form validation. It happens via custom styles or behaviors of default browsers and JavaScript. How does validation work...

4 minutes read.

Environment Setup

How to use Bootstrap? We can use bootstrap in our project either by downloading or by providing link of the library files. 1) Download Bootstrap files To download files, visit official site of bootstrap www.getbootstrap.com/download/ and...

1 minute read.

Text Shadows in CSS

Text shadows are created with the text-shadow CSS property. It takes a list of shadows separated by commas to be applied to the text and any of its styles. Each...

5 minutes read.

Bootstrap 4 Colors

Bootstrap 4 Colors Bootstrap 4 consists of classes that are used to set colors according to the context of the element, and with the help of these classes, we can read...

2 minutes read.

Bootstrap Pager

← Prev Next → ...

1 minute read.

Bootstrap 4 Modal

Bootstrap 4 Modal The Modal is a component of Bootstrap 4, which is a dialog box or pop-up window. The modals are used to provide information or warning to the user, such as...

18 minutes read.

Bootstrap Notification Bubble

What is a notification bubble? Bubbles are built into the Notification system. They float on top of the website or the button to indicate pending notifications. Bubbles can be expanded to reveal...

5 minutes read.

Bootstrap 4 Alerts

Bootstrap 4 Alerts Bootstrap 4 offers alerts that are used to provide feedback messages on the user’s actions. There is no boundation of text length in the alerts. Alerts can be created...

1 minute read.

Dropdown & Dropup

Bootstrap Dropdowns The bootstrap dropdown menu is used to create a toggleable menu. It provides users to choose one value from a predefined list. Before creating dropdown menu, we have to know...

3 minutes read.

Bootstrap Searchable Dropdown Menu

Searchable Dropdown Menu When we click on the dropdown button/arrow in this dropdown menu, an input field will pop up with all the dropdown items listing inside. If we type in...

5 minutes read.

Bootstrap 4 Progress Bar

Bootstrap Progress Bar Bootstrap 4 offers progress bars that are used to represent the progress of tasks such as downloading a file, software installation, etc. on the computer. It represents the percentage of the...

9 minutes read.

Bootstrap Wells

In Bootstrap, well are used to add a rounded border around an element. It is default some padding and gray background color. It is like a container that displays the content....

1 minute read.

Bootstrap 4 List Groups

Bootstrap 4 List Groups Bootstrap 4 offers List Group component, which is used to display a series of content in an organized way. The most common list group is an unordered...

13 minutes read.

Bootstrap Images

Bootstrap 4 Images Bootstrap provides several classes for images to make them responsive and also helps to give some style to the images. Image Shapes Rounded Corners Bootstrap 4 offers .rounded class that makes the corners...

5 minutes read.

Bootstrap 4 Pagination

Bootstrap 4 Pagination Bootstrap pagination is used to show the existence of a series of web pages of the website. It allows navigation on multiple pages of a website. In pagination, there is a block...

9 minutes read.