Move carousel arrows to caption

How can I move Bootstrap Carousel arrows to the caption?

This topic has been closed for replies.

Correct answer mc31803971

Depends on image size. On larger devices, the arrows may disappear from view.

One option is to use very wide carousel images that are 100% width & height. Or as you say, just use the default pagers without arrows.

Always test on multiple browsers & devices.

Wide images won't work as they are different sizes and must be uncropped.

Tentative success report: I removed the word "carousel" from controls and put the controls in a div inside the indicator ol class. Still testing....

Inspiring

... or at least to above the caption and below the image

Community Expert

Add the following style rules. Adjust the values as needed.

.carousel-control-prev, .carousel-control-next {
    top: auto;
    bottom: 50px;
}

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up