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" data-slide-to="3"></li>
  </ol>

Note that I've used a div tag with an ID (id="homepage-feature") to establish the fundamental context of carousel...