Bootstrap Question: Download Bootstrap PDF
Now please consider the HTML code snippet below. What will the output be, and why?
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 65%">
<span class="sr-only">65% sucesfuly completed</span>
</div>
<div class="progress-bar progress-bar-warning" style="width: 20%">
<span class="sr-only">20% completed with warnings</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 15%">
<span class="sr-only">15% did not complete</span>
</div>
</div>
Answer:
By placing multiple bars under the same .progress parent element, Bootstrap will stack them into one single progress bar. Since the sum of the progress bar is 100%, the progress bar will be full width and fully populated.
| Previous Question | Next Question |
| Do you know what is Bootstrap Container? | Do you know what dependencies does Bootstrap require for it to work properly? |