Removing arrows in Bootstrap Carousel

Question

here is the homepage of my blog www.lowcoupling.com I'd like not show the left and right arrows in the bootstrap carousel I have tried

.glyphicon-chevron-right{
     display:none;
}

(and the same thing for the left arrow) but it does not seem to work.

Answer 1

This will hide the buttons

.right.carousel-control, .left.carousel-control {
    display: none;
}

If you still want to be able to click where the button is drawn, do:

.right.carousel-control, .left.carousel-control {
    opacity: 0;
    filter:alpha(opacity=0); /* IE support */
}

Answer 2

I took a quick gander, and you are almost there, but Bootstrap's css is taking precidence over your css. Bootstrap has:

.carousel-control .glyphicon-chevron-right{
    ...
    display:inline-block;
}

If you were to assign an arbitrary point value to this, Bootstrap is providing '2 points' to provide the style 'inline-block'.

Because your css is loaded after Bootstrap, simply putting an extra class (and matching Bootstrap's 2 points) before ".glyphicon-chevron-right" should do the trick.

.carousel .glyphicon-chevron-right{display:none;}

Or, if you want your override to be "stronger", putting an id in front gives your override a higher value (approx 256)

#myCarousel .glyphicon-chevron-right{display:none;}