Bootstrap: change background color - css

Question

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>

Answer 1

You can target that div from your stylesheet in a number of ways.
Simply use
.col-md-6:first-child {
background-color: blue;
}
Another way is to assign a class to one div and then apply the style to that class.
<div class="col-md-6 blue"></div>
.blue {
background-color: blue;
}
There are also inline styles.
<div class="col-md-6" style="background-color: blue"></div>
Your example code works fine to me. I'm not sure if I undestand what you intend to do, but if you want a blue background on the second div just remove the bg-primary class from the section and add you custom class to the div.
.blue {
background-color: blue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="about">
<div class="container">
<div class="row">
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="col-xs-6">
<h2 class="section-heading text-center">Title</h2>
<p class="text-faded text-center">.col-md-6</p>
</div>
<div class="col-xs-6 blue">
<h2 class="section-heading text-center">Title</h2>
<p class="text-faded text-center">.col-md-6</p>
</div>
</div>
</div>
</section>

Answer 2

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>

Answer 3

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).