Bootstrap 4 Carousel
Add scrolling images or text to your website with the Bootstrap carousel component.
The Bootstrap carousel component enables you to add scrolling images and text that slide in, pause, then slide out. Controls enable the user to scroll forwards or backwards within the set. Basically a scrolling marquee with user controls.
To create a basic carousel:
.slideto an outer container (with its own ID).
- For the scrollable contents, wrap all items in a
.carousel-innerand give each item a
- For the "indicator" controls (the little clickable circles at the bottom, center), add a list with
.carousel-indicators, as well as the applicable
- For the "Previous/Next" controls, use an
class="left carousel-control"for the "Previous" button, and
class="right carousel-control"for the "Next" button.
- Also, you must apply
.activeto one of the slides in the carousel, otherwise the carousel won't be visible. This class allows you to set one slide as the initial slide (i.e. the starting slide).
In this case, I've also added my own styles to center the images horizontally in the carousel.
You can add captions to your slideshow by adding a
<div> with the
.carousel-caption class applied. This goes inside each
Bootstrap 4 vs Bootstrap 3
Bootstrap 3 uses
.item for each carousel item.
Bootstrap 4 uses
.carousel-item for each carousel item.
Bootstrap 4 is currently in alpha release, therefore, do not use it in production yet. To be safe, refer to Bootstrap 3 Carousel until Bootstrap 4 becomes an official release.
Also check out the differences between Bootstrap v3 and v4.