Bootstrap 5 Progress Height

Last Updated : 09 Nov, 2022

Bootstrap 5 Progress Height is used to set the height of the progress bar. To set the height of the progress bar, we will set the height property value of .progress class.

Progress Height Used Class:

.progress: It is the wrapper that indicates the max value of the progress bar.
.progress-bar: It is used in the inner div to indicate the progress of the progress bar.

Note: To set the height of the progress bar, we will add the height property on .progress wrapper class.

Syntax:

<div class="progress" style="height: value">
      <div class="progress-bar" 
          role="progressbar" 
          ...
      ></div>
</div>

Example 1: In this example, we will use the height property to set the height of progress bar.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bootstrap 5 Progress Height</title> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <div class="container text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
          
        <h3>Bootstrap 5 Progress Height</h3> 
  
        <div class="progress" style="height: 5px;"> 
            <div class="progress-bar" role="progressbar" 
                style="width: 34%;" aria-valuenow="25" 
                aria-valuemin="0"
                aria-valuemax="100"> 
            </div> 
        </div> 
        <br><br> 
  
        <div class="progress" style="height: 25px;"> 
            <div class="progress-bar" role="progressbar" 
                style="width: 37%;" aria-valuenow="25" 
                aria-valuemin="0"
                aria-valuemax="100"> 
                37% 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will use the height property to set the height of the colored progress bar.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bootstrap 5 Progress Height</title> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
    <div class="container text-center"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
          
        <h3>Bootstrap 5 Progress Height</h3> 
  
        <div class="progress" style="height: 25px;"> 
            <div class="progress-bar bg-success" role="progressbar" 
                style="width: 34%;" aria-valuenow="25" 
                aria-valuemin="0"
                aria-valuemax="100"> 
                34% 
            </div> 
        </div> 
        <br><br> 
  
        <div class="progress" style="height: 35px;"> 
            <div class="progress-bar bg-danger" role="progressbar" 
                style="width: 97%;" aria-valuenow="25" 
                aria-valuemin="0"
                aria-valuemax="100"> 
                97% 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>