Topic: Stacked progressbar?

Henrik Engdahl free asked 5 years ago


In the original bootstrap documentation there is a way to stack progress bars. But it doesnt seem to work in MDB. Is there a way to make a stacked progressbar in MDB? I think this should work and the soultion to this is probably pretty easy but I dont get it to work.

 <div class="progress"> 
 <div class="progress-bar bg-danger" role="progressbar" style="width: 30%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"><span class="textInBar" >70/100 (50%)</span></div>
 <div class="progress-bar bg-warning" role="progressbar" style="width: 50%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"><span class="textInBar" >60/100 (50%)</span></div> 
 <div class="progress-bar bg-success" role="progressbar" style="width: 90%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"><span class="textInBar" >50/100 (50%)</span></div> 
</div>

Bartłomiej Malanowski staff commented 5 years ago

what do you mean by stacked progress bar?

Henrik Engdahl free commented 5 years ago

Like one of these: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_progressbar6&stacked=h It doesnt seem to be in the MDB library. Is there a way to make one with Mdb?

boz pro answered 5 years ago


Hi, It works if you add the d-flex class to the outer progress div so your example would be
<div class="progress d-flex"> 
 <div class="progress-bar bg-danger" role="progressbar" style="width: 30%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"><span class="textInBar" >70/100 (50%)</span></div>
 <div class="progress-bar bg-warning" role="progressbar" style="width: 50%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"><span class="textInBar" >60/100 (50%)</span></div> 
 <div class="progress-bar bg-success" role="progressbar" style="width: 90%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"><span class="textInBar" >50/100 (50%)</span></div> 
</div>


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags