YouTip` with the class **.progress**.
* Then, inside the above `
`, add an empty `
` with the class **.progress-bar**.
* Add a `style` attribute with a percentage width, for example, `style="width:70%"` indicates the progress bar is at **70%**.
## Example
[Try it »](#)
* * *
## Progress Bar Height
The default height of a progress bar is 16px. We can modify it using the CSS `height` property:
## Example
[Try it »](#)
* * *
## Progress Bar Labels
You can add text inside the progress bar, such as the percentage of progress:
## Example
[Try it »](#)
* * *
## Progress Bars with Different Colors
By default, progress bars are blue. Bootstrap4 also provides progress bars in the following colors:
!(#)
## Example
[Try it »](#)
* * *
## Striped Progress Bars
You can use the `.progress-bar-striped` class to create a striped progress bar:
## Example
[Try it »](#)
* * *
## Animated Progress Bars
Use the `.progress-bar-animated` class to add animation to the progress bar:
## Example
[Try it »](#)
* * *
## Multiple Colors Progress Bar
Progress bars can be set with multiple colors:
## Example
[Try it »](#)