HOME HTML CSS Javascript PHP Laravel

Progress bar :

Hello guys ! today we will learn about Progress bar in Bootstrap 4 !

Example :

PHP Example

Edit it yourself 



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Button-Groups Example</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
 
 <div class="progress">
  <div class="progress-bar" style="width:100%"></div>
  </div>
  <div class="progress">
  <div class="progress-bar" style="width:50%"></div>
  </div>
  <div class="progress">
    <div class="progress-bar" style="width:10%"></div>
  </div>

</body>
</html>

Height in progress-bar :

One can set height in progress-bar ...

100
50
10

Example :

PHP Example

Edit it yourself 



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Button-Groups Example</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
      <div class="progress" style="height:100px;">
      <div class="progress-bar" style="width:100%;">100</div>
      </div>
      <div class="progress" style="height:50px;">
      <div class="progress-bar" style="width:50%">50</div>
      </div>
      <div class="progress" style="height:10px;">
      <div class="progress-bar" style="width:10%;">10</div>
      </div>
</body>
</html>

Colors in progress-bar :

Example :

PHP Example

Edit it yourself 



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Button-Groups Example</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
        <div class="progress">
          <div class="progress-bar" style="width:10%"></div>
        </div>
        <div class="progress">
          <div class="progress-bar bg-success" style="width:20%"></div>
        </div>
        <div class="progress">
          <div class="progress-bar bg-info" style="width:30%"></div>
        </div>
        <div class="progress">
           <div class="progress-bar bg-warning" style="width:40%"></div>
        </div>
        <div class="progress">
          <div class="progress-bar bg-danger" style="width:50%"></div>
        </div>
        <div class="progress">
          <div class="progress-bar bg-secondary" style="width:70%"></div>
        </div>
        <div class="progress">
        <div class="progress-bar bg-dark" style="width:90%"></div>
</div>
</body>
</html>

Striped progress-bar :

Example :

PHP Example

Edit it yourself 



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Button-Groups Example</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
           <div class="progress">
           <div class="progress-bar progress-bar-striped" style="width:10%;"></div>
           </div>
           <div class="progress">
           <div class="progress-bar progress-bar-striped bg-danger" style="width:20%;">    </div>
           </div>
          <div class="progress">
           <div class="progress-bar progress-bar-striped bg-warning" style="width:40%;">    </div>
           </div>
          <div class="progress">
           <div class="progress-bar progress-bar-striped bg-success" style="width:50%;">    </div>
           </div>
</div>
</body>
</html>