One of the challenges I faced was trying to space out the three columns in my Bootstrap row while also splitting each column into two parts. After doing some research, here's the solution I came up with:
<div class="container row h-100 mx-auto" style="margin-top: -60px;">
<div class="col-sm-4 ">
<div class="mx-3">
<div class="" style="width:50%; float: right;">
<h4>About Us</h4>
<p>Find out more about our team of working professionals</p>
</div>
</div>
</div>
<div class="col-sm-4 ">
<div class="mx-3 rounded">
<div style="width: 50%; float: left;">
<i class="fa fa-users" aria-hidden="true"></i>
</div>
<div style="width: 50%; float: right;">
<h4>Our Purpose</h4>
<p>Come up with some stuff to be put in here</p>
</div>
</div>
</div>
<div class="col-sm-4 ">
<div class="mx-3">
<h4>Our products and services</h4>
<p>Check out our vast array of products and services that we offer.</p>
</div>
</div>
</div>
For reference, you can view how it looks here.
If you're experiencing issues adding a background color to your columns, it could be due to conflicting styles. You may have a CSS class named .card that affects the formatting. This class typically adds a rounded edge and white background to a div, potentially interfering with your desired styling.
To maintain spacing and alignment while adding a background color, consider adjusting the CSS properties within the .card class or creating a separate class specifically for the column backgrounds. By isolating the styling, you should be able to achieve the desired look without any formatting issues.