I've implemented the Bootstrap 4 Carousel on my website and it's functioning properly. However, I'm facing an issue where I need to align the slider image in the center of the carousel.
Currently, the image is aligned to the left side, causing it to get cut off on the right side when the browser is resized. I want the image to be centered so that it gets cut off on both sides equally.
/* SLIDER
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 0;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
bottom: 3rem;
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel-item {
height: 30rem;
background-color: #777;
}
.carousel-item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 40rem;
margin: 0 auto;
}<!-- Slider -->
<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>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="first-slide" src="img1.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption text-left">
<h1>Placeholder 1</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p><a class="btn btn-lg btn-outline-warning" href="#" role="button">Book Now</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="second-slide" src="img2.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Placeholder 2</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p><a class="btn btn-lg btn-warning" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="img3.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption text-right">
<h1>Placeholder 3</h1>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-outline-warning" href="#" role="button">Browse Gallery</a></p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#Slider" 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="#Slider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>