Search code examples
javascripthtmlcssbootstrap-4viewport-units

How to make bootstrap carousel image in the verticle center with viewport

I have a page http://jatinraikwar.com/w/slider.html

In this want to make an image verticle center. Using bootstrap carousel.

The problem is, wants to show the image as it is, but in the center.

Code:

<style>
.image-style {
    max-width: 100vw;
    max-height: 100vh;
    margin: auto;
}
</style>

<body style="background-color: black;">

    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="images/i0.jpg" class="d-block image-style" alt="...">
            </div>
            <div class="carousel-item">
                <img src="images/i1.jpg" class="d-block image-style" alt="...">
            </div>
    <div class="carousel-item">
      <img src="images/i5.jpg" class="d-block image-style" alt="...">
    </div>
            <div class="carousel-item">
                <img src="images/i3.jpg" class="d-block image-style" alt="...">
            </div>
            <div class="carousel-item">
                <img src="images/i0.jpg" class="d-blockimage-style" alt="...">
            </div>
    <div class="carousel-item">
      <img src="images/i5.jpg" class="d-block" style="max-width: 100vw; max-height: 100vh; margin: auto;" alt="...">
    </div>
        </div>
    </div>
</body>
Solution

  • You can use flexbox and add 100vh to your .carousel and .carousel-inner. This is make images vertically centered. Try adding the below snippet to your page.

    .carousel,
.carousel-inner {
  height: 100vh;
  display: flex;
  align-items: center;
}