I am currently working on designing a container with a two-column layout using the container-fluid class for background color and image requirements. Inside this container, I have included a container class to ensure that the content aligns properly with non container-fluid containers. My main objective is to achieve alignment within a full-width column structure featuring two different background colors.
For visual reference, you can view an example of what I am aiming to create by clicking on the following link: https://i.sstatic.net/hNaUQ.png
Below is the code snippet representing my current progress on this project:
.flex { display: flex; }
.container-fluid { background: #fff; }
.container-fluid .col-sm-6:last-of-type { background: #000; color: #fff; }
.container-fluid .container { width: initial; }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>This represents a container class. The content below should align with the content of these containers.</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row flex">
<div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-0">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h4>Column 1</h4>
<p>The content in this section needs to align with the container class mentioned above.</p>
</div>
</div>
</div>
</div>
<div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-0">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h4>Column 2</h4>
</div>
</div>
</div>
</div>
</div>
</div>