Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views :
InvestmentNovel

Latest Programming Tutorial Blog

Bootstrap 4 Progress Bars Tutorial With Example

/
/
/
28 Views

In Bootstrap 4 Progress Bars Tutorial With Example, you will learn how to create progress bars using Bootstrap 4. Progress bars are typically used to provide graphical feedback to a user on the progress of a given process or action.

Bootstrap 4 Progress Bars Tutorial With Example

Bootstrap provides a component for displaying progress bars on a website. The progress bar can be used for displaying the progress of something you are describing in the website content. Users can visualize immediately how much is complete and how much more there is to go.

#1: Bootstrap 4 Progress Bars

Progress bars can be used for show the progress of an action or task to the users. To create a default progress bar add a .progress class to a container element and add the progress-bar class to its child element. Use the CSS width property to set the width of the progress bar.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Progress Bars Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Progress Bar</h2>
  <div class="progress">
    <div class="progress-bar" style="width:60%"></div>
  </div>
</div>
</body>
</html>

The example of Bootstrap progress bars will look like below screenshot.

bootstrap 4 progress bars example

#2: Bootstrap 4 Progress Bars Height

The progress bar has the height of 16px by default. Use the CSS height property to change it.

Note that you must set same height for the progress container and the progress bar.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Progress Bars Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Progress Bar Height</h2>
  <div class="progress" style="height:15px">
    <div class="progress-bar" style="width:50%;height:15px"></div>
  </div>
  <br>
  <div class="progress" style="height:25px">
    <div class="progress-bar" style="width:50%;height:25px"></div>
  </div>
</div>
</body>
</html>

The example of Bootstrap progress bars height will look like below screenshot.

bootstrap 4 progress bars tutorial

#3: Bootstrap 4 Progress Bars Labels

Add text inside the progress bar to showing the progress status.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Progress Bars Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Progress Bar Labels</h2>
<div class="progress">
  <div class="progress-bar" style="width:50%">50%</div>
</div>
</div>
</body>
</html>

The example of Bootstrap progress bars labels will look like below screenshot.

bootstrap 4 progress bars label example

#4: Bootstrap 4 Progress Bars Color

By default, the progress bar is primary (blue). You can not use a light background color as the background of the progress bar is also in light color.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Progress Bars Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Progress Bars Color</h2>
  <div class="progress">
    <div class="progress-bar" style="width:10%"></div>
  </div><br>
  <div class="progress">
    <div class="progress-bar bg-success" style="width:15%"></div>
  </div><br>
  <div class="progress">
     <div class="progress-bar bg-warning" style="width:20%"></div>
  </div><br>
  <div class="progress">
    <div class="progress-bar bg-info" style="width:25%"></div>
  </div><br>
  <div class="progress">
    <div class="progress-bar bg-danger" style="width:30%"></div>
  </div><br>
  <div class="progress">
    <div class="progress-bar bg-secondary" style="width:40%"></div>
  </div><br>
  <div class="progress">
    <div class="progress-bar bg-dark" style="width:50%"></div>
  </div><br>
</div>
</body>
</html>

The example of Bootstrap progress bars color will look like below screenshot.

bootstrap 4 progress bars color example

#5: Bootstrap 4 Striped Progress Bars 

You can too make the progress bar striped. To create the stripped progress bar you can add .progress-bar-striped class to the .progress-bar element.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Progress Bars Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Striped Progress Bars</h2>
<div class="progress">
    <div class="progress-bar progress-bar-striped" style="width:20%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-success progress-bar-striped" style="width:30%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-info progress-bar-striped" style="width:40%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-warning progress-bar-striped" style="width:50%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-danger progress-bar-striped" style="width:60%"></div>
  </div>
</div>
</body>
</html>

The example of Bootstrap striped progress bars will look like below screenshot.

bootstrap 4 striped progress bars example

#6: Bootstrap 4 Animated Progress Bars

You can animate a striped progress bar. To create the animated progress bar you can add  .progress-bar-animated class to the .progress element.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Progress Bars Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Animated Progress Bars</h2>
<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:30%"></div>
  </div>
</div>
</body>
</html>

The example of Bootstrap animated progress bars will look like below screenshot.

bootstrap 4 animated progress bar example

#7: Bootstrap 4 Multiple Progress Bars

You can also add multiple progress bars within a single outer wrapper will create all bars in a single line. Progress bars can also be stacked.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Progress Bars Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Multiple Progress Bars</h2>
<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    40%
  </div>
  <div class="progress-bar bg-warning" style="width:20%">
    60%
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    80%
  </div>
</div>
</div>
</body>
</html>

The example of Bootstrap multiple progress bars will look like below screenshot.

bootstrap 4 multiple progress bar example

  • Facebook
  • Twitter
  • Google+
  • Linkedin
  • Pinterest

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

This div height required for enabling the sticky sidebar