Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change color of carousel left/right buttons

I want to change the color of the left and right buttons on my carousel. I tryed with background color, but doesnt work. How do i change it?

here is my carousel code:

<div id="myCarousel" class="carousel slide">
                    <div class="carousel-inner">
                        <div class="item active">
                            <div class="col-xs-4"><a href="#"><img src="<?php bloginfo('template_url');?>/images/html_brand.jpg" class="img-responsive"></a></div>
                            <div class="col-xs-4"><a href="#"><img src="<?php bloginfo('template_url');?>/images/css_brand.jpg" class="img-responsive"></a></div>
                            <div class="col-xs-4"><a href="#"><img src="<?php bloginfo('template_url');?>/images/js_brand.jpg" class="img-responsive"></a></div>
                        </div>
                        <div class="item">
                            <div class="col-xs-4"><a href="#"><img src="<?php bloginfo('template_url');?>/images/jq_brand.jpg" class="img-responsive"></a></div>
                            <div class="col-xs-4"><a href="#"><img src="<?php bloginfo('template_url');?>/images/json_brand.jpg" class="img-responsive"></a></div>
                            <div class="col-xs-4"><a href="#"><img src="<?php bloginfo('template_url');?>/images/wp_brand.jpg" class="img-responsive"></a></div>
                        </div>

                    </div>

                    <!-- Controls-->
                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>

                </div>
like image 772
mheonyae Avatar asked Feb 07 '23 14:02

mheonyae


2 Answers

Change color property of this selector:

.carousel-control {
  color: #bada55;
}
like image 166
max Avatar answered Feb 20 '23 11:02

max


Default arrows are glyphicons which is text based icons. Change their color property.

For example

.glyphicon.glyphicon-chevron-right{
   color:red;
}
like image 20
T J Avatar answered Feb 20 '23 11:02

T J