Progress
Basic Progress
Create a progress bar with Bootstrap using .progress
and .progress-bar
classes. Set the width of the progress bar with inline styles or utility classes to show progress.
Colored Progress
Use colored progress bars in Bootstrap by applying classes like .bg-success
or .bg-danger
to the .progress-bar
for different colors.
Progress With Labels
Display labels on Bootstrap progress bars by adding text inside the <div class="progress-bar">
. Use classes like .text-white
for text color.
Progress size
Easily adjust the size of progress bars using custom classes. The .progress-xs
class represents an extra small progress bar, perfect for compact layouts.
Striped Progress
Create striped progress bars in Bootstrap by adding the .progress-bar-striped
class to your <div class="progress-bar">
. This adds a striped pattern to the progress bar for a dynamic look.
Animated Striped Progress
Add animation to striped progress bars in Bootstrap by using .progress-bar-animated
with .progress-bar-striped
. This makes the stripes move, creating a dynamic effect.
Default Circle Progress Bar
Use the custom circle progress bar by adding a .circular-progress
class. Inside, use an <svg>
element with <circle>
elements for the background and foreground to visually display progress.
Circle Size Progress
Use size classes like .circular-*
to adjust the circle progress bar size in Bootstrap. Apply it to .circular-progress
for a larger display.
Circle Color Progress
Change the color of your circle progress bar using the .circular-progress-*
class. Apply this class to .circular-progress
for a color scheme.