+91 90691 39140 | +1 253 214 3115 | info@hub4tech.com | hub4tech

Bootstrap Progress Bars Video


Basic Progress Bar

A progress bar can be used to show a user how far along he/she is in a process. Bootstrap provides several types of progress bars. A default progress bar in Bootstrap looks like this:
Colored Progress Bars

To create a default progress bar, add a .progress class to a < div > element:
Colored Progress Bars

Progress Bar with Label

A progress bar with a label looks like this:
Colored Progress Bars

Remove the .sr-only class from the progress bar to show a visible percentage: Colored Progress Bars

Colored Progress Bars

Contextual classes are used to provide "meaning through colors". The contextual classes that can be used with progress bars are: .progress-bar-success, .progress-bar-info, .progress-bar-warning, .progress-bar-danger
Colored Progress Bars

The following example shows how to create progress bars with the different contextual classes:
Progress Bar

Striped Progress Bars

Progress bars can also be striped:
Striped Progress Bars

Add class .progress-bar-striped to add stripes to the progress bars.

Animated Progress Bar

An "animated" progress bar in bootstrap is as follows:
Animated Progress Bar

Add class .active to animate the progress bar:
Animated Progress Bar



Is it Helpful?
Copyright ©2015 Hub4Tech.com, All Rights Reserved. Hub4Tech™ is registered trademark of Hub4tech Portal Services Pvt. Ltd.
All trademarks and logos appearing on this website are the property of their respective owners.
FOLLOW US