O'Reilly logo

Bootstrap 4 Site Blueprints by Ian Whitley, David Cochran, Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Marking up the carousel

Let's get started with our carousel, which will rotate between four featured images from our portfolio.

Bootstrap's carousel markup structure can be found in its documentation pages at http://getbootstrap.com/components/carousel/.

Following the pattern used in the example, we'll begin with this structure to set up the fundamental element. This will contain all parts of the carousel, followed by the progress indicators:

<div id="carousel-feature" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-feature" data-slide-to="0" class="active"></li> <li data-target="#carousel-feature" data-slide-to="1"></li> <li data-target="#carousel-feature" data-slide-to="2"></li> </ol> </div> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required