Bootstrap 4 Carousel responsive (image and text)

bootstrap carousel example
bootstrap 4 carousel multiple items
bootstrap multiple image slider
bootstrap image slider gallery
bootstrap 4 carousel card slider
bootstrap 3.3.7 carousel
bootstrap carousel multiple items
bootstrap carousel multiple items responsive free download

I've copy and paste the Carousel code example of the Bootstrap 4 official website, but I've realised that this resource isn't responsive.

You can try in this page: https://getbootstrap.com/docs/4.0/examples/carousel/ If you resize or open using a small cellphone for instance, the text will disapear. The image isn't responsive as well...

What I need do to make the image and the text responsives?

The HTML code:

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
      <div class="container">
        <div class="carousel-caption d-none d-md-block text-left">
          <h1>Example headline.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
      <div class="container">
        <div class="carousel-caption d-none d-md-block">
          <h1>Another example headline.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
      <div class="container">
        <div class="carousel-caption d-none d-md-block text-right">
          <h1>One more for good measure.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
        </div>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

CSS:

    /* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #5a5a5a;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
  bottom: 3rem;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
  background-color: #777;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

If you remove the class d-none the text displays when you resize the window. Here's more info on display properties: https://getbootstrap.com/docs/4.0/utilities/display/

Bootstrap 4 Carousel responsive (image and text), If you remove the class d-none the text displays when you resize the window. Here's more info on display properties:  I've copy and paste the Carousel code example of the Bootstrap 4 official website, but I've realised that this resource isn't responsive. Bootstrap 4 Carousel

Since your using bootstrap library, they have a class to simplify an image being responsive all you have to do is include the class "img-responsive" to the image you have. Ex:

<img class="first-slide" class="img-responsive" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">

Full width carousel with responsive images, Full Width Carousel with Responsive Images Bootstrap Code Snippet. The carousel code snippet provided on the Bootstrap 4 documentation has the class .​img-fluid which would require you to use <div class="container-fluid text-center​"> A Bootstrap 4 carousel is a slideshow component that will allow you to display slides of images and text within the component. A carousel is a good component for showcasing products, portfolio items, testimonials, and other items on your website.

.img-fluid is the way to go if it is bootstrap 4 you're using.

Latest Bootstrap Carousel Examples, Codes, Templates, Bootstrap carousel is responsive and interactive slideshow which is created for presenting for cycling through elements—images or slides of text—like a carousel. First slide--> <div class="carousel-item active"> <div class="col-md-4"​> <div  Bootstrap 4 Grid BS4 Grid System BS4 Stacked/Horizontal BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge BS4 Grid Examples Bootstrap 4 Theme BS4 Basic Template Bootstrap 4 Ref All Classes JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Toasts JS Tooltip

Bootstrap Carousel - examples, tutorial & advanced usage, Bootstrap 4 carousel with responsive slides by Andy. As the name of This carousel example has three slides with images and text. The slides  RESPONSIVE BOOTSTRAP CAROUSEL. Create a mobile, touch-swipe bootstrap 4 carousel that looks amazing on any devices and browsers. Add images, text, videos, thumbnails, buttons to slides, set autoplay, full-screen, full-width or boxed layout.

20 Stunning Free Bootstrap 4 Carousel Examples 2019, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markups. It also includes support for previous/next controls and indicators. In browsers where the Page Visibility API is supported, the carousel will avoid sliding when

Bootstrap 4 Carousel, The carousel also known as slideshow or image slider is some of the best way of It is a dynamic presentation of contents where text and images are made  Responsive jQuery Bootstrap Carousel Create a mobile, retina, touch-swipe carousel that looks amazing on all browsers and phones. Add images, text, videos, thumbnails, buttons to slides, set autoplay, full-screen, full-width or boxed layout. Comes with easy drag-n-drop builder - make a slider w/o coding!

Comments
  • Sometimes using object-fit:cover in css for images is great when image cropping is allowed in smaller screens and full image in larger ones.
  • I've removed the class "d-none" as you suggest me and now the text appears, but When I decrease the screen the text became misaligned ... how can I fix that? Thanks for your help
  • I've tried write "img-responsive" but doesn't work... Then, I've used the tag "img-fluid" and works! thanks for your help