Bootstrap Grid going wrong

Question

Maybe I am blind, but my Bootstrap Grid is not behaving as expected. Shouldn't it fill the whole row? Image of possily wrong behavior

<div class="container min-vh-100 pt-5">
<h5 class="text-white mt-2">{{event?.teamA?.name}} vs. {{event?.teamB?.name}}</h5>
<div class="row py-0">
  <div class="col-4 row bg-info" style="max-height: 60vh;">
    <div class="col-12 row" style="max-height: 15vh;">
      <div class="col-8 bg-danger row">
        <div class="col-5 text-right"><h5>0</h5>Heim</div>
        <div class="col-1 text-center"><h5>:</h5></div>
        <div class="col-5 text-left"><h5>0</h5>Gast</div>
        <div class="col-1"></div>
        <div class="col-12"><p class="text-sm-center">Spielstand</p></div>
      </div>
      <div class="col-4 bg-success row">
        <div class="col-6 text-right">0<br>Heim</div>
        <div class="col-6 text-center">0<br>Gast</div>
        <div class="col-12 text-left"><p class="text-sm-center">Teamfouls</p></div>
      </div>
    </div>
  </div>
</div>

score 1 · Answer 1 · answered Oct 07 '20 at 08:07

1

You must remember that "row" class has set default properties:

margin-right: -15px;
margin-left: -15px;

And "col-anything" classes have set default properties:

padding-right: 15px;
padding-left: 15px;

That's why your idea don't work as you expected.

answered Oct 07 '20 at 08:07

Kida

734
1
9
23

Is there a better way to reach a grid like this? Should I go with Table instead or set the mx-0 and px-0 tags to every tab? – Galileon Oct 07 '20 at 08:12
From my experience sometimes in small cases is just easier to put mx-0 tag, but sometimes responsive table is more clear option, it depends on your project and your preferences, I think – Kida Oct 07 '20 at 08:19

Carol Skelly · Answer 2 · 2021-08-10T16:05:34.753

Bootstrap 5 (update 2021)

The Bootstrap 5 grid still uses flexbox so nesting the grid row/col still works the same way...

<div class="container">
  <div class="row">
    <div class="col">
      <div class="row">
        <div class="col-4">
        </div>
        <div class="col-4">
        </div>
        <div class="col-4">
        </div>
      </div>
    </div>
  </div>
</div>

Bootstrap 4 (original answer)

Don't use col and row together in the same div. Instead follow the Bootstrap grid rules...

"In a grid layout, content must be placed within columns and only columns may be immediate children of rows."

    <div class="row py-0">
        <div class="col-4 bg-info" style="max-height: 60vh;">
            <div class="row" style="max-height: 15vh;">
                <div class="col-8 bg-danger">
                    <div class="row">
                        <div class="col-5 text-right">
                            <h5>0</h5>Heim
                        </div>
                        <div class="col-1 text-center">
                            <h5>:</h5>
                        </div>
                        <div class="col-5 text-left">
                            <h5>0</h5>Gast
                        </div>
                        <div class="col-1"></div>
                        <div class="col-12">
                            <p class="text-sm-center">Spielstand</p>
                        </div>
                    </div>
                </div>
                <div class="col-4 bg-success">
                    <div class="row">
                    <div class="col-6 text-right">0<br>Heim</div>
                    <div class="col-6 text-center">0<br>Gast</div>
                    <div class="col-12 text-left">
                        <p class="text-sm-center">Teamfouls</p>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

https://codeply.com/p/mKFXWjc39k

Bootstrap Grid going wrong

2 Answers2