Bootstrap 4.0 Grid System Layout not working

bfaria picture bfaria · Aug 5, 2017 · Viewed 9.7k times · Source

I'm trying to do a layout with bootstrap, but I can't figure it out what I'm doing wrong. I'm putting two columns of 6 and the second column of 6 I'm putting 2 columns of 3 inside, but it's not working. I'm new to bootstrap.

Here is the code:

What I want to do :

enter image description here

What I get:

enter image description here

Answer

Zim picture Zim · Aug 5, 2017

You're just missing a basic Bootstrap "rule". From the docs..

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

In Bootstrap 4, .col- that are not placed in .row will stack vertically.

https://www.codeply.com/go/GlA3IP7oGU

<div class="row">
    <div class="col-12 col-sm-12 col-md-6 col-xl-6" style="border-left: solid 1px #ffbfbf;">
        <div style="height: 700px; background-color: #FF3355; border-radius: 15px;">a a a a a a</div>
    </div>
    <div class="col-12 col-sm-12 col-md-6 col-xl-6" style="border-left: solid 1px #ffbfbf;">
        <div class="row">
            <div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;">
                <div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div>
            </div>
            <div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;">
                <div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div>
            </div>

            <div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;">
                <div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div>
            </div>
            <div class="col-12 col-sm-12 col-md-6 col-xl-6" style="padding-right: 0px; padding-left:0px;border-left: solid 1px #ffbfbf;">
                <div style="height: 320px; background-color: #FF3355; border-radius: 15px;">a</div>
            </div>
        </div>
    </div>
</div>

Read how Bootstrap nesting works


Related: Wrapping bootstrap columns in extra div