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 Margin classes

Bootstrap 4 contains a variety of brief, responsive margin and padding utility classes to change the appearance of an element. The Bootstrap 4 margin classes use for the outer spacing of...

8 minutes read.

Bootstrap Tabs and Pills

Bootstrap Menus Bootstrap menu is used to create different types of menu. It can created horizontal with its .list-inlineclass. <div class="container">       <h3>Example of Bootstrap Menu</h3>       <ul class="list-inline">         <li><a href="#">Home</a></li>         <li><a href="#">About</a></li>         <li><a href="#">Contact</a></li>         <li><a href="#">services</a></li>       </ul>     </div> Try Now Bootstrap Tabs Bootstrap tabl is look like is menu but there is some difference....

4 minutes read.

Bootstrap 4 Buttons

Bootstrap Buttons Bootstrap provides many custom button styles. These buttons are used in forms and dialog boxes for actions. Bootstrap offers various predefined classes for providing styles to buttons. There are many classes that are used...

7 minutes read.

Bootstrap Grid System Example

Bootstrap Grid System Example Stacked to horizontal – In stacked to the horizontal grid system, the grid columns are stacked on top of each other on extra small devices and becomes...

7 minutes read.

Bootstrap Datepicker

What is a Bootstrap Datepicker? It is used to display a calendar with the date, month, and time from a dropdown menu. We will use an example to see how the date...

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.

Bootstrap Toast Example

What are toasts? Toasts are similar to notifications, and they are lightweight and act as push notifications from mobile and desktop operating systems. They’re built using flexbox in Bootstrap. They can...

4 minutes read.

Bootstrap First Example

1) Add HTML5 doctype Before starting the example of Bootstrap, we should know about the some basic rules of Bootstrap. We have to add HTML5 doctype with lang element and CSS properties. <!DOCTYPE html>   <html lang="en">     <head>       <meta charset="utf-8">      </head>   </html> 2) Bootstrap...

2 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.

Bootstrap 4 Inputs

Bootstrap Inputs Bootstrap Form Inputs – Several pre-defined input types are available in HTML and Bootstrap. These input types help in styling the forms. When an input type is specified in the form, it means...

10 minutes read.

Bootstrap Panels

A bootstrap panel is used to create bordered box with some padding around its content. It is created with the .panels classes, and .panel-body classes. There are following classes of the panel: Panel header Panel...

4 minutes read.

Bootstrap 4 Filters

 Bootstrap 4 Filters Bootstrap 4 provides a filter component that is used to search an element from a list, table, etc. Bootstrap does not contain any component or utility that helps...

5 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 Glyphicons

Bootstrap Glyphicon is used to create different type of glyphicons It is used in the web project. It provides 260 Glyphicons from the Glyphivons Halflings set. There are various examples of...

1 minute read.

Bootstrap 4 Icons

Bootstrap 4 Icons Bootstrap 3 contains the default icon library. But in bootstrap 4, you have to include the external icon library by yourself. Many free icon libraries are available such...

2 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 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 Scrollspy

Bootstrap 4 Scrollspy Bootstrap 4 offers a scrollspy component that is used to make the website more attractive and eye-catching. Basically, the scrollspy is used on the single-page website. The scrollspy highlights the nav...

5 minutes read.

CakePHP Layouts & Elements

A layout includes a presentation code that can be wrapped out in your view. It means that what you want to see in your view should be well-positioned in layout. When you create...

9 minutes 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.