Bootstrap Grid

[Cjls96]

        <div class="container-fluid">
            <div class="row">
                <div class="col-12 bg-success text-center">
                <h1>AAA</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-5">
                    <div class="row">
                        <div class="col-2 bg-secondary">
                        <h1>AAA</h1>
                        </div>
                        <div class="col-10">
                            <div class="row">
                                <div class="col-12 bg-warning">
                                <h1>AAA</h1>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 bg-dark">
                                <h1>AAA</h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-7">
                    <div class="row">
                        <div class="col-12 bg-primary">
                        <h1>AAA</h1>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12 bg-danger">
                <h1>AAA</h1>
                </div>
            </div>
        </div>

Das ist der Code zu folgendem Grid System.

Was muss ich jetzt genau ändern, dass sich der blaue AAA Bereich über die komplette Höhe der zweiten Reihe erstreckt, also so hoch ist wie der hellgraue AAA Bereich? Zur Erläuterung: Im grünen und roten Feld soll später Text angezeigt werden, im hellgrauen sollen Buttons entstehen. Im gelben Feld will ich ein Bild anzeigen lassen, im grauen ein Video und im blauen Bereich soll ein iframe entstehen.

 

[Tourgott]

<div class="col-7">

ändern zu

div class="col-7 d-flex align-items-stretch">

 

[Cjls96]

Dann hat der blaue Bereich zwar die richtige Höhe, aber erstreckt sich nicht über die komplette Breite, also über die Hälfte der Seite.

 

[Tourgott]

Ein bisschen was musst du schon noch selbst machen: https://getbootstrap.com/docs/4.1/utilities/flex/

Gern geschehen, übrigens.

 

[Cjls96]

Entschuldige! Natürlich zuerst einmal danke.
Ich habe es jetzt mal mit flex-grow-1 versucht, das geht aber dann auch nicht. Woran liegt das?

 

[Tourgott]

<div class="col-7 d-flex align-items-stretch">
         <div class="row d-flex flex-fill">
                <div class="col-12 bg-primary ">
                 <h1>AAA</h1>
                 </div>
          </div>
</div>

Edit - Grundsätzlich ist flexbox übrigens nicht als Grid-System gedacht. Ich würde heute dazu schon CSS-Grid nutzen.

 

[Cjls96]

Okay, sie würden das also ohne das Bootstrap Grid Layout machen. Habe gerade mal gegooglet und nach Vergleichen von CSS Grid Layout und Bootstrap Grid Layouts gesucht. Nun sagen bevorzugen die einen CSS und die anderen Bootstrap. Was ist dann das passende für mich? Wie sieht es mit der "Responsiveness" von CSS Grid aus? Bietet das gleiche Layout in CSS Grid Vorteile gegenüber dem Layout in Bootstrap außer der Übersichtlichkeit im Code?

 

[hoppler]

Setze die Höhe der row noch auf 100% und dann klappt es:
https://next.plnkr.co/edit/b3nn3wnWzzsWVJt2

<div class="col-7">
    <div class="row" style="height:100%;">
        <div class="col-12 bg-primary">
            <h1>AAA</h1>
        </div>
    </div>
</div>

 

[Cjls96]

Vielen Dank, das ist natürlich noch eleganter! Kann ich das auch in meine style.css schreiben.
Also irgendwie so

row {height: 100%;}

Aber was wäre dann mein Selektor? Oder macht das hier keinen Sinn?