How can I add a line between two columns using Twitter Bootstraps grid system
GridTwitter BootstrapGrid Problem Overview
Two column layout with a line in the middle.
[ ] | [ ]
[ ] | [ ]
[ ] | [ ]
[ Left Column ] | [ Right Column ]
[ ] | [ ]
[ ] | [ ]
[ ] | [ ]
[ ] | [ ]
Grid Solutions
Solution 1 - Grid
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;
}
Solution 2 - Grid
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.
Solution 3 - Grid
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;
}
Solution 4 - Grid
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>
Solution 5 - Grid
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; }
Solution 6 - Grid
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();
Solution 7 - Grid
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