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 --><aclass="left carousel-control"href="mainHomeCarouse"role="button"data-slide="prev"><spanclass="glyphicon glyphicon-chevron-left"aria-hidden="true"></span><spanclass="sr-only">Previous</span></a><aclass="right carousel-control"href="mainHomeCarouse"role="button"data-slide="next"></a><spanclass="glyphicon glyphicon-chevron-right"aria-hidden="true"></span><spanclass="sr-only">Next</span>