Menu
I'm trying to achieve the following in Bootstrap 3 using as little of my own markup and CSS as possible. Ideally I'd like to achieve this using pure Bootstrap Markup without resorting to hacks. I've looked at the documentation but can't see a standardized way....
As you can see below, I'm trying to get two rows with a gap in the center.
My Markup as follows
<section class="row">
<article class="col-sm-12 col-md-6">
<!--ROW LEFT-->
<div class="row">
<div class="col-sm-4">col</div>
<div class="col-sm-4">col</div>
<div class="col-sm-4">col</div>
</div>
</article>
<article class="col-sm-12 col-md-6">
<!--ROW RIGHT-->
<div class="row">
<div class="col-sm-4">col</div>
<div class="col-sm-4">col</div>
<div class="col-sm-4">col</div>
</div>
</article>
</section>
The only similar example Bootstrap has in the Docs is below, but you don't get a gap in the center.
BOOTSTRAPS MARKUP
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6">
content
</div>
<div class="col-sm-6">
content
</div>
</div>
</div>
</div>
865
Nesting ColumnsYou can nest columns once you have a container, row, and column set up. To do this, add a new row <div> within the parent column's code, then add your nested columns.
You can use col-md-* class for child element inside the parent row class to split the columns for your need.
col-lg-2: This class is used when the device size is large or greater than 992px and the maximum width of container is 960px and when you want size equal to 2 columns.
col-md- stands for column medium ≥ 992px. col-xs- stands for column extra small ≥ 768px. The pixel numbers are the breakpoints, so for example col-xs is targeting the element when the window is smaller than 768px(likely mobile devices)...
To expand on Skelly's answer, you can use Bootstrap's column offset classes to create gaps between columns:
<div class="container"><section class="row">
<article class="col-sm-12 col-md-5">
<!--ROW LEFT-->
<div class="row" style="background-color:blue;">
<div class="col-sm-4" style="background-color:orange;">col</div>
<div class="col-sm-4" style="background-color:silver;">col</div>
<div class="col-sm-4" style="background-color:orange;">col</div>
</div>
</article>
<article class="col-sm-12 col-md-5 col-md-offset-2">
<!--ROW RIGHT-->
<div class="row" style="background-color:blue;">
<div class="col-sm-4" style="background-color:silver;">col</div>
<div class="col-sm-4" style="background-color:orange;">col</div>
<div class="col-sm-4" style="background-color:silver;">col</div>
</div>
</article>
</section></div>
http://bootply.com/103191
This prevents having to add extra styles but does create a larger gap as you're using two virtual columns to create the space.
If you don't mind the extra space on the right, you could make the offset 1 instead.
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
