Search code examples
javascripthtmlcsstwitter-bootstrap-3carousel

Bootstrap3 Image Below Caption, Rescale Image To Fit

I'm creating a simple carousel with HTML and JS. I have it mostly how I want it to look now, unfortunately there are a few issues:

Running The Snippet:

1) I want the caption to be in the space below the image, not on it. I've done what I can with CSS based on my minor skills and can't figure it out.

2) Also, I want the pictures resized and centred so the fit into the carousel, instead of most of it being cropped out.

Carousel Juts Out

1) I've made the website responsive, and the container has style="text-align:center;text-align: justify;". However if you look at the image below, in some cases when the browser window is minimised,the carousel juts out. How do I resolve this?

enter image description here

.carousel-caption {
  position: relative;
  left: auto;
  top: auto;
  bottom: -95px;
}

.carousel-inner {
  overflow: visible;
  padding-bottom: 95px;
}

#serviceSlider .item {
  height: 400px;
}

#slide1{
  background:url('https://cdn.pixabay.com/photo/2020/03/31/19/20/dog-4988985_960_720.jpg'); center no-repeat;
}

#slide2{
  background:url('https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg'); center no-repeat;
}

#slide3{
  background:url('https://cdn.pixabay.com/photo/2018/05/09/22/44/piglet-3386356_960_720.jpg'); center no-repeat;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
    .carousel-inner>.item>img,
    .carousel-inner>.item>a>img {
      width: 100%;
      margin: auto;
    }
  </style>

    <div class="container" style="text-align:center;text-align: justify;">
      <br>
      <div id="serviceSlider" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#serviceSlider" data-slide-to="0" class="active"></li>
          <li data-target="#serviceSlider" data-slide-to="1"></li>
          <li data-target="#serviceSlider" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active" id="slide1">
            <div class="carousel-caption">
              <h3>Dog</h3>
              <p>Cute Corgi.</p>
            </div>
          </div>

          <div class="item" id="slide2">
            <div class="carousel-caption">
              <h3>Cat</h3>
              <p>Cute cat.</p>
            </div>
          </div>

          <div class="item" id="slide3">
            <div class="carousel-caption">
              <h3>Pigs</h3>
              <p>Sleepy pigs.</p>
            </div>
          </div>

        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#serviceSlider" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#serviceSlider" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>

Solution

  • You don't have to do much just make some changes in class of caption carousel. Try copy and pasting to see if it works. No additional changes in css.

    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://cdn.pixabay.com/photo/2020/03/31/19/20/dog-4988985_960_720.jpg" class="d-block w-100" alt="...">
            <div class="text-center d-none d-md-block">
                <h5>First slide label</h5>
                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://cdn.pixabay.com/photo/2020/03/31/19/20/dog-4988985_960_720.jpg" class="d-block w-100" alt="...">
            <div class="text-center d-none d-md-block">
                <h5>Second slide label</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://cdn.pixabay.com/photo/2020/03/31/19/20/dog-4988985_960_720.jpg" class="d-block w-100" alt="...">
            <div class="text-center d-none d-md-block">
                <h5>Third slide label</h5>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            </div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>