Creating a Bootstrap container with two columns is my current task. The layout should display the columns side by side horizontally on larger screens, and stacked vertically on smaller screens with a 1px border surrounding each column, featuring rounded corners. The mockup images for reference can be found below:
I am looking for guidance on achieving this design. It's important to note that on both large and small screens, the borders where the columns touch should only total 1px and maintain their rounded corners.
Here's the current code snippet I have been working on:
.custom-left-column {
border: 1px solid #ccc;
background-color: #fff;
padding: 15px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.custom-right-column {
border: 1px solid #ccc;
background-color: #e9ecef;
padding: 15px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0/css/bootstrap.min.css"
/>
<div class="container-fluid mx-auto" style="max-width: 70%">
<div class="row">
<!-- Left Column-->
<div
class="col-lg-8 d-flex align-items-center mx-auto custom-left-column"
>
<p>Left Column</p>
</div>
<!-- Right Column -->
<div
class="col-lg-4 d-flex align-items-center mx-auto custom-right-column"
>
<p>Right Column</p>
</div>
</div>
</div>