How to Remove The Default Bootstrap 3 Carousel Control Background Gradients

Remove bootstrap carousel gradient

Just add this: style="background:red !important"

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev" style="background:red !important">

to remove complete background: none;

bootstrap carousel remove gradient on carousel-control with .less

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

How to remove the white background from Bootstrap carousal?

Repair Bootstrap vertical carousel

I've simplified your code, fix bugs, improved vertical transition and indicators.

Please check the result: https://jsfiddle.net/glebkema/pok6mf12/

$('.carousel').carousel({  interval: 3000})

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');
/* customize */.carousel,.carousel-inner .item,.carousel-inner img {  height: 520px;  width: 100%;}.carousel .item {  background-color: #777;}.carousel-caption {  background-image: linear-gradient(90deg, rgba(57, 55, 67, 0.5), rgba(12, 11, 17, 0.5));  color: white;  left: 0;  padding-right: 90px;  right: 0;  text-align: right;  text-transform: uppercase;}.carousel-caption h1 { font-size: 4em; }.carousel-caption p  { font-size: 2em; }
/* vertical indicators */.carousel-indicators {  top: 50%;  left: auto;  right: 3%;  bottom: auto;  transform: translateY(-50%);  width: auto;}.carousel-indicators li {  display: block;  height: 12px;  margin: 9px 1px;  width: 12px;}.carousel-indicators .active {  height: 14px;  margin: 8px 0;  width: 14px;}
/* vertical transition */@media all and (transform-3d), (-webkit-transform-3d) {  .vertical> .carousel-inner > .item {    -webkit-transition: -webkit-transform .6s ease-in-out top;       -moz-transition:    -moz-transform .6s ease-in-out top;        -ms-transition:     -mz-transform .6s ease-in-out top;         -o-transition:      -o-transform .6s ease-in-out top;            transition:         transform .6s ease-in-out top;
    -webkit-backface-visibility: hidden;            backface-visibility: hidden;    -webkit-perspective: 1000px;            perspective: 1000px;  }  .vertical> .carousel-inner > .item.next,  .vertical> .carousel-inner > .item.active.right {    left: 0;    -webkit-transform: translate3d(0, 100%, 0);            transform: translate3d(0, 100%, 0);  }  .vertical> .carousel-inner > .item.prev,  .vertical> .carousel-inner > .item.active.left {    left: 0;    -webkit-transform: translate3d(0, -100%, 0);            transform: translate3d(0, -100%, 0);  }  .vertical> .carousel-inner > .item.next.left,  .vertical> .carousel-inner > .item.prev.right,  .vertical> .carousel-inner > .item.active {    left: 0;    -webkit-transform: translate3d(0, 0, 0);            transform: translate3d(0, 0, 0);  }}

<div id="carousel-example-generic" class="carousel slide vertical" data-ride="carousel">  <ol class="carousel-indicators">    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>    <li data-target="#carousel-example-generic" data-slide-to="1"></li>    <li data-target="#carousel-example-generic" data-slide-to="2"></li>  </ol>
  <div class="carousel-inner">    <div class="item active first">      <div class="carousel-caption">        <h1>Check our video</h1>        <p>Learning in 6 weeks</p>        <a class="btn btn-lg btn-primary" href="#" role="button"><i class="fa fa-play-circle-o" aria-hidden="true"></i></a>      </div>    </div>
    <div class="item second">      <div class="carousel-caption">        <h1>Check our video</h1>        <p>Learning in 6 weeks</p>        <a class="btn btn-lg btn-primary" href="#" role="button"><i class="fa fa-play-circle-o" aria-hidden="true"></i></a>      </div>    </div>
    <div class="item third">      <div class="carousel-caption">        <h1>Check our video</h1>        <p>Learning in 6 weeks</p>        <a class="btn btn-lg btn-primary" href="#" role="button"><i class="fa fa-play-circle-o" aria-hidden="true"></i></a>      </div>    </div>  </div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Cannot remove shaded background of carousel - CSS

I've checked the online example, the carousel adds the class active to the current active item.
In your style.css the active class has the following style:

.active{
    background: url("images/active-bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    color: #fff !important;
}

you just need to remove the background property and you'll have a transparent background for every carousel item.

Cant remove background color from bootstrap nav over image slider

• Change below height to 90%.

.carousel-inner {
height: 100%;
}

• And remove the top-margin for #imagebox.

cannot give top:0 for .carousel-control with the current markup since it will overlap the menu. Otherwise you should give white background color to the #nav-wrapper and bring it to front using z-index.

---

Another suggestion is that it will be better if you could add a new div with <div class="spotlight"> wrapping carousel-indicators, carousel-indicators, left carousel-control and right carousel-control.

.spotlight {
   position: relative;
   width: 100%;
   height: 90%;
}

Getting gray colour in the left and right of my Carousel Slider . How to remove gray colour?

You'll need to change both classes:

.carousel-control.left,
.carousel-control.right {
  background: transparent;
}

It has a default value of:

background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);

UPDATE
Both arrows use the Bootstrap icons, so you'll have to change both classes:

.glyphicon.glyphicon-chevron-left,
.glyphicon.glyphicon-chevron-right {
  color: red; //Example
}

Those classes are Bootstrap standard classes, if you have a global style file, this will change all occurrences of both classes, thus changing all the color of all the other arrows.

Cannot remove white space below Carousel Bootstrap and Social Media icon in Mobile Version

Those icons are located within

    <div class ="bottom">
      <div class = "logos">
              Logos Are Here
      </div>
    </div>

Therefore if you check those classes in CSS you will find:

.bottom {
    margin-top: auto; 
}

and

.logos {
    display: flex !important;
    flex-direction: row;
    background-color: black;
}

By simply changing margin-top from auto to the perspective percentage you can fix this issue:

.bottom {
        margin-top: 1%; 
    }

Is this what you were looking for?

---

Related Topics