Open In App

Bootstrap 5 Progress Height

Last Updated : 09 Nov, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

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/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Output:

 

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


Next Article
Bootstrap 5 Scrollspy with nested nav

P
ppatelkap
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox