[css] Bootstrap: change background color

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

The answer is


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>