How to Build a Full Width Bootstrap 4 Responsive Carousel [Tutorial]

Do you want your Bootstrap carousel to extend the full width of the browser window? Do your images look cut off or have unwanted padding on the left and right?

In this tutorial we will take a closer look at the Bootstrap 4 carousel and determine the best approach in making it full width and responsive.

Problem

If you use the carousel code snippet from the Bootstrap 4 documentation you will notice the carousel anchor links do not wrap the entire image. In most cases, you will probably want the opposite. So for this example I am going to make this adjustment to the code.

Each image has the .img-fluid class which tells the browser to only scale the image down if it does not fit in the smaller width. But for wide windows it doesn’t scale up. But since you want to go full width, your images will appear cut off on really large screens.

.img-fluid {max-width: 100%; height: auto;}

In order to fix this, you will need to add the CSS rule below to your stylesheet to force your carousel image to always be full width. I first tried height:auto; so the image height would stay in the right proportion. But that did not work because the parent element .carousel-item is set to display:flex. Changing the height to 100% fixed this.

/*Forces carousel image to be 100% width and not max width of 100%*/.carousel-item .img-fluid { width:100%; height:100%; }

/*Forces carousel image to be 100% width and not max width of 100%*/.carousel-item .img-fluid {width:100%;height:100%;}

This approach forces you to choose the widest image size and then load it on mobile. This is not mobile friendly because it dramatically decreases page load speed because the images have a large file size (more pixels = more load time).

One of the most common causes of slow websites is large images, so we will want to correct this in our final solution.

Above, notice how the carousel looks super small on mobile and HUGE on wide desktops? This doesn’t look right.

In the next section we will improve the following:

• Improve the load speed by serving the right sized image at the right breakpoint
• Fix the layout aesthetics of the image sizes being too small or too large

View demo of this example

Solution

HTML5 has introduced two different ways to handle responsive images: the picture element and srcset img attribute. Img srcset lets you specify different image resolutions based on window size and pixel density of the screen. This solves the page load problem but would not be able to make the xs and xl image proportions look better. We want the mobile image to be square and the desktop image to be a rectangle so we need more “art direction” control on what image is used and when.

The picture tag is designed for this scenario, so we will use this instead. Keep in mind, you will need to use a picturefill script to support IE11 and below because these versions do not support the picture tag.

Below is an example of the picture tag with different images specified. See how each image source has a media query similar to CSS media queries? Following mobile first, the image tag loads the smallest image first and then swaps it out on larger sizes (smallest to biggest from the bottom up). This will improve page load significantly on mobile because it loads an image at a pixel resolution suitable for its screen size. Plus it gives you way more control of how things look at different breakpoints.

<picture><source srcset=”https://dummyimage.com/2000x400/007aeb/4196e5" media=”(min-width: 1400px)”><source srcset=”https://dummyimage.com/1400x400/007aeb/4196e5" media=”(min-width: 768px)”><source srcset=”https://dummyimage.com/800x400/007aeb/4196e5" media=”(min-width: 576px)”><img srcset=”https://dummyimage.com/600x400/007aeb/4196e5" alt=”responsive image” class=”d-block img-fluid”></picture>

When setting up the image sizes and media size breakpoints, I referenced this list of most common screen resolutions. The second highest desktop screen size is 1920 x 1080 so I wanted to make sure i could cover that width without making the image blurry. So we are only going to load this if the image is greater than 1400px. Make the necessary adjustments based on your site analytics to target the most common screen resolutions.

Looking good. The xs breakpoint is square and the xl is a wide rectangle. Maximizing the space and making the carousel more mobile friendly.

View Final Solution Demo | Get code

Things to watch out for

• Since you want your carousel to extend to the edges, keep your carousel outside of a .container or .container-fluid class because this applies left and right padding.
• Using the picture element for your images requires a lot more image editing in Adobe Photoshop or similar software. If a creative change is made it will have to be applied to multiple image versions. So this will take more time.
• Using placeholder images first can help figure out image sizes and breakpoints before you do any final image cropping.

Summary

In this tutorial you learned how to customize the carousel code snippet to use responsive images and go full width. This optimization achieves better load times on mobile and gives the designer control on how the images look at the various breakpoints. The only downsides are that it requires more image editing time and needs a polyfill to support IE11 and below. But in my opinion, the pros greatly outweigh the cons.

The breakpoint preview screenshots used in this tutorial were created using Robin available in the Bootstrap 4 Quick Start. Get started learning responsive design basics step by step.

If you enjoyed this story, please click the 👏 button and share to help others find it! Feel free to leave any questions below.

Originally published at bootstrapcreative.com on June 27, 2017.