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