Advertisement
Advertisement


vertical divider between two columns in bootstrap


Question

I am using twitter bootstrap, and have a row which has two columns (span6). How do I create a vertical divider between both the spans.

Thanks, Murtaza

2016/03/14
1
86
3/14/2016 12:32:04 AM

Accepted Answer

If your code looks like this:

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

Then I'd assume you're using additional DIVS within the "span6" DIVS for holding/styling your content? So...

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

So you could simply add some CSS to the "mycontent-left" class to create your divider.

.mycontent-left {
  border-right: 1px dashed #333;
}
2013/01/29
94
1/29/2013 10:50:06 AM

.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">Hi there</div>
  <div class="col-xs-6">Hi world<br/>hi world</div>
</div>

2020/02/04

In Bootstrap 4 there is the utility class border-right which you can use.

So for example you can do:

<div class="row">
  <div class="col-6 border-right"></div>
  <div class="col-6"></div>
</div>
2019/08/23

Well here's another option which I've been using for some time now. It works great for me since I mostly need it do visually separate 2 cols. And it's also responsive. Which means that if I have columns next to each other in medium and large screen sizes, then I would use the class col-md-border, which would hide the separator on smaller screen sizes.

css:

@media (min-width: 992px) {
    .col-md-border:not(:last-child) {
        border-right: 1px solid #d7d7d7;
    }
    .col-md-border + .col-md-border {
        border-left: 1px solid #d7d7d7;
        margin-left: -1px;
    }
}

In scss you can generate all needed classes probably from this:

scss:

@media(min-width: $screen-md-min) {
    .col-md-border {
        &:not(:last-child) {
            border-right: 1px solid #d7d7d7;
        }

        & + .col-md-border {
            border-left: 1px solid #d7d7d7;
            margin-left: -1px;
        }
    }
}

HTML:

<div class="row">
    <div class="col-md-6 col-md-border"></div>
    <div class="col-md-6 col-md-border"></div>
</div>  

How it works:

The cols must be inside an element where there are no other cols otherwise the selectors might not work as expected.

.col-md-border:not(:last-child) matches all but the last element before .row close and adds right border to it.

.col-md-border + .col-md-border matches the second div with the same class if these two are next to each other and adds left border and -1px negative margin. Negative margin is why it doesn't matter anymore which column has greater height and the separator will be 1px the same height as the highest column.

It does also have some problems...

  1. When you try to be clever/lazy and use col-XX-X class together with hidden-XX/visible-XX classes inside the same row element.
  2. When you have a lot of columns and need a pixel perfect thing. Since it moves n-1 column 1px to the left.

... But on the other hand it's responsive, works great for simple html and it's easy to create these classes for all bootstrap screen sizes.

2016/05/04

To fix the ugly look of a divider being too short when the content of one column is taller, add borders to all columns. Give every other column a negative margin to compensate for position differences.

For example, my three column classes:

.border-right {
    border-right: 1px solid #ddd;
}
.borders {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    margin: -1px;
}
.border-left {
    border-left: 1px solid #ddd;
}

And the HTML:

<div class="col-sm-4 border-right">First</div>
<div class="col-sm-4 borders">Second</div>
<div class="col-sm-4 border-left">Third</div>

Make sure you use #ddd if you want the same color as Bootstrap's horizontal dividers.

2015/09/23

If you are still seeking for the best solution in 2018, I found the way this works perfectly if you have at least one free pseudo element( ::after or ::before ).

You just have to add class to your row like this: <div class="row vertical-divider ">

And add this to your CSS:

.row.vertical-divider [class*='col-']:not(:last-child)::after {
  background: #e0e0e0;
  width: 1px;
  content: "";
  display:block;
  position: absolute;
  top:0;
  bottom: 0;
  right: 0;
  min-height: 70px;
}

Any row with this class will now have vertical divider between all of the columns it contains...

You can see how this works in this example.

2018/08/20