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 the following URL:

http://getbootstrap.com/javascript/#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="homepage-feature" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#homepage-feature" data-slide-to="0" class="active"></li> <li data-target="#homepage-feature" data-slide-to="1"></li> <li data-target="#homepage-feature" data-slide-to="2"></li> <li data-target="#homepage-feature" ...

Get Bootstrap Site Blueprints now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.