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

Contents

Also Read This 👉 Autocomplete Search Box / textbox in PHP MySQL

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.

Bootstrap 3 Horizontal and Vertical Divider

Bootstrap Vertical Divider : Between Columns

Related posts: