Search code examples
htmlcsstwitter-bootstrapbootstrap-5

Bootstrap right and left col

Should be simple enouth however I can not see my mistake.

Aim whole markup to be a centred col and col-10 width. next within the same 10 with col have two divs 50% 50%.

using bootstrap 5, for some reason right and left are stacking

Current code

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<section class="slider-block slider-block-inv mb-0 pb-0 pb-md-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="text-center col-10">
                <h2 class="text-white">Title <span class="fw-bold">more</span></h2>
                <strong style="color:#4EF4CB;">Session Title Goes Here:</strong>
                <p class="pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.</p>
            </div>
            <div class="row-cols-2">
                <div class="col">left</div>
                <div class="col">Right</div>
            </div>
        </div>
    </div>
</section>

Solution

  • The element with row-cols-2 also needs the row class, i.e. <div class="row row-cols-2">