CODEWITHSUNDEEP
htmlcssbootstrap-4
John
John

Reputation: 57

Bootstrap 4 carousel an image does not overlay other images

I am writing code with bootstrap 4. On my carousel images there should be another image ( a nice layer on the bottom), but with the code below it appears not on the bottom of the picture, but below it. Maybe you have any ideas how to fix this?

HTML 

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="img.img1.jpg" alt="First slide">
            <img class="ex-img" src="img/img2.jpg" alt="orange-img">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="img/img2.jpg" alt="Second slide">
            <img class="ex-img" src="img/img4.jpg" alt="orange-img">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="img/img5.jpg" alt="Third slide">
            <img class="ex-img" src="img/img6.jpg" alt="orange-img">
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

CSS 

.carousel .slide{
position:absolute;
}

.carousel-item img{
position:relative;
}

.ex-img{
position:relative;
}

Upvotes: 0

Views: 266

Answers (1)

Buddy
Buddy

Reputation: 91

I'm not sure what you meant though, but try changing the style like below

<style>
.carousel-item {
position: relative;  
}

.ex-img {
position: absolute;
left: 0;
bottom:0;
}
</style>

Upvotes: 1

Related Questions