Bootstrap Progress BarThe progress bar shows how far a user is in a process. In Bootstrap, there are several types of progress bars. The class .progress within a <div> element is used to create a default progress bar in bootstrap. Bootstrap Progress Bar ExampleTest it NowBootstrap 4 Basic Progress BarProgress bar is used to show a user how far long he/she is in a process. To create create a default progress bar, add a .progress class to a container element and and the progress-bar class to its child element. Use the CSS width property to set the width of the progress bar. ExampleTest it NowBootstrap Progress bar with LabelThe progress bar with label specifies the percentage of progress of a specific process. You have to remove the .sr-only class from the progress bar to show a visible percentage. See this example: Test it NowBootstrap Colored Progress barYou can use contextual classes to create colored progress bar. The contextual classes that are used to create colored progress bar:
Bootstrap Stripped Progress barYou can create stripped progress bar by using class .progress-bar-striped . Test it NowBootstrap Animated progress barYou have to use class .active to create animated progress bar. Test it NowBootstrap Stacked Progress bar (Multi-colored progress bar)You can create stacked progress bar by placing multiple bars into the same <div class="progress"> Test it NowNote: Two types of new colored progress bar are added in Bootstrap 4:
Example:Test it NowNext TopicBootstrap List Group |