bootstrap carousel remove gradient on carousel-control with .less

Question

How do you remove the gradient background from the carousel-control in a carousel without overwriting but replacing in the .less files?

Answer 1

Just override the corresponding properties (see https://github.com/twbs/bootstrap/blob/v3.1.1/less/carousel.less#L81-L89), e.g.:

@import ".../bootstrap.less";

.carousel-control {
    &.left, &.right {
        background-image: none;
       .reset-filter(); // reset IE gradient filters
    }
}

Answer 2

For me, this worked (I needed orange color):

 .carousel-control.left, .carousel-control.right {
  background: orange !important;
  filter: progid: none !important;
  filter:none !important;
  background-image:none;
  outline: 0;
  opacity: 1;
 }