CodesJava

Easy learning with example program codes

Bootstrap 4 Progress Bar With Label

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.

We have add text inside the progress bar to show the visible percentage.

Bootstrap 4 Progress Bar With Label Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Progress Bar With Label 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 Progress Bar With Label Example</h2>
  <div class="progress">
    <div class="progress-bar" style="width:70%">70%</div>
  </div>
</div>
 
</body>
</html>

Try it:

Bootstrap Progress Bar With Label Example on jsbin.com

Please follow and like us:
error








Copyright © 2019 CodesJava DMCA.com Protection Status