My current framework is Bootstrap 5.2.
I am aiming to create two columns, each with a col-md-6 class inside a row. You can visualize the layout through this image: .
The challenge I'm facing is the inability to add another row with col-md-6 elements directly under the ExampleTitle column. This screenshot shows what occurs instead: .
To make my objective clearer, here's an image representation of what I'm trying to achieve: .
For inspiration, I discovered a design concept that aligns with my goals (scroll down on this page): https://css-tricks.com/snippets/css/complete-guide-grid/
.card2 {
background: #2b2b2b;
padding: 1rem 1.5rem;
margin-bottom: 25px;
border-radius: 16px;
}
body {
background-color: #131313;
}
h1, h2, h3, h4, h5, h6, a, p {
color: #fff;
}<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a4845455e595e584b5a6a1f04180419">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d4d9d9c2c5c2c4d7c6f68398849885">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-center">
<div class="row">
<div class="col-md-6">
<h2>ExampleTitle</h2>
<div class="card2">
<h4>ExampleItem1</h4>
<p>Description</p>
</div>
<div class="card2">
<h4>ExampleItem2</h4>
<p>Description</p>
</div>
<div class="card2">
<h4>ExampleItem3</h4>
<p>Description</p>
</div>
</div>
<div class="col-md-6">
<h2>ExampleTitle2</h2>
<div class="card2">
<h4>Service1</h4>
<p>Something</p>
</div>
<div class="card2">
<h4>Service2</h4>
<p>Something that extends to a new line for varied heights</p>
</div>
<div class="card2">
<h4>Service3</h4>
<p>Something</p>
</div>
<div class="card2">
<h4>Service4</h4>
<p>Something</p>
</div>
</div>
<div class="col-md-6">
<h2>ExampleTitle2</h2>
<div class="card2">
<h4>Service1</h4>
<p>Something</p>
</div>
<div class="card2">
<h4>Service2</h4>
<p>Something that extends to a new line for varied heights</p>
</div>
<div class="card2">
<h4>Service3</h4>
<p>Something</p>
</div>
<div class="card2">
<h4>Service4</h4>
<p>Something</p>
</div>
</div></div>
</div>