Change Bootstrap 4 Carousel Control Colors

Question

I am using a white background for a Carousel using Bootstrap 4.0 and would like to change the color of the controls. It seems that bootstrap now uses SVG for their carousel

Answer 1

There's no need for any unnecessary css hacks.

If you want to modify any Bootstrap css (or the carousel control colors in particular), you can easily do that.

Here are the rules that control the color of the carousel controls:

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

Replace the fff in the fill='%23fff' parts with the hex code of the desired color.

Here's a working code snippet where fill='%23fff' has been replaced with fill='%23f00' for red instead of white:

    



    

        

            

                

                    

                        
                    
                    

                        
                    
                    

                        
                    
                
                
                    
                    Previous
                
                
                    
                    Next