Twitter Bootstrap Carousel Grey Bars

Profile picture for lowcoupling
lowcoupling

I am trying to use the Twitter Bootstrap Carousel is there any way not display the vertical grey bars at both the sides of the carousel?

You can do it with CSS

<!-- language: lang-css --> 
.carousel-control.left, 
.carousel-control.right {
    background-image: none
}

##jsFiddle

##How to do it yourself:

  1. Go to a site that has the bootstrap carousel. I went to the documentation page
  2. In Chrome (or whatever browser you like) use Inspect Element to see a list of all the matched CSS rules. Something is giving it that styling, and it's going to have to live here.
  3. Find one that looks like the culrprit and uncheck the box to see if removing that style makes a difference
  • demo

Note: You shouldn't change bootstrap.css, but you can override it by placing your changed css later. If it doesn't work, try !important

Best of luck!