CODEWITHSUNDEEP
csscarouselbootstrap-4twitter-bootstrap-4
Andrei Lazar
Andrei Lazar

Reputation: 75

How to position carousel indicators in Bootstrap 4

I am trying to move the indicators under the slider image by giving .carousel-indicators a bottom: -50px; but the indicators just disappear. Now I am guessing this has something to do with the overflow: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;
}

Upvotes: 7

Views: 31341

Answers (6)

teja yalamarthi
teja yalamarthi

Reputation: 1

I have tried the below and worked for me!

.carousel-indicators{
position: absolute;
bottom: -50px;
}

Upvotes: 0

Kusal Gunathilake
Kusal Gunathilake

Reputation: 1

I tried to place this indicators at the bottom center of background image slider. Its working.

.carousel-indicators{
  position:absolute;
  right:0;
  bottom:150px;
  left:0px; 
 }

Upvotes: 0

jeppree
jeppree

Reputation: 11

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.

Upvotes: 1

Reece Anderson
Reece Anderson

Reputation: 81

Using this code worked for me!

 .carousel-indicator {
   position: relative;
   bottom: -50px;
 }

This pushed my indicators down just enough to get my paragraph visible.

Upvotes: 1

dferenc
dferenc

Reputation: 8126

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.

Upvotes: 13

August
August

Reputation: 2113

In order to use bottom, the element needs to be positioned relative, absolute or fixed. If it is relative positioned, the bottom property makes the element's bottom edge to move above/below its normal position.

.carousel-indicators {
position: absolute;
bottom: -50px;
}

If it already positioned correctly, bottom:-50px might move the element below visible area of the parent element #slider. Try to remove overflow: hidden; from #slider and check where carousel-indicators will be positioned.

Upvotes: 0

Related Questions