How to Move Bootstrap 3 Carousel Caption Below Images

How to move bootstrap 3 carousel caption below images?

Start by changing the position of the caption element from absolute to relative:

.carousel-caption {
    position: relative;
    left: auto;
    right: auto;
}

Demo

display carousel caption below carousel images

it's enough to use jquery codes below:
'#myCarousel' is id of your carousel

 $(document).ready(function () {
    $(window).on('resize', function () {
    if (window.matchMedia('(max-width: 767px)').matches) {
      $("#myCarousel .item img").next().removeClass('carousel-caption').addClass('caption');     
       } 
        else {
        $("#myCarousel .item img").next().removeClass('caption').addClass('carousel-caption');
      }
   });
     });

Bootstrap Carousel - caption below the image without effecting the height of the control?

JQuery would be the way to go I believe.

Take a look at: http://www.bootply.com/wngSniePbu

Only requires a small amount of JQuery and one additional CSS class.

How to place Bootstrap Carousel image captions outside the carousel div?

Based on Twitter Bootstrap Carousel - access current index

You can add the code below to your javascript (after loading jquery / bootstrap)

$(function() {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('#right h1').html(caption.html());
caption.css('display','none');
$(".carousel").on('slide.bs.carousel', function(evt) {

   var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index()+1) + ') .carousel-caption');
   $('#right h1').html(caption.html());
   caption.css('display','none');
});
});

also see: http://jsfiddle.net/4tMfJ/3/

Bootstrap 4 Carousel Captions on Bottom

I have updated the carousel control absolute position to make it center horizontally. Now the control will not overlap the caption in any position.

jQuery(function ($) {    $('.carousel').carousel();    var caption = $('div.carousel-item:nth-child(1) .media-content');    $('.new-caption-area').html(caption.html());    caption.css('display', 'none');
    $(".carousel").on('slide.bs.carousel', function (evt) {        var caption = $('div.carousel-item:nth-child(' + ($(evt.relatedTarget).index() + 1) + ') .media-content');        $('.new-caption-area').html(caption.html());        caption.css('display', 'none');    });});

.media-gallery {    font-family: "Arial";    font-size: 14px;}
.carousel-caption {    position: relative;    border: 1px solid black;    top: 0;    left: 0;    color: black;    text-align: left;    padding: 20px;}
.carousel .carousel-control-next,.carousel .carousel-control-prev {    z-index: 999;    width: 45px;    height: 45px;    font-size: 30px;    background: rgba(255, 255, 255, 0.25) none repeat scroll 0 0;    border-radius: 100%;    padding: 0 0 10px 0px;    line-height: 20px;    -webkit-transform: translateY(-50%);    transform: translateY(-50%);}
.carousel .carousel-control-prev,.carousel .carousel-control-next {    top: 50%;    bottom: 50%;    width: 5%;    opacity: 1;    position: absolute;}
.carousel .carousel-control-prev,.carousel .carousel-control-next {    font-size: 30px;    background: none;}
.carousel .carousel-control-next {    right: 20px;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<section class="media-gallery bg-light">    <div class="container">        <div class="row d-flex justify-content-center">            <div class="col-12 col-lg-11">                <div id="carouselExampleControls" class="carousel slide captioned" data-ride="carousel">                    <div class="carousel-inner">                        <div class="carousel-item active">                            <img class="d-block w-100" src="https://loremflickr.com/1000/667?r=16" alt="First slide">                            <div class="media-content">                                <p class="media-credit"><i class="fas fa-camera"></i> <span class="name">Person</span> / <span class="agency">Agency</span></p>                                <div class="media-caption">                                    <p>This is paragraph text that is the caption of the image. I wonder what happens if this caption is very long? For example, what does it do to the credit?</p>                                </div>                            </div>                        </div>                        <div class="carousel-item">                            <img class="d-block w-100" src="https://loremflickr.com/1000/667?r=136" alt="First slide">                            <div class="media-content">                                <p class="media-credit"><i class="fas fa-camera"></i> <span class="name">Person</span> / <span class="agency">Agency</span></p>                                <div class="media-caption">                                    <p>This is paragraph text that is the caption of the image.</p>                                </div>                            </div>                        </div>                        <div class="carousel-item">                            <img class="d-block w-100" src="https://loremflickr.com/1000/667?r=316" alt="First slide">                            <div class="media-content">                                <p class="media-credit"><i class="fas fa-camera"></i> <span class="name">Person</span> / <span class="agency">Agency</span></p>                                <div class="media-caption">                                    <p>This is paragraph text that is the caption of the image. This caption is slightly different than the other, though idk why.</p>                                </div>                            </div>                        </div>                    </div>                    <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">                        <span class="carousel-control-next-icon" aria-hidden="true"></span>                        <span class="sr-only">Next</span>                    </a>                </div>                <div class="new-caption-area"></div>            </div>        </div>    </div></section>

Carousel captions not overlaying image on mobile

i think this block of code will solve your problem, add them on your custom .css file...
let me know if you have any questions

@media screen and (max-width: 680px) {
  .carousel-caption {
    top: 0;
  }
  .carousel-caption h1 {
    font-size: 1.5rem;
  }
  .carousel-caption .btn {
    padding: .3rem 1rem;
    font-size: 1rem;
  }
  .carousel-control-prev,
  .carousel-control-next {
    display: none;
  }
  .carousel-indicators {
    display: none;
  }
  .carousel-item {
    height: 330px;
  }
}

/*max-width:680px*/

@media screen and (max-width: 420px) {
  .carousel-item {
    height: 220px;
  }
} 

How to make carousel-caption appear on top?

change css of .carousel-caption

.carousel-item .carousel-caption {
  position: static;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

working fiddle here

---

Related Topics