Bootstrap change background color

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         lt section class  bg-primary  id  about  gt           lt div class  container  gt               lt div class  row  gt                 lt  -- Columns are always 50  wide  on mobile and desktop -- gt      lt div class  col-md-6  gt     lt h2 class  section-heading text-center  gt Title lt  h2 gt     lt p class  text-faded text-center  gt  col-md-6 lt  p gt     lt  div gt      lt div class  col-md-6 blue  gt     lt h2 class  section-heading text-center  gt Title lt  h2 gt     lt p class  text-faded text-center  gt  col-md-6 lt  p gt     lt  div gt     lt  div gt                lt  div gt                   lt  div gt

User · Accepted Answer

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.

_x000D_

.blue {_x000D_
  background-color: blue;_x000D_
}

_x000D_

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
_x000D_
<section id="about">_x000D_
  <div class="container">_x000D_
    <div class="row">_x000D_
    <!-- Columns are always 50% wide, on mobile and desktop -->_x000D_
      <div class="col-xs-6">_x000D_
        <h2 class="section-heading text-center">Title</h2>_x000D_
        <p class="text-faded text-center">.col-md-6</p>_x000D_
      </div>_x000D_
      <div class="col-xs-6 blue">_x000D_
        <h2 class="section-heading text-center">Title</h2>_x000D_
        <p class="text-faded text-center">.col-md-6</p>_x000D_
      </div>_x000D_
    </div>_x000D_
  </div>_x000D_
</section>

_x000D_

User · Answer

You could hard code it    lt div class  col-md-6  style  background-color blue   gt   lt  div gt    lt div class  col-md-6  style  background-color white   gt   lt  div gt

User · Answer

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

[css] Bootstrap: change background color

Examples related to css