Bootstrap nested rows and columns not stacking correctly

Question

I have the following layout:

<div class="container" id="dashboardContainer">
    <div class="row">
        <div class="col-md-4 col-sm-6 margin-bottom-30">
            <a href="" class="lg img-wheel" id="">
            Col 1-1
            </a>
        </div>
        <div class="col-md-4 col-sm-6 margin-bottom-30">
            <a href="" class="lg img-calendar" id="viewFutureBookings">
        Col 1-2
            </a>
        </div>

        <div class="col-md-4 col-sm-12">
            <div class="row">
                <div class="col-sm-6 col-md-12 margin-bottom-30">
                    <a href="#" class="sm img-compass" id="">
                       Col 2-1
                    </a>
                </div>
                <div class="col-sm-6 col-md-12">
                    <a href="#" class="sm img-present" id="referAFriend">
Col 2-2
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

which works great when you are viewing in md and lg. but the problem is when you go into the sm layout it will lay itself out correctly, but not allow you to click on the first row of buttons.

The solution for that I've found is to remove the nested row, but then it breaks my layout because the margins/paddings are out.

What is the recommended solution for this sort of issue?

@NooBskie, Andrew means between 768px and 992px viewport... Doesn't appear to be working on Chrome for me either. — David Wilkinson
– David Wilkinson, Commented Feb 16, 2016 at 10:49
@DavidWilkinson That's right. It is not working on that viewport size. It does appear to be because of the nested row inside of the third column, but I am not sure how to fix it correctly. — AndrewC
– AndrewC, Commented Feb 16, 2016 at 10:53

BOLVERIN · Accepted Answer · 2016-02-16 11:11:45Z

2

Problem with floating. You huge block with col-sm-12 cover previous two block

Solving http://codepen.io/anon/pen/eJXbde

@media (min-width: 992px) {
  .col-sm-12 {
      clear: none;
  }
}
@media (min-width: 768px) AND (max-width: 992px) {
  .col-sm-12 {
      clear: left;
  }
}

answered Feb 16, 2016 at 11:11

BOLVERIN

1036 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tohood87 · Accepted Answer · 2016-02-16 12:20:33Z

1

I did the following:

#dashboardContainer a {
    background: red;
    display: block;
    border: 1px solid blue;
    color: white;
    position: relative; /* Add Position */
    z-index: 1; /* Add Stack Order */
}

When using nested items I often use z-index to help manage the stack order of the elements.

Additional review:

I recommend updating your bootstrap CSS file to a more recent version as it appears it may be a bug on certain browsers when using v3.0.0

I changed this to v3.1.0 and higher and the row issue was no longer a problem.

edited Feb 16, 2016 at 12:20

answered Feb 16, 2016 at 10:54

tohood87

7283 silver badges15 bronze badges

2 Comments

David Wilkinson Over a year ago

Whilst I agree that this solution works, it doesn't solve the underlying problem of the nested row inheriting the full height of the entire parent row... It also doesn't appear to be "future proof". What if for example, the content contained within the nested row / columns changed and weren't anchor elements any more, but buttons. Or just static text, etc...

tohood87 Over a year ago

Hi David, I fully agree with you in that respect. After further review it looks like the best fix would be to update to a more recent version of Bootstrap CSS. Looks like it may of been a bug in Chrome when using 3.0.0 - anything above that such as 3.1.0 seems to have removed the issue. Thanks for commenting I will make sure to future proof any answer I give as much as possible. Cheers

David Wilkinson · Accepted Answer · 2016-02-16 11:06:07Z

You need to add float: left to the div that wraps the nested row (I've added the class nested so you can see easier.

Working here: http://codepen.io/samuidavid/pen/JGzwXB

<div class="container" id="dashboardContainer">
    <div class="row">
        <div class="col-md-4 col-sm-6 margin-bottom-30">
            <a href="" class="lg img-wheel" id="">
            Col 1-1
            </a>
        </div>
        <div class="col-md-4 col-sm-6 margin-bottom-30">
            <a href="" class="lg img-calendar" id="viewFutureBookings">
        Col 1-2
            </a>
        </div>

        <div class="col-md-4 col-sm-12 nested">
            <div class="row">
                <div class="col-sm-6 col-md-12 margin-bottom-30">
                    <a href="#" class="sm img-compass" id="">
                       Col 2-1
                    </a>
                </div>
                <div class="col-sm-6 col-md-12">
                    <a href="#" class="sm img-present" id="referAFriend">
Col 2-2
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

@media (min-width: 768px) and (max-width: 992px) {
  .nested {
    float: left;
  }
}

Abhijeet Mukherjee · Accepted Answer · 2016-02-16 10:57:26Z

0

For 2-1 and 2-2 cols you should change code like this

<div class="row">
<div class="col-sm-6 col-md-6 margin-bottom-30">
<a href="#" class="sm img-compass" id="">
Col 2-1
</a>
</div>

Do same for 2-2

answered Feb 16, 2016 at 10:57

Abhijeet Mukherjee

597 bronze badges

Collectives™ on Stack Overflow

Bootstrap nested rows and columns not stacking correctly

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related