Bootstrap 3: nested row has 0 height

Question

My markup:

<div class="container">
  <div class="row">
    <div class="col-xs-12"></div>    
    <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12">
      <div class="row"> <!-- this has 0 height -->
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
      </div>
    </div>    
    <div class="col-xs-12"></div>
  </div>
</div>

What can be the reason that the nested row has correct width, 0 height and can't have a margin-bottom, no matter what contain its colums?

Interesting thing, when I positioned absolutely a pseudoelement ::after for this row, it resolves correctly sizes like top: 50% but only if the problematic row has position: static and not when it has position: relative.

They actually have a height of 1px. [Bootply](http://www.bootply.com/N6eICmOyRP). Here it also can have a margin-bottom. — AlexG, Jan 22 '16 at 12:51

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

The row's height might be collapsing due to its floated children? Try adding a clearfix to clear the row of its children's floats:

<div class="row clearfix">

I'm not entirely sure without seeing any of your own CSS that could be also causing issues, but the above might resolve the issue. FYI - The clearfix class ships with BootStrap.

Here's a good read and other information on clearfix: What is a clearfix?

edited May 23 '17 at 11:59

Community

1
1

answered Jan 22 '16 at 12:48

David Wilkinson

5,060
1
18
32

Clearfix changed nothing. There's no other CSS which could affect layout. Disabling `float: left` on children gives appropriate height to row but obviously breaks the grid. – JoannaFalkowska Jan 22 '16 at 13:01
To be clear, I don't need a workaround because I can figure out one on my own, I would just like to know what happens here and what is a *correct* solution to make the .row behave appropriately. – JoannaFalkowska Jan 22 '16 at 13:02
[https://jsfiddle.net/pucpjqjt/](https://jsfiddle.net/pucpjqjt/) the two nested columns have content in them and the row has a height... [https://jsfiddle.net/8vqLwse3/1/](https://jsfiddle.net/8vqLwse3/1/) inspecting the row in this without any content shows that the row has a height of 1px... I can't replicate what you're seeing I'm afraid? @Senthe – David Wilkinson Jan 22 '16 at 13:04
Yeah, I know it should work and something specific to my app had to happen, maybe there's some compilation error, I don't know. I'll investigate this. For now I resolved the problem with `float: none; display: inline-block;` on children. – JoannaFalkowska Jan 22 '16 at 13:07
1

Okay I reproduced the problem: https://jsfiddle.net/phn3Lae6/1/ When you remove `position: absolute` from `::after`, row behaves normally. Moral: don't mess around with Bootstrap grid pseudoelements. – JoannaFalkowska Jan 22 '16 at 13:16

score 1 · Accepted Answer · answered Jan 22 '16 at 13:21

I reproduced the problem: http://jsfiddle.net/phn3Lae6/1

When you remove position: absolute from ::after pseudoelement, row behaves normally.

Since ::before and ::after pseudoelements are an important part of Bootstrap grid, probably the best solution here is to not mess around with them, but to create a separate element inside the grid element to be a pseudoelement parent, for example like:

<div class="row">
  <div class="pseudoelement-parent">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
  </div>
</div>

.pseudoelement-parent {
  position: relative;
}

score 1 · Answer 3 · answered Jul 18 '18 at 08:23

1

I'm trying to copy bootstrap's columns and I was also wondering why my row's height is 0. It turned out that display: table;, content: " "; and clear: both; are all important for the row's height.

I hope this helps someone.

answered Jul 18 '18 at 08:23

Gellie Ann

439
1
6
10

Bootstrap 3: nested row has 0 height

3 Answers3