Topic: Stacked progressbar?
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>
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>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags
Bartłomiej Malanowski staff commented 7 years ago
what do you mean by stacked progress bar?Henrik Engdahl free commented 7 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?