Bootstrap Progress Bar

Use class “progress” to create progress bars in bootstrap.

Syntax:

……….

<style>

.bs-example{

        margin: 20px;       

    }

    /* Adding space at the bottom of progress bar */

    .progress{

        margin-bottom: 1rem;

    }

</style>

</head>

<body>

<div class="bs-example">

    <div class="progress">

        <div class="progress-bar" style="width: 55%"></div>

    </div>

</div>

</body>

 

Progress Bar with Label

Syntax:

<div class="progress">

<div class="progress-bar" style="width: 60%"> 60% </div>

</div>

 

Set width as per your visualization by using.

style="min-width

 

Setting Height

Add this at base class.

Syntax:

style="height: 1px

​

Stripped Progress Bar

Syntax:

<div class="progress"> <div class="progress-bar progress-bar-striped" style="width: 60%;"></div></div>

 

Animated Progress Bar

Syntax:

<div class="progress">

<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%">

</div>

</div>

 

Other methods to create progress bar

Go to the official website of Bootstrap and search how to create dynamic progress bar, stacked progress bar, and Progress bar with Emphasis class.

 

Dynamic progress Bar

Stacked progress Bar

Progress bar with Emphasis class