I'm currently attempting to add a div containing 4 fontawesome icons at the bottom of a bootstrap 4 carousel. However, I am facing an issue where the div is positioned right next to the menu button. My goal is to achieve a layout similar to this: https://i.sstatic.net/IzrmT.jpg I have successfully set up the carousel, but I am unsure about how to properly position the div at the bottom.
This is the HTML structure:
<div id="home-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="<?php echo base_url('assets/images/slider1.jpg');?>" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h2 class="animated bounceInRight to-deelay">Order Your Favorite Meal</h2>
<button class="btn btn-primary menu-button animated bounceInLeft to-deelay">Menu</button>
<div class="test-div">
test
</div>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="<?php echo base_url('assets/images/slider2.jpg');?>" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h2 class="animated bounceInRight to-deelay">Order Your Favorite Meal</h2>
<button class="btn btn-primary menu-button animated bounceInLeft to-deelay">Menu</button>
<div class="test-div">
test
</div>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="<?php echo base_url('assets/images/slider3.jpg');?>" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h2 class="animated bounceInRight to-deelay">Order Your Favorite Meal</h2>
<button class="btn btn-primary menu-button animated bounceInLeft to-deelay">Menu</button>
<div class="test-div">
test
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#home-carousel" 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="#home-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
Here is the CSS styling involved:
.carousel-caption{
padding-bottom: 150px;
}
.carousel-caption h2{
font-size: 50;
text-transform: uppercase;
padding-bottom: 100px;
}
.carousel-caption{
color: black;
font-size: 25px;
font-weight: bold;
}
.to-deelay{
animation-delay: 0.5s;
}
.menu-button{
width: 160px;
background-color: #C0B283;
border: 0;
}
.carousel-caption button{
text-align:center;
background: linear-gradient(to right, #C0B283 50%,#DCD0C0 50%);
background-size: 200% 100%;
transition:all 1s ease;
}
.carousel-caption button:hover{
background-position: right bottom;
}
.test-div{
width: 70%;
background-color: red;
margin: 0 auto;
}
Furthermore, what would be the most effective way to space out the elements within the carousel caption?