Bootstrap Carousel, Bootstrap Image Slider, How To Create a Carousel, Add Captions to Slides, How to create bootstrap image slider, Create slider with bootstrap

Bootstrap Carousel, Bootstrap Image Slider

Image slider always make your website beautiful also when you are creating a website images slider help you to show all the product and other things. With Bootstrap its become very easy to use images slides.

How To Create a Carousel

<div id="slider" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#slider" data-slide-to="0" class="active"></li>
    <li data-target="#slider" data-slide-to="1"></li>
    <li data-target="#slider" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img/Carousel-1.jpg" alt="dstechstunt">
    </div>
    <div class="carousel-item">
      <img src="img/Carousel-2.jpg" alt="dstechstunt1">
    </div>
    <div class="carousel-item">
      <img src="img/Carousel-3.jpg" alt="dstechstunt">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#slider" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#slider" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

You can add following code in your css file to make slider image fully responsive.
<style>
   .carousel-inner img {
      width: 100%;
      height: 100%;
  }
  </style>

Add Captions to Slides

To create caption into slides add <div class="carousel-caption"> within each <div class="carousel-item">

Example:- 

<div id="slider" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#slider" data-slide-to="0" class="active"></li>
    <li data-target="#slider" data-slide-to="1"></li>
    <li data-target="#slider" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img/Carousel-1.jpg">
     <div class="carousel-caption">
        <h3>Caption-Heading</h3>
        <p>Caption Paragraph</p>
      </div>   
    </div>

    <div class="carousel-item">
      <img src="img/Carousel-2.jpg">
      <div class="carousel-caption">
         <h3>Caption-Heading</h3>
        <p>Caption Paragraph</p>
      </div>   
    </div>
    <div class="carousel-item">
      <img src="img/Carousel-3.jpg">
     <div class="carousel-caption">
         <h3>Caption-Heading</h3>
        <p>Caption Paragraph</p>
      </div>   
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#slider" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#slider" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>