CodesJava

Easy learning with example program codes

Bootstrap 4 Colored Progress Bars Tutorial


A progress bar is a graphical control element used to visualize the progression of an extended computer operation. Bootstrap provides several types of progress bars. The .progress class is used with div element to create default progress bar.

Bootstrap provides the following contextual classes to provide “meaning through colors”. By default, the progress bar is blue.
• .bg-success
• .bg-info
• .bg-warning
• .bg-danger
• .bg-white
• .bg-secondary
• .bg-light
• .bg-dark

Bootstrap 4 Colored Progress Bars Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Colored Progress Bars 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">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2> Bootstrap Colored Progress Bars Example</h2>
  <!-- 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>
 
</body>
</html>

Try it:

Bootstrap Colored Progress Bars Example on jsbin.com

Please follow and like us:

Bootstrap 4 Tutorial



Copyright © 2019 CodesJava DMCA.com Protection Status SiteMap Reference: Java Wiki