Why are all my columns inside one column?

Question

I'm trying to slice an image with HTML/CSS. However, I am stuck by a form that I want to be in 3 columns but instead its going all in the first.

The only time when it does works is when I set my form and another div in command section. But I want to keep these if possible.

I'm using Bootstrap 4.

HTML:

<header id="home">
    <div class="container">
        <div class="row besspar-form-div">
            <div class="form-div">
                <form action="" method="post">
                    <div class="form-group col-md-4 width-36p">
                        <p>
                            <img src="img/phone-round.png" alt="" class="img-phone">
                            <img src="img/phone-round-or.png" alt="" class="img-phone-or">
                            Om welk toestel gaat het?
                        </p>
                        <select name="brand" class="form-control round-control" required>
                            <option value="">SELECT JE MERK</option>
                            <option value="Apple">Apple</option>
                            <option value="Samsung">Samsung</option>
                            <option value="Huawei">Huawei</option>
                            <option value="opt-seprator" disabled>───────────────</option>
                            <option value="Motorola">Motorola</option>
                            <option value="Sony">Sony</option>
                            <option value="LG">LG</option>
                            <option value="OnePlus">OnePlus</option>
                            <option value="HTC">HTC</option>
                        </select>
                    </div>
                    <div class="form-group col-md-4 width-36p">
                        <p>
                            <img src="img/mailbox.png" alt="" class="img-mail">
                            <img src="img/mailbox-or.png" alt="" class="img-mail-or"> Wat is je postcode?
                        </p>
                        <input type="text" name="pincode" class="form-control round-control" placeholder="1234 AB" required>
                    </div>
                    <div class="form-group col-md-4 width-28p">
                        <button type="submit" class="btn btn-prijzen">
                            Prijzen vergelijken
                        </button>
                        <p class="fs-16b">
                            <span class="small-circle"></span>100% Gratis en vrijblijvend
                        </p>
                    </div>
                </form>
            </div>
        </div>
    </div>
</header>

CSS:

.round-control {
    border-radius: 25px;
    border: 1px solid #ccc;
    height: 400px;
    color: inherit
 }

div.besspar-form-div {
    padding: 40px 0px;
    background-color: #FFFFFF;
    margin: 30px auto;
    border-radius: 15px;
}

div.form-div {
    width: 90%;
    margin: auto;
}

.img-phone, .img-mail {
    display: inline-block;
}

.img-phone-or, .img-mail-or {
    display: none;
}

select {
    -webkit-appearance: menulist-button;
    background: url("../img/down-arr.png") 96% / 15% no-repeat #eee;
    background-size: 16px;
}

p.fs-16b {
    font-size: 16px;
    font-family: Montserrat-bold;
    color: #ffad18;
    padding-bottom: 0px;
    padding-top: 10px;
}

.small-circle {
    content: "\25CF";
    font-size: 20px;
    color: #3EB7D3;
}

I expected that the columns would divide in 3 the amount of columns i made. But its going in one

score 3 · Accepted Answer · answered Oct 10 '19 at 12:47

.col-md-4 must be the direct child of .row.

This works

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

This does not

<div class="row">
    <div class="something">
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
    </div>
</div>

Why are all my columns inside one column?

1 Answers1