How to add a row between two columns using Twitter Bootstraps grid

Question

Two column layouts with a line in the middle.

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

Answer 1

I think I understood your question correctly ... these are the codes below. The inline style shown below is for illustration purposes only. You apply your style 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 should output this image .

Answer 2

My solution uses the :before pseudo-element to place a positioned element between columns. This does not require any more HTML elements and will only apply to the immediate children of the .col-* elements of the .border-between class. This should be applied to the same element as .row .

HTML

 <div class="row border-between"> <p class="col-sm-6">This column does not have a border, because it 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; } 

Answer 3

Based on @Ross Angus's solution, I found a way to adapt the height. Just placing on top of all the borders of each column.

 .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; } 

Answer 4

Based on this answer, which is very similar: https://stackoverflow.com>

I would suggest 2 angles to attack this problem: borders or a series of lines. Here is the demo daemon (jsfiddle) .

Below the sample for the background option, the only drawback is that you do not actually control the line width 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; } 

Answer 5

Extending the CSS provided by user2136179, you can also make lower bounds. This requires using matchHeight, but you can get your boot grid similar to a table. check this

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

Answer 6

I think you can set the left column to 48% wide, to the right - 48% wide and center 2% div with a repeated background. You have to deal with it yourself.

Answer 7

Bootstrap 4 now comes with boundary utility classes . Therefore, if you use Bootstrap 4, you can simply use these classes for the columns that need them. For example, if you want to set the border between column A and column B, you must add the border-right class to 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> = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity = "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin = "anonymous"> <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>