in Bootstrap by
What will be the output of the below code and why?

<div class="progress">

<div class="progress-bar progress-bar-success" style="width: 65%">

<span class="sr-only">75% successfully completed</span>

</div>

<div class="progress-bar progress-bar-warning" style="width: 20%">

<span class="sr-only">30% 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>

1 Answer

0 votes
by

If we place multiple bars with the same .progress parent element, Bootstrap will pile them into one single progress bar. As we know, in bootstrap the sum of the progress bar is 100 %. So, the progress bar will give the result as full width and fully populated.

Related questions

0 votes
asked Mar 22, 2021 in JavaScript by Robindeniel
0 votes
asked Mar 24, 2021 in JavaScript by sharadyadav1986
0 votes
asked Mar 23, 2021 in JavaScript by sharadyadav1986
...