Why is the size of a nested row with multiple columns inside col-auto more than content width?

Question

If I understand it correctly, the col-auto classes in Bootstrap is supposed to only use the natural width of the content. When I use col-lg-auto in the code below, the width becomes larger than the content.

I've created this Codepen that demonstrates the issue.

<div class="row">
  <div class="col">
    <div class="row">
      <div class="col-12 col-sm-6 col-lg-4">Col</div>
      <div class="col-12 col-sm-6 col-lg-4">Col</div>
      <div class="col-12 col-sm-6 col-lg-4">Col</div>
      <div class="col-12 col-sm-6 col-lg-4">Col</div>
      <div class="col-12 col-sm-6 col-lg-4">Col</div>
      <div class="col-12 col-sm-6 col-lg-4">Col</div>
      <div class="col-12 col-sm-6 col-lg-4">Col</div>
      <div class="col-12 col-sm-6 col-lg-4">Col</div>
      <div class="col-12 col-sm-6 col-lg-4">Col</div>
    </div>
  </div>
  <!-- Replace col-lg-auto with col-lg and add class flex-grow-0 -->
  <div class="col-12 col-lg-auto">
    <div class="row">
      <div class="col-6 col-lg-12">Content</div>
      <div class="col-6 col-lg-12">Content</div>
      <div class="col-6 col-lg-12">Content</div>
      <div class="col-6 col-lg-12">Content</div>
      <div class="col-6 col-lg-12">Content</div>
      <div class="col-6 col-lg-12">Content</div>
    </div>
  </div>
</div>

If the row inside col-lg-auto only has one column child, then it works as expected. I'm also able to achieve the layout I want if i replace the class col-lg-auto with the classes col-lg and flex-grow-0.

Can someone please explain why the width of col-lg-auto does become larger than the content width in this scenario? Can i not use a row with multiple columns inside a column that has the class col-auto?

Carol Skelly · Accepted Answer · 2018-10-03T11:55:02.070

I don't think it's a "bug". The columns inside the col-lg-auto are full width col-lg-12 so they're filling 100% width as expected. If you want the inner columns to have consume min width, use flex-lg-column (flex-direction:column) on the inner row...

<div class="container-fluid">
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col-12 col-sm-6 col-lg-4">Col</div>
                <div class="col-12 col-sm-6 col-lg-4">Col</div>
                <div class="col-12 col-sm-6 col-lg-4">Col</div>
                <div class="col-12 col-sm-6 col-lg-4">Col</div>
                <div class="col-12 col-sm-6 col-lg-4">Col</div>
                <div class="col-12 col-sm-6 col-lg-4">Col</div>
                <div class="col-12 col-sm-6 col-lg-4">Col</div>
                <div class="col-12 col-sm-6 col-lg-4">Col</div>
                <div class="col-12 col-sm-6 col-lg-4">Col</div>
            </div>
        </div>
        <!-- Replace col-lg-auto with col-lg and add class flex-grow-0 -->
        <div class="col-12 col-lg-auto">
            <div class="row flex-lg-column">
                <div class="col-6 col-lg-12 bg-blue">Content</div>
                <div class="col-6 col-lg-12 bg-blue">Content</div>
                <div class="col-6 col-lg-12 bg-blue">Content</div>
                <div class="col-6 col-lg-12 bg-blue">Content</div>
                <div class="col-6 col-lg-12 bg-blue">Content</div>
                <div class="col-6 col-lg-12 bg-blue">Content</div>
            </div>
        </div>
    </div>
</div>

Demo: https://www.codeply.com/go/l5kv3hu9Av

Note: For IE 11 you'll need to add:

/* IE 11 helper */
.flex-lg-column > .col-lg-12 {
    flex: 1 1 auto;
}

Roman Pokrovskij · Answer 2 · 2018-10-03T11:31:50.453

0

The generic way to research those questions is to go to bootstrap.css and check definitions:

https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap-grid.css#L82-L92

.col-lg-auto {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap-grid.css#L652-L657

@media (min-width: 992px) {
    .col-lg-auto {
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: auto;
      max-width: none;
    }
}

That means in "lg-mode" it has width auto which is not related to the content width - difference between width auto and width 100 percent

edited Oct 03 '18 at 11:31

answered Oct 03 '18 at 11:26

Roman Pokrovskij

9,449
21
87
142

you say it is not related to the content width, but the [docs](https://getbootstrap.com/docs/4.0/layout/grid/#variable-width-content) says "Use `col-{breakpoint}-auto` classes to size columns based on the natural width of their content." – andbjer Oct 03 '18 at 22:03
I try to say you: do not hesitate to go to sources. – Roman Pokrovskij Oct 04 '18 at 09:27

Why is the size of a nested row with multiple columns inside col-auto more than content width?

2 Answers2