Kristi Simonson
Kristi Simonson

Reputation: 515

Bootstrap 3 Carousel buttons are off-center

I'm using the Bootstrap 3 carousel and the Previous and Next arrows are slightly off center. I'm not sure what's causing the problem. The example page on bootstrap carousel looks OK.

You can see the arrows problem in the main slideshow on this page, and also just above the footer:

I really need to bring that right arrow back within the confines of my grid.

http://webdev.craftonhills.edu/

Upvotes: 0

Views: 1090

Answers (1)

Tim
Tim

Reputation: 1690

There are supposed to be margins to the glyphicon arrows. Try this:

.carousel-control .glyphicon-chevron-left, 
.carousel-control .glyphicon-chevron-right {
   position: absolute;
   top: 50%;
   z-index: 5;
   display: inline-block;
   margin-right: -15px;
   margin-left: -15px;
}

This should center your arrows within the carousel-control.

Upvotes: 2

Related Questions