YouTip with the class **.progress**.
* Then, inside the above
, add an empty
with the class **.progress-bar**.
* Add a style attribute with a width represented as a percentage, for example, style="width: 60%"; this indicates the progress bar is at the 60% position.
Let's look at the example below. The .sr-only class can hide the text content:
## Example
[Try it »](#)
The result is as follows:
You can also set text content within the progress bar:
## Example
[Try it »](#)
The result is as follows:
## Alternate Progress Bars
The steps to create progress bars with different styles are as follows:
* Add a
with the class **.progress**.
* Then, inside the above
, add an empty
with the class **.progress-bar** and the class **progress-bar-***. Here, * can be **success, info, warning, danger**.
* Add a style attribute with a width represented as a percentage, for example, style="60%"; this indicates the progress bar is at the 60% position.
Let's look at the example below:
## Example
[Try it »](#)
The result is as follows:
Displaying progress bar text content:
## Example
[Try it »](#)
The result is as follows:
## Striped Progress Bars
The steps to create a striped progress bar are as follows:
* Add a
with the class **.progress** and **.progress-striped**.
* Then, inside the above
, add an empty
with the class **.progress-bar** and the class **progress-bar-***. Here, * can be **success, info, warning, danger**.
* Add a style attribute with a width represented as a percentage, for example, style="60%"; this indicates the progress bar is at the 60% position.
Let's look at the example below:
## Example
[Try it »](#)
The result is as follows:
## Animated Progress Bars
The steps to create an animated progress bar are as follows:
* Add a
with the class **.progress** and **.progress-striped**. Also add the class **.active**.
* Then, inside the above
, add an empty
with the class **.progress-bar**.
* Add a style attribute with a width represented as a percentage, for example, style="60%"; this indicates the progress bar is at the 60% position.
This will give the stripes a sense of movement from right to left.
Let's look at the example below:
## Example
[Try it »](#)
The result is as follows:
## Stacked Progress Bars
You can even stack multiple progress bars. To stack multiple progress bars, place them within the same **.progress**, as shown in the example below:
## Example
[Try it »](#)
The result is as follows:
* * *
## Progress Bar Size
We can set the size of the progress bar using the height property:
## Example
[Try it »](#)
The result is as follows:
