CSS and/or Bootstrap - How to split the screen vertically-CodePudding

How can I go about splitting the screen like in the screenshot? The website in the screenshot is mine and I've designed it in Elementor but now I want to code it. How can I do that with css and maybe Boostrap?

Visit mateusrdesign.com to check it for yourself.

Screenshot

Screenshot #02 (notice how the screen is smaller and there is no horizontal scroll bar

Here's what I've tried:

<div class="container">
    <div class="row">
        <div id="left" class="col-3">
            <p>Place holder</p>
        </div>
        <div id="right" class="col-9">
            <p>Place holder</p>
        </div>
    </div>
</div>

CodePudding user response：

You can achieve this with a flex box:

.row {
   display: flex; 
   justify-content: center;
   align-items: center;
   flex-direction: row;
}

.row #left {
    background: yellow; /** Just to emphasize vertical split visually. You can remove this */
    width: 50%;
}


.row #right {
    background: green; /** Just to emphasize vertical split visually. You can remove this */
    flex: 1;
}

CodePudding user response：

<body style="height: 100vh;">
    <div class="row w-100 h-100">
        <div class="col bg-info">Left side</div>
        <div class="col bg-dark">Right side</div>
    </div>
</body>

This is one of the bootstrap way. Dont forget to import bootstrap cdn to html.