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>

Answer 1

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

Answer 2

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.