Twitter Bootstrap Question posted in

How to change the background color for Bootstrap's carousel plugin? – Twitter bootstrap

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 https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h for my carousel. 

<div class="container" id="slides">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <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&size_mode=3" alt="Connect K project" style="width:100%;">
      </div>

      <div class="item">
        <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&size_mode=3" alt="Chicago" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://photos-4.dropbox.com/t/2/AADJdh6q_qeKgWjhsL07M2NQH81JFg8Mx51O7G60oeRlGw/12/611886439/jpeg/32x32/1/_/1/2/MedAppJam.JPG/ELbFkPkEGPMBIAIoAg/aQ1lqISwGTPXaGi6jgbJoeMmDcQUtcKoIyWTrZADmPI?size=1280x960&size_mode=3" alt="MedAppJam project" style="width:100%;">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

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.

#slides{
  color: grey;
  background-color: grey !important;
}

.carousel{
  color: grey;
  background-color: grey !important;
}
.carousel .item{
  color: grey;
  background-color: grey;
}

https://codepen.io/chukt/pen/wqQqyL?editors=1100#0 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 change twitter bootstrap carousel background? and it doesn’t seem to work. Can anyone explain this to me?

Tags:

4

Answers


  1. 0

    The problem you have at the moment is that the carousel has the container class applied and is, therefore, adding a fixed width to the element. The white you’re seeing either side is actually the background colour of the body.

    There are two ways around this (I’ve shortened the code for the example):

    Full width

    <!-- Remove the container class from the slides div -->
<div id="slides">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->

        <!-- Wrapper for slides -->

        <!-- Left and right controls -->

    </div>
</div>

    Image width (shows grey background)

    <!-- Wrap carousel-inner in a container div -->
<div id="slides">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->

        <!-- Wrapper for slides -->
        <div class="container"> <!-- Added this line -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://lorempixel.com/1280/960" alt="Connect K project" style="width:100%;">
                </div>

                <div class="item">
                    <img src="http://lorempixel.com/1280/960" alt="Chicago" style="width:100%;">
                </div>

                <div class="item">
                    <img src="http://lorempixel.com/1280/960" alt="MedAppJam project" style="width:100%;">
                </div>
            </div>
        </div> <!-- Added this line -->

        <!-- Left and right controls -->

    </div>
</div>

    I’ve forked your codepen for an example: https://codepen.io/raptorkraine/pen/Gvaagm?editors=1100#0

    Login or Signup to reply.
  2. 0

    This seems a simpler way which worked for me (using bootstrap 4)

    <div id="my-carousel-bg": class="carousel-inner">

    with css as usual…

    #pwb-carousel-bg {
background-color: grey;
}
    Login or Signup to reply.
  3. 0

    Simply use the already existing class “carousel-inner” in your css file as below, here for example change the background color to black :

    .carousel-inner {
background-color: black !important;
}
    Login or Signup to reply.
  4. 0 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev" style="background:none;">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next" style="background:none;">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
</a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search