⟩ 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>
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.