How To Create a bootstrap vertical divider?

Today, We want to share with you bootstrap vertical divider.In this post we will show you Bootstrap Verticals and Horizontal Divider, hear for verticals divider between two columns in bootstrap we will give you demo and example for implement.In this post, we will learn about Simple demo Divider with an example.

Bootstrap 3 Horizontal and Vertical Divider

Example 1:

<div class="row">
  <div class="span6">
  </div>
  <div class="span6">
  </div>
</div>

<div class="row">
  <div class="span6">
    <div class="kjadpb-left">
    </div>
  </div>
  <div class="span6">
    <div class="kjadpb-right">
    </div>
  </div>
</div>

CSS Code

.kjadpb-left {
  border-right: 1px dashed #333;
}

Bootstrap 3 Horizontal and Vertical Divider

Example 3:

.row.vertical-divider {
  overflow: hidden;
}
.row.vertical-divider > div[class^="col-"] {
  text-align: center;
  padding-bottom: 100px;
  margin-bottom: -100px;
  border-left: 3px solid #F2F7F9;
  border-right: 3px solid #F2F7F9;
}
.row.vertical-divider div[class^="col-"]:first-child {
  border-left: none;
}
.row.vertical-divider div[class^="col-"]:last-child {
  border-right: none;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row vertical-divider" style="margin-top: 30px">
  <div class="col-xs-6">Welcome To PakaInfo.com</div>
  <div class="col-xs-6">I Love You<br/>4cgandhi</div>
</div>

I hope you get an idea about verticals line after text 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.