CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4flexbox
Chef Tony
Chef Tony

Reputation: 475

How to make right column height independent in Bootstrap 4?

I'm trying to achieve the following two column layout using Bootstrap 4:

layout-1

My problem is, when I add content to the right column, it "pushes" the left one below, like this:

layout-2

Here's my code so far:

<div class="row">
    <div class="col-md-6">A</div>
    <div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</div>
</div>

<div class="row">
    <div class="col-md-6">B</div>
</div>

I'm not sure how to proceed next...

Upvotes: 0

Views: 178

Answers (2)

EReload
EReload

Reputation: 249

Technically, you should take 'B' part of the tag inside the 'A' tag and wrap both 'A' and 'B' with their own 'row' and 'col' tags.

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col">A</div>
        </div>

        <div class="row">
            <div class="col">B</div>
        </div>

    </div>
    <div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Donec at orci porta, suscipit
        felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis
        aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat
        orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim,
        eget consequat sem dapibus nec.
    </div>
</div>

Upvotes: 1

Hardi Shah
Hardi Shah

Reputation: 343

You can achieve the structure you are asking for as below. You were just mistaking while placing row and columns.

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                A
            </div>
            <div class="col-md-12">
                B
            </div>
        </div>
    </div>
    <div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</div>
</div>

Upvotes: 1

Related Questions