CodesJava

Easy learning with example program codes

Bootstrap 4 Stacked 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.

To create a stacked progress bar place multiple bars into the same div class=”progress”.

Bootstrap 4 Stacked Progress Bars Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Stacked 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/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Bootstrap Stacked Progress Bars Example</h2>
    <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
      Free Space
    </div>
    <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
      Warning
    </div>
    <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
      Danger
    </div>
  </div>
</div>
 
</body>
</html>

Try it:

Bootstrap Stacked 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