How can I add a line between two columns using Twitter Bootstraps grid system

Question

Two column layout with a line in the middle.

[                      ] | [                      ]
[                      ] | [                      ]
[                      ] | [                      ]
[     Left Column      ] | [    Right Column      ]
[                      ] | [                      ]
[                      ] | [                      ]
[                      ] | [                      ]
[                      ] | [                      ]

score 89 · Answer 1 · edited Jan 29 '19 at 19:33

89

My solution uses the :before pseudo-element to put a positioned element between the columns. This doesn't require any more HTML elements and will just be applied to immediate child .col-* elements of the .border-between class. This should be applied to the same element as the .row.

HTML

<div class="row border-between">
  <p class="col-sm-6">This column does not have a border, because it's a first child.</p>
  <p class="col-sm-6">This column has a border to the left</p>
</div>

CSS

.border-between > [class*='col-']:before {
   background: #e3e3e3;
   bottom: 0;
   content: " ";
   left: 0;
   position: absolute;
   width: 1px;
   top: 0;
}

.border-between > [class*='col-']:first-child:before {
   display: none;
}

edited Jan 29 '19 at 19:33

Cave Johnson

6,499
5
38
57

answered Mar 30 '15 at 08:42

Ross Angus

1,070
8
6

5

This sould be the accepted answer as it creates a full-height separator instead of one that is (only) as high as the left column. Thanks! – florian h Oct 09 '15 at 07:28
11

Whilst this is a superior answer to the accepted one, it still doesn't solve the full-height issue. This one depends on the height of the right column. – spikyjt Nov 17 '15 at 11:02

score 67 · Accepted Answer · edited Mar 01 '14 at 17:47

I think I got your question right... this the below codes. The inline style below is just for illustration. You apply your styling in the css file.

<div class="container">
    <div class="row-fluid">
        <div class="span6" style="padding-right:20px; border-right: 1px solid #ccc;">
            <p>Some Contents Here...</p>
        </div>

        <div class="span6">
            <p>Some Contents Here...</p>
        </div>
    </div>
</div>

The above code shall output this image.

enter image description here

Anne Claire · Answer 3 · 2016-06-02T10:22:24.890

31

Based on @Ross Angus solution I found a way to adapt height. Just placing on top of each others borders of each columns.

.grid--borderBetween > [class*='col-']:before,
.grid--borderBetween > [class*='col-']:after {
    background: #b2b2b2;
    bottom: 0;
    content: " ";
    position: absolute;
    width: 1px;
    top: 0;
}
.grid--borderBetween > [class*='col-']:before {
    left: 0;
}
.grid--borderBetween > [class*='col-']:after {
    right: -1px;
}
.grid--borderBetween > [class*='col-']:first-child:before,
.grid--borderBetween > [class*='col-']:last-child:after {
    display: none;
}

edited Jun 02 '16 at 10:22

answered Dec 18 '15 at 11:28

Anne Claire

403
5
10

1

What an odd name for a class (.grid--borderBetween). Mixing camel case with a hyphen and even doubling up the hyphen. Who does that?! I thank you for the solution, but that naming scheme should be different. – Bobort Jan 19 '17 at 17:27
2

Hi @Bobort. I'm not an artist ;) The double hypen is a BEM modifier. http://getbem.com/naming/ – Anne Claire Apr 05 '17 at 10:50
1

I might agreed I could have named it .grid--border-between. Both ways seems good too me. BEM might look strange at the beginning. I didn't like the look either at the beginning, but actually this is really usefull and clean. – Anne Claire Apr 05 '17 at 11:01
Well, I have now learned something new. I never heard of BEM until now. But I think @AnneClaire is right to avoid camel case. – Bobort Apr 07 '17 at 18:34
1

@Bobort Why avoid it's just a personal preference and just another option to separate things. I actually even go further and end up with things like `ComponentName-subcomponent--modifier`. It works just fine and there's no real argument against using camelCase except personal preference. – maryisdead May 19 '17 at 13:40
@maryisdead, consistency is what we are advocating. If you do camel case, then fine. Just don't mix it with other conventions. It's inconsistent. You can also [read this](https://softwareengineering.stackexchange.com/questions/186407/why-bootstrap-3-changes-camelcase-to-dashes-is-it-more-readable) question and answer about some studies about this debate. – Bobort May 19 '17 at 22:03

score 4 · Answer 4 · answered Jan 26 '19 at 00:19

Bootstrap 4 now comes with border utility classes. So if you are using Bootstrap 4, you can just use these classes on the columns that need them. For example, If you want a border between column A and column B, you would add the border-right class on column A.

Here is a demo:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="container">
  <div class="row text-center">
    <div class="col border-right">
      Column A
    </div>
    <div class="col">
      Column B
      <br>
      <br>
      <br>
      Additional content demonstrating that the border stretches to accommodate the height of both columns.
    </div>
  </div>
</div>

score 2 · Answer 5 · edited May 23 '17 at 11:47

Based on that answer which is very similar : https://stackoverflow.com/a/11299934/1478467

I would suggest 2 angles to attack this problem : borders or row background. Here is the demo (jsfiddle).

Below a sample for the background option, the only downside is that you don't really control the width of the line unless you use complex backgrounds.

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

/* Put here the background (color, images, etc.) that you want between the columns */
.row.myBackground { background: #F00; }
/* This is the column background, for example white as the page background */
.row.myBackground > [class*="span"] { background: blue; }

score 1 · Answer 6 · answered Feb 02 '17 at 20:09

Expanding on the CSS provided by user2136179, you can also do bottom borders. It requires using matchHeight but can get your Bootstrap Grid looking like a table grid. Check it out

// See the rest on codepen.io
$(".border-bottom").children("div").matchHeight();

score -1 · Answer 7 · answered Aug 05 '12 at 08:47

-1

I think you can set the left column is 48% width, right is 48% width and the center 2% div with repeated background. You must yourself handle it

answered Aug 05 '12 at 08:47

Huy trịnh

49
1
1

So I'm guessing you mean I have to include 3 columns? – ehabd Aug 05 '12 at 08:52

How can I add a line between two columns using Twitter Bootstraps grid system

7 Answers7

Linked