Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3 - 2 column nested rows

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. bs row

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.

bootstrap

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>
like image 865
user933791 Avatar asked Oct 11 '13 13:10

user933791


People also ask

Can you nest rows in columns Bootstrap?

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.

How do I split a row into two columns in Bootstrap?

You can use col-md-* class for child element inside the parent row class to split the columns for your need.

What is Col lg 2?

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.

What does Col MD 12 mean?

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)...


1 Answers

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.

like image 64
John Reid Avatar answered Oct 15 '22 11:10

John Reid