Search code examples
twitter-bootstrap

How to customize Bootstrap Carousel Controls

How I can customize the Bootstrap Carousel Controls? For example, I would like to change the size of the controls, or bg colors. Also, how can I add a background image to the controls?

I tried to replace the ‹ with bootstrap Icons, but it was positioned at the top of the control and didn't work properly.

<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">
    <i class=" icon-arrow-right icon-white"></i>
</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a>

Output:

enter image description here

Solution

  • What I see in your screenshot could be adjusted via font-size and line-height properties.

    Bootstrap is a CSS framework so customization is just a matter of overriding defaults, often using an id tag or something similar.