Today, We want to share with you bootstrap vertical divider.In this post we will show you How To Create a Vertical Line?, hear for bootstrap vertical line between columns we will give you demo and example for implement.In this post, we will learn about bootstrap filter dropdown with an example.
Bootstrap 3 Horizontal and Vertical Divider
Bootstrap Horizontal Divider : Between Rows
Bootstrap Vertical and Horizontal Divider : Example
<style type="text/css"> .h-divider{ margin-top:5px; margin-bottom:5px; height:1px; width:100%; border-top:1px solid gray; } </style> <div class="row"> <div class="col-xs-3">Data I Love You 1</div> <div class="col-xs-2">Data I Love You 2</div> <div class="col-xs-2">Data I Love You 2</div> <div class="col-xs-3">Data I Love You 3</div> <div class="col-xs-3">Data I Love You 4</div> </div> <div class="h-divider"> </div> <div class="row"> <div class="col-xs-3">Data I Love You 1</div> <div class="col-xs-3">Data I Love You 2</div> <div class="col-xs-3">Data I Love You 3</div> <div class="col-xs-3">Data I Love You 4</div> </div>
Bootstrap Vertical Divider : Between Columns
index.html
<style type="text/css"> .v-divider{ margin-left:5px; margin-right:5px; width:1px; height:100%; border-left:1px solid gray; } </style> <div class="row"> <div class="col-xs-3">Data I Love You 1</div> <div class="col-xs-2">Data I Love You 2</div> <div class="col-xs-2 v-divider">Data I Love You 2</div> <div class="col-xs-3">Data I Love You 3</div> <div class="col-xs-3">Data I Love You 4</div> </div>
I hope you get an idea about vertical divider css.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donโt forget to share.