[Solved] Bootstrap 4 Vertical Progress Bar | Create Vertical Progress Bar



Bootstrap always provides us with the horizontal progress bars but it does not provide vertical progress bars. In some cases we need vertical progress bars but also require bootstrap environment. So here is the trick to create vertical progress bar in Bootstrap 4.

Create Vertical Progress bar in Bootstrap 4

See the Pen GXMazd by Nicket Singh (@nicket-singh) on CodePen.


Step 1 : Add Bootstrap 4 Progress Bar

<div class="progress" >
<div class="progress-bar bg-danger" role="progressbar" style="" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
</div>
</div>

Step 2 : Add Style to Your Code

.progress{
position: absolute;left:50.5%;top:40%;width: 2.5%;height:50%;opacity: 0.8; filter: alpha(opacity=80);
}
.progress-bar{
position:absolute;top:20%; width: 100%;height: 80%;
}

How to Increase/Decrease Progress


In the default bootstrap 4 we increase/decrease progress by increasing/decreasing width of the '.progress-bar' as it was Horizontal Progress Bar.



But here we will use 'height' and 'top' to change progress of Bootstrap Vertical Progress Bar.

.progress-bar{
position:absolute;top:30%; width: 100%;height: 70%;
}

.progress-bar{
position:absolute;top:50%; width: 100%;height: 50%;
}


.progress-bar{
position:absolute;top:70%; width: 100%;height: 30%;
}


Here is the Complete Code :
See the Pen GXMazd by Nicket Singh (@nicket-singh) on CodePen.

Post a Comment

0 Comments