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 · 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

User · 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    lt div class  col-md-6 blue  gt  lt  div gt    blue     background-color  blue      There are also inline styles    lt div class  col-md-6  style  background-color  blue  gt  lt  div gt    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   x000D   blue   x000D    background-color  blue  x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt section id  about  gt  x000D     lt div class  container  gt  x000D       lt div class  row  gt  x000D       lt  -- Columns are always 50  wide  on mobile and desktop -- gt  x000D         lt div class  col-xs-6  gt  x000D           lt h2 class  section-heading text-center  gt Title lt  h2 gt  x000D           lt p class  text-faded text-center  gt  col-md-6 lt  p gt  x000D         lt  div gt  x000D         lt div class  col-xs-6 blue  gt  x000D           lt h2 class  section-heading text-center  gt Title lt  h2 gt  x000D           lt p class  text-faded text-center  gt  col-md-6 lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  section gt  x000D   x000D   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

[css] Bootstrap: change background color

Examples related to css