1.Carousel Wrapper

It all start with a div which is a parent to all elements for this application. This div need an id, eg id="myCarousel", in order for controls such as next and prev buttons to function properly. This Id will be referenced by other elements as well for interactive function of the application.
The class class="slide" indicate that this div contains a carousel.
The class class="slide" facilitates the animation and transition of slides.

2.Carousel-indicators

I. Indicators are small dots usually at bottom of each slides used for TWO REASONS:

1. To show how many slides are there in carousel
2. To show which slide the user is currently viewing

II. Indicators make use of ordered list html mark-up with class=".carousel-indicators", why? Well, to tell bootstrap you are dealing with those little dots (Indicators).
III.TWO important attributes used for carousel-indicators are:

1. data-target : Points to ID of a carousel
2. data-slide-to : Determine the slide to go to, based on which indicator (dot) is clicked. Each slides represented in numbers starting from 0.

IV. Finally the class :class="active"which slide is currently displayed, otherwise, the carousel won't be visible.

3.Slides within Wrapper

I. Start by creating parent div with class class="carousel-inner". Inside this parent div there are child div elements each representing a slide. Inside each slide there can be an image or text to be display as slide.
II. Design for each slide:

1. Each slide has a class: class="item" to indicate that this is a slide.
2. One of the slides must have a class="active" to show current slide as default, otherwise the carousel won't be visible.
3. Each slide has an image inside.
4. Each side has caption which is a div with a class class="carousel-caption" , inside this caption there is some text like some h3 heading and little paragraph.

4.Slides within Wrapper

I. Start by creating parent div with class class="carousel-inner". Inside this parent div there are child div elements each representing a slide. Inside each slide there can be an image or text to be display as slide.
II. Design for each slide:

1. Each slide has a class: class="item" to indicate that this is a slide.
2. One of the slides must have a class="active" to show current slide as default, otherwise the carousel won't be visible.
3. Each slide has an image inside.
4. Each side has caption which is a div with a class class="carousel-caption" , inside this caption there is some text like some h3 heading and little paragraph.

5.Left and Right Controls

These are TWO buttons (on the left and right sides of the carousel), used as anchor tags each a tag(to go for next or previous slide)has the following:

1. class="left" or class="right" Indicates the position for each button, which is either left or right side of carousel
2. class="carousel-control" which tells bootstrap that this is a control button.
3. data-slide attribute which changes the position of each slide relative to its current osition. This attribute takes a keyword (prev or next), to change the position for the slide.
4. Two span elements which are an icon for each button and the other span is for accessibility for people who are disable to understand what are these control buttons are for.