How To Position The Bootstrap Carousel Controls To The Extreme Right And Extreme Left?

I have an image slider and I want the right and left controls to be positioned to the extreme right and extreme left respectively. and it should work for all widths. Is that possi

Solution 1:

You can change their positioning by changing carousel-control's width. In my view, 4% is great. You can change it to whatever you want.

.carousel-control {
    width: 4%
}

Solution 2:

you can update the element style

.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
  right: 0;  //or you can increase this
}

.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
  left: 0; //or you can increase this
}

Solution 3:

Having checkout out the sample code on Bootstrap's docs, it looks like a very simple CSS tweak:

.carousel-control.left .glyphicon {
    left: 0;
    margin-left: 0;
}
.carousel-control.right .glyphicon {
    right: 0;
    margin-right: 0;
}

Solution 4:

<!--            Left and right controls -->
<a class="left carousel-control" href="mainHomeCarouse" 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="mainHomeCarouse" role="button" data-slide="next"> </a>
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>