Skip to main content
mc31803971
Inspiring
August 23, 2022
Answered

Move carousel arrows to caption

  • August 23, 2022
  • 1 reply
  • 833 views

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.

    https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_carousel

     


    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....

    1 reply

    mc31803971
    Inspiring
    August 23, 2022

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

     

    BenPleysier
    Community Expert
    Community Expert
    August 23, 2022

    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!