title: Bootstrap Carousel Not Working I cant See 2nd image
body: <p>My carousel from Bootstrap is not displaying my 2nd image ..it's only showing the first image.</p>
  
  <p>Check out my <a href="https://www.holyquranclasses.com/" rel="nofollow noreferrer">website</a> for reference.</p>
  
  <p>This is my HTML which I am using:</p>
  
  <pre><code>&lt;div id="main-slide" class="carousel slide" data-ride="carousel"&gt;
  
      &lt;!-- Indicators --&gt;
      &lt;ol class="carousel-indicators visible-lg visible-md"&gt;
          &lt;li data-target="#main-slide" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#main-slide" data-slide-to="1"&gt;&lt;/li&gt;
  
      &lt;/ol&gt;&lt;!--/ Indicators end--&gt;
  
      &lt;!-- Carousel inner --&gt;
      &lt;div class="carousel-inner"&gt;
  
          &lt;div class="item active" style="background-image:url(images/slider-main/image1.jpg)"&gt;
              &lt;div class="slider-content"&gt;
                  &lt;div class="col-md-12 text-left"&gt;
                                     &lt;h1 class="slide-title-box animated4"&gt; Some Text...&lt;/h1&gt; 
                                    &lt;div class="slide-title animated4"&gt; Some Text...&lt;/div&gt;
                       &lt;div class="slide-title animated4"&gt; Some Text... &lt;/div&gt;
  
  
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;!--/ Carousel item 1 end --&gt;
  
          &lt;div class="item" style="background-image:url(images/slider-main/image2.jpg)"&gt;
              &lt;div class="slider-content"&gt;
                  &lt;div class="col-md-12 text-left"&gt;
                      &lt;div class="slide-title-box animated4"&gt;Some Text...&lt;/div&gt;
                      &lt;div class="slide-title animated4"&gt;Some Text...&lt;/div&gt;   
                      &lt;div class="slide-title animated4"&gt;Some Text...&lt;/div&gt;
                       &lt;br&gt;
  
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;!--/ Carousel item 2 end --&gt;
  
  
  
      &lt;/div&gt;&lt;!-- Carousel inner end--&gt;
  
      &lt;!-- Controllers --&gt;
      &lt;a class="left carousel-control" href="#main-slide" data-slide="prev"&gt;
          &lt;span&gt;&lt;i class="fa fa-angle-left"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#main-slide" data-slide="next"&gt;
          &lt;span&gt;&lt;i class="fa fa-angle-right"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;&lt;!--/ Carousel end --&gt;  
  </code></pre>