My goal is to create three new columns within the center column on my webpage. However, when I attempt to nest them, they end up stacking at the bottom of the center column instead of staying inside it. Is there a way for the center column to act as a background container for the other three columns?
I'm starting to wonder if I am not utilizing Bootstrap and its columns correctly. Would it be better to just create three regular divs nested inside the center column, rather than using columns?
The website I am designing has three main columns, and within the center column, I want to have three evenly spaced boxes, images, or blocks.
Currently, I am working with Bootstrap version 4.6.1.
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="51333e3e25222523302111657f677f60">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="bg-secondary col-sm-2">
1
</div>
<div class="bg-primary col-sm-8">
2
<div class="row">
<div class="bg-warning col-sm-4">
2.1
</div>
<div class="bg-warning col-sm-4">
2.2
</div>
<div class="bg-warning col-sm-4">
2.3
</div>
</div>
</div>
<div class="bg-secondary col-sm-2">
3
</div>
</div>
</div>In order to achieve the desired layout, I need to figure out how to place three additional columns inside the central column (bg-primary col-sm-8): https://i.sstatic.net/ucAv6.png