Bootstrap 5 Progress Height

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.

Output:

👁 Image

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

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/components/progress/#height