CODEWITHSUNDEEP
htmlcssbootstrap-4
nicom
nicom

Reputation: 3

How to align two Bootstrap columns below each other?

I struggle with the alignment of Bootstrap columns at the moment. Could you help me please?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <p style="background-color: #C3C3C3">
                DIV 1 - content should be on the left.<br />
                This content is higher then the right (DIV 2) content.
            </p>
        </div>
        <div class="col-md-8">
            <p style="background-color: #D1D1D1">
                DIV 2 - content should be on the right.
            </p>
        </div>
        <div class="col-md-8">
            <p style="background-color: #F1F1F1">
                DIV 3 - Content should be on the desktop right. And
                mobile below both DIVs.
            </p>
        </div>
    </div>
</div>

The result should look like this:

Mobile view Desktop view

Upvotes: 0

Views: 133

Answers (1)

John
John

Reputation: 36

You've created a row that has 20 columns (4 + 8 + 8). Boostrap is based on a 12 column model.

To align the third column below columns 1 and 2, you need to create a new row, <div class="row"></div>.

If you want content in div1 to be above div2, that's a little difficult in your current code. div1, div2, and div3 are all flush to the top of the row you've created. You could consider adding the styling margin-top to div2.

Upvotes: 2

Related Questions