title: How to change the background color for Bootstrap's carousel plugin?
body: <p>So I'm having trouble trying to change the background color for the carousel. No matter what I do, it seems like the background is always white. I used the code from <a href="https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&amp;stacked=h" rel="noreferrer">https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&amp;stacked=h</a> for my carousel. </p>
  
  <pre><code>&lt;div class="container" id="slides"&gt;
    &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
      &lt;!-- Indicators --&gt;
      &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
      &lt;/ol&gt;
  
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner"&gt;
        &lt;div class="item active"&gt;
          &lt;img src="https://photos-3.dropbox.com/t/2/AADPmL6gjWHr1iYlah93suqa28cVuGlQ32aryhnqDI5JzA/12/611886439/jpeg/32x32/1/_/1/2/ConnectK%20carousel.jpg/ELbFkPkEGO0BIAIoAg/3oq_ZcBwruMHDZh7EsNU5B8UTbQE8n0KIgLWHmtklMQ?size=1280x960&amp;size_mode=3" alt="Connect K project" style="width:100%;"&gt;
        &lt;/div&gt;
  
        &lt;div class="item"&gt;
          &lt;img src="https://photos-4.dropbox.com/t/2/AADn_i5Z_NwIjiBSH8pnZB7nPAYz-tmRqxlDtEMGsRfOww/12/611886439/jpeg/32x32/1/_/1/2/DigitalBraille.jpg/ELbFkPkEGO0BIAIoAg/TzOhuN9b1r5yKEmQ43BWI7NkmaaSwdLR0ikRW4DnaXc?size=1280x960&amp;size_mode=3" alt="Chicago" style="width:100%;"&gt;
        &lt;/div&gt;
  
        &lt;div class="item"&gt;
          &lt;img src="https://photos-4.dropbox.com/t/2/AADJdh6q_qeKgWjhsL07M2NQH81JFg8Mx51O7G60oeRlGw/12/611886439/jpeg/32x32/1/_/1/2/MedAppJam.JPG/ELbFkPkEGPMBIAIoAg/aQ1lqISwGTPXaGi6jgbJoeMmDcQUtcKoIyWTrZADmPI?size=1280x960&amp;size_mode=3" alt="MedAppJam project" style="width:100%;"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Left and right controls --&gt;
      &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
        &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
        &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried using CSS styles to change the background but for some reason, it doesn't seem to work. And I'm not sure why. Here's the CSS I added to try to change the background color.</p>
  
  <pre><code>#slides{
    color: grey;
    background-color: grey !important;
  }
  
  .carousel{
    color: grey;
    background-color: grey !important;
  }
  .carousel .item{
    color: grey;
    background-color: grey;
  }
  </code></pre>
  
  <p><a href="https://codepen.io/chukt/pen/wqQqyL?editors=1100#0" rel="noreferrer">https://codepen.io/chukt/pen/wqQqyL?editors=1100#0</a> That's the link to my complete code. Sorry for all the weird colors. I was just messing around with it. Anyway, I've also checked out other questions like this one <a href="https://stackoverflow.com/questions/22544351/change-twitter-bootstrap-carousel-background#">change twitter bootstrap carousel background?</a> and it doesn't seem to work. Can anyone explain this to me?</p>