Here we are solving a basic problem faced by a beginner web developer in bootstrap i.e. designing a carousel.

Objectives and Outcomes

In this, we will discuss one more feature Bootstrap supports, the carousel.

Adding a row for the carousel

The carousel will be added to your web page, firstly go to the top of the container div that contains the content of the page and add a new content row and an inner div spanning all the 12 columns as follows:

<div class="row row-content">
           <div class="col-xs-12">

            </div>
</div>





Adding a Carousel

Next, add the basic carousel div inside the content row that you just added as follows:

<div class="row row-content">
           <div class="col-xs-12">
		    <div id="mycarousel" class="carousel slide" data-ride="carousel">

		    </div>
           </div>
</div>


Adding Carousel Content

Next add the content inside the carousel as follows:

<div class="row row-content">
<div class="col-xs-12">
	<div id="mycarousel" class="carousel slide" data-ride="carousel">
	
	<!-- Wrapper for slides -->
	<div class="carousel-inner" >
		<div class="item active">
			<img class="img-responsive" src="img/boot.jpg" height=100 width=350>
			<div class="carousel-caption">
			<h2>Bootstrap</h2>
			<p><a class="btn btn-primary btn-xs" href="#">More &raquo;</a></p>
			</div>
		</div>
		<div class="item">
			<img class="img-responsive" src="img/ph.jpg" height=100 width=350>
			<div class="carousel-caption">
			<h2>PHP</h2>
			<p><a class="btn btn-primary btn-xs" href="#">More &raquo;</a></p>
			</div>
		</div>
		<div class="item">
			<img class="img-responsive" src="img/js.jpg" height=100 width=350>
			<div class="carousel-caption">
			<h4>Javascript</h4>
			<p><a class="btn btn-primary btn-xs" href="#">More &raquo;</a></p>
			</div>
		</div>
	</div>
	</div>
</div>
</div>
		

Note that the first item has been set up already. For the remaining two items, copy the content from the second and third rows in a similar manner.




Adding CSS Classes

Add the following CSS classes to the mystyles.css file:

.carousel {
    background:#1A237E;
}
.carousel .item {
  height: 300px;
}
.item img {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 300px;
}


Adding Carousel Controls

Next, we will add manual controls to the carousel so that we can manually move among the slides. Add the following code to the top of the carousel to add slide indicators that enable us to select a specific slide:

<!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#mycarousel" data-slide-to="1"></li>
                    <li data-target="#mycarousel" data-slide-to="2"></li>
                </ol>
Then, add the left and right controls to the carousel that enable us to move to the previous and next slide manually. Add this to the bottom of the carousel div:

<!-- Controls -->
                <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
		</a>

Your carousel is ready for use.