Adding background to divs breaks design - html

Question

I have a bootstrap row on my page that's divided into three columns. I wanted to add some space between the 3 columns and split each individual column internally into 2 parts. After extensive Googling, this is what I arrived on
<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 professionls</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>
Here's how it looks:
Ignore the three blue lines, that is experimental code.
Now it all works fine except I can't add a background colour to my columns. Every time I try adding any colour, it just doesn't show up. I write the line something like this:
<div class="mx-3 rounded" style="background: red;">
Now apart from this, I have a .card class defined in my main CSS file, it goes as follows:
.card{
border-radius: 15px;
}
That's it. Adding this class gives a rounded edge to a div (column) and adds a white background. However, every time I do that, the spacing is gone and the content inside my columns just sticks to the left instead of floating left and right.
How can I add a background to these columns without breaking any formatting? Or does anyone have an idea what's going on here?

Answer 1

First of all, I would suggest you should only have rows inside containers. If you put .container and .row together, the Bootstrap grid system doesn't work anymore because rows don't have the flexbox container parent.
Secondly, if you want 2 columns internally, why not declare a row and 2 columns? You've used that to create 3 column outer layout already. Using inline styles with floats defeat the purpose of using Bootstrap flexbox style grid system:
<div class="rounded">
<div class="row">
<div class="col-6">...</div>
<div class="col-6">...</div>
</div>
</div>
You can also utilize the built-in .card class to help you with the paddings:
<div class="row">
<div class="col-sm-4">
<div class="card border-0">
<div class="card-body">
<div class="row">
<div class="col-6"></div>
<div class="col-6">
<h4 class="card-title">Our Purpose</h4>
<p class="card-text">
...
</p>
</div>
</div>
</div>
</div>
</div>
</div>
To add background color to the .card, it's as easy as putting background color classes in:
<div class="card border-0 bg-danger">
...
</div>
demo: https://jsfiddle.net/davidliang2008/ed8bav14/36/