All You Need To Know About Earning First $100 from Google Adsense Visit Post

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

Posted By : Nicket Singh | Last Update : 11:59 AM | Category : |

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.

No comments:

Post a Comment

Although every comment is appreciated, Keep in mind that any link or keyword in the comments may be the reason for deletion of your comment. Thanks for understanding!

#Techno Geek Network

#Proudly Hosted on Blogger


DMCA.com Protection Status

©2014-2016 Techno Geek Network | Technology and Science is What You Make It! | Designed by Satyendra