I'm new to learning Bootstrap and I'm looking have 2 col-md-6 divs next to one another having one background-color blue and the other white. How can I change one background color and not both?
I'm trying to get a look similar to below the full width photo on this website. Minus the image on the left. I just want a block white and a block blue. http://tympanus.net/Freebies/Boxify/
CSS
.bg-primary {
background-color: #1a52c6;
}
HTML
<section class="bg-primary" id="about">
<div class="container">
<div class="row">
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="col-md-6">
<h2 class="section-heading text-center">Title</h2>
<p class="text-faded text-center">.col-md-6</p>
</div>
<div class="col-md-6 blue">
<h2 class="section-heading text-center">Title</h2>
<p class="text-faded text-center">.col-md-6</p>
</div>
</div>
</div>
</div>
This question is related to
css
Not Bootstrap specific really... You can use inline styles or define a custom class to specify the desired "background-color".
On the other hand, Bootstrap does have a few built in background colors that have semantic meaning like "bg-success" (green) and "bg-danger" (red).
You could hard code it.
<div class="col-md-6" style="background-color:blue;">
</div>
<div class="col-md-6" style="background-color:white;">
</div>
Source: Stackoverflow.com