Carousel Slides only

Here’s a carousel with slides. Note the appearance of the `.d-block` also, `.w-100` on carousel images to override browser default image alignment.

Carousel With controls

Adding in the previous and next controls. We recommend using `<button>` elements, but you can also use `<a>` elements with `role="button"`.

Carousel With indicators

You can attach the indicators to the carousel, lengthwise the controls, too.

Carousel With captions

You can add captions to slides with the `.carousel-caption` element within any `.carousel-item`. They can be immediately hidden on smaller viewports, as shown below, with optional display utilities. We hide them with `.d-none` and draw them back on medium-sized devices with `.d-md-block`.

##### First slide label

Some representative placeholder content for the first slide.

##### Second slide label

Some representative placeholder content for the second slide.

##### Third slide label

Some representative placeholder content for the third slide.

Carousel Crossfade

Add `.carousel-fade` to your carousel to animate slides with a fade transition instead of a slide.

Carousel Dark variant

Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`.

##### First slide label

Some representative placeholder content for the first slide.

##### Second slide label

Some representative placeholder content for the second slide.

##### Third slide label

Some representative placeholder content for the third slide.