Two vertical section with bootstrap 5-CodePudding

Ive been struggling for the past day on this issue, if someone can help me I would be thankful ! I am trying to do something like this with bootstrap 5. goal I am trying to achieve

I know how to do the form, centre the logo and all, but I'm not able to split the page into two vertical section, I want to use bg-dark on the left and bg-secondary on the right. Here's what I have for now:

<div >
        <div >
            <div >
                <img src="/img/FOODIGO.svg" alt="">
            </div>
            <div >Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente facere adipisci tempore perspiciatis aliquid nostrum impedit deserunt doloremque. Voluptatum ullam quo incidunt quae eligendi autem nesciunt dolore, asperiores suscipit quas.</div>
        </div>
    </div>

thank you for your help !

CodePudding user response：

this should do the trick.

for more info you can read up here: https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div >
    <div  style="height:100vh;">
        <div >
            <img src="/img/FOODIGO.svg" alt="">
        </div>
        <div  style="height:100vh;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente facere adipisci tempore perspiciatis aliquid nostrum impedit deserunt doloremque. Voluptatum ullam quo incidunt quae eligendi autem nesciunt dolore, asperiores suscipit quas.</div>
    </div>
</div>

I have updated the answer to include your initial code. this will allow your section to also be responsive as well.

Basically by adding -fluid to your container we stretch the container 100% the width of the parent container.

Hope this helps.