10

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>
1
  • This isn't really a Bootstrap question but rather a CSS and HTML question.
    – dokgu
    Oct 7, 2016 at 18:32

3 Answers 3

12

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>

4
  • Hmm.. That works thank you! So I downloaded a template and was trying to adopt it to my own style. This is how my code looks, I'll update the main question.
    – Zachary
    Oct 7, 2016 at 18:36
  • So, where are you having the problem now? Oct 7, 2016 at 18:52
  • When I use my code above, the entire section is blue. When I change the background to the divs it only works for the P and H2 tag. Should I remove the section and wrap each col-md-6 into a div with a definded bg?
    – Zachary
    Oct 7, 2016 at 18:54
  • Answer update. Not sure if that is what you are looking for, though. Oct 8, 2016 at 1:23
3

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>
1
  • This will work but I do suggest staying clear of inline-styling.
    – dokgu
    Oct 7, 2016 at 18:33
2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.