How to position carousel indicators in Bootstrap 4
Solution 1
Setting bottom: -50px
on .carousel-indicators
works fine to move the indicators below the carousel, however the result is not visible because of the overflow: hidden
, as you suspected correctly. The indicators are simply clipped, as they get out of the bounding box of the carousel.
Instead of setting the height and the overflow property of the #slider
itself, I would suggest to fix the height via the .carousel-item
class like as follows:
.carousel-item {
height: 350px;
}
.carousel-indicators li {
width: 10px;
height: 10px;
border-radius: 100%;
}
.carousel-indicators {
bottom: -50px;
}
This is not interfering with the positioning of the indicators.
A working example is available as a Codepen.
Solution 2
Using this code worked for me!
.carousel-indicator {
position: relative;
bottom: -50px;
}
This pushed my indicators down just enough to get my paragraph visible.
Solution 3
I was also having this problem recently, but I solve it by setting the div flex-direction: column-reverse. This might be too late but I think it can help those who are encountering the same problem.
Andrei Lazar
Updated on June 07, 2021Comments
-
Andrei Lazar almost 3 years
I am trying to move the indicators under the slider image by giving
.carousel-indicators
abottom: -50px;
but the indicators just disappear. Now I am guessing this has something to do with theoverflow:hidden
of the slider but I can't figure it out.Here is my code:
<div id="slider" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#slider" data-slide-to="0" class="active"></li> <li data-target="#slider" data-slide-to="1"></li> <li data-target="#slider" data-slide-to="2"></li> <li data-target="#slider" data-slide-to="3"></li> <li data-target="#slider" data-slide-to="4"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="header.jpg"> </div> <div class="carousel-item"> <img class="d-block w-100" src="slider2.jpg"> </div> <div class="carousel-item"> <img class="d-block w-100" src="slider3.jpg"> </div> <div class="carousel-item"> <img class="d-block w-100" src="slider4.jpeg"> </div> <div class="carousel-item"> <img class="d-block w-100" src="slider5.jpeg"> </div> </div> </div>
and CSS here:
#slider { height: 350px; overflow: hidden; width: 100%; } .carousel-indicators li { width: 10px; height: 10px; border-radius: 100%; } .carousel-indicators { bottom: -50px; }
-
Andrei Lazar over 6 yearsposition absolute does not solve it, the indicators still do not show