"Grid Columns Divider"
Bootstrap 3.3.0 Snippet by Taimurian

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="page-header"> <h3>Add the (.grid-divider) class to any row to separate grid columns with equal height lines.</h3> </div> <div class="row grid-divider"> <div class="col-sm-4"> <div class="col-padding"> <h3>Column 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima expedita incidunt rerum.</p> </div> </div> <div class="col-sm-4"> <div class="col-padding"> <h3>Column 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate placeat suscipit maxime tenetur officiis asperiores quae molestias fugiat praesentium dolorum.</p> </div> </div> <div class="col-sm-4"> <div class="col-padding"> <h3>Column 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab veniam aperiam numquam cupiditate maiores repudiandae ea dicta, sunt rerum corporis. Ab veniam aperiam numquam cupiditate maiores repudiandae ea dicta, sunt rerum corporis. Ab veniam aperiam numquam cupiditate maiores repudiandae ea dicta.</p> </div> </div> </div> </div>
/* Tablet and bigger */ @media ( min-width: 768px ) { .grid-divider { position: relative; padding: 0; } .grid-divider>[class*='col-'] { position: static; } .grid-divider>[class*='col-']:nth-child(n+2):before { content: ""; border-left: 1px solid #DDD; position: absolute; top: 0; bottom: 0; } .col-padding { padding: 0 15px; } }

Related: See More


Questions / Comments:

Hi

In VS platform the CSS complementary not work. Why this? The message is: configure the experimentalDecorators option to remove this message

jcastro2121 () - 11 months ago - Reply 0


Grazie mille!

Filippo Chittolini () - 2 years ago - Reply 0


Is it possible drag the column divider?? Something similar to vertical splitter.

Shwetha V () - 3 years ago - Reply 0


Hi, thanks a lot for this. I'm trying to add a column, so make it 4 instead of 3. What must I change on the CSS to prevent it stacking up the fourth element under the content of the 3rd column instead of creating a fourth column? Thanks a lot

Luke Chambers () - 3 years ago - Reply 0


Great! Thanx a lot!
LESS: https://gist.github.com/eze...

Stan Ezersky () - 3 years ago - Reply 0


excellent!

foo () - 3 years ago - Reply 0