1.

Can we stack multiple progress bars in Bootstrap

Answer»

With Bootstrap, we can easily stack multiple progress bars. For that, include only a single .progress class and place all the Progress Bars inside it.

For example, firstly adding only a single Progress Bar in the .progress class:

&LT;DIV class = "progress">    <div class = "progress-bar progress-bar-info" role = "progressbar"       aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">       20%    </div> </div>

Now, add another Progress Bar in the same .progress class:

<div class = "progress">       <div class = "progress-bar progress-bar-SUCCESS" role = "progressbar"       aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">       20%    </div>    <div class = "progress-bar progress-bar-info" role = "progressbar"       aria-valuenow = "10" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">       10%    </div> </div>

LET us add more Progress Bars in the same .progress class:

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Striped Progress Bar</title>   <meta charset="utf-8">   <meta NAME="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container">   <h2>Level of monosodium glutamate</h2>   <div class = "progress">    <div class = "progress-bar progress-bar-success" role = "progressbar"       aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">       20% (Success)    </div>    <div class = "progress-bar progress-bar-info" role = "progressbar"       aria-valuenow = "10" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">       10% (High)    </div>    <div class = "progress-bar progress-bar-warning" role = "progressbar"       aria-valuenow = "35" aria-valuemin = "0" aria-valuemax = "100" style = "width: 35%;">       35% (Very High - Warning)    </div>    <div class = "progress-bar progress-bar-danger" role = "progressbar"       aria-valuenow = "35" aria-valuemin = "0" aria-valuemax = "100" style = "width: 35%;">       35% (Danger)    </div>   </div> </div> </body>

The output displays multiple Progress Bars in a single .progress class:


Discussion

No Comment Found

Related InterviewSolutions