title: Why does the carousel dissappear after the last last slide?
body: <p>I'm practicing bootstrap and when I click after the last slide, the whole carousel disappears. Even on the first slide, when I click the left arrow to go to the last slide the whole thing still disappears.</p>
  <pre><code>&lt;!-- Team Pictures Carousel --&gt;
      &lt;div class=&quot;row bg-dark rounded-bottom&quot;&gt;
        &lt;div class=&quot;col&quot;&gt;
          &lt;!-- Carousel Component --&gt;
          &lt;div id=&quot;carouselExampleControls&quot; class=&quot;carousel slide w-50 mx-auto&quot; data-ride=&quot;carousel&quot;&gt;
            &lt;div class=&quot;carousel-inner&quot;&gt;
              &lt;div class=&quot;carousel-item active&quot;&gt;
                &lt;img src=&quot;https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/brian.png&quot; class=&quot;d-block w-100&quot; alt=&quot;some guy named brian&quot;&gt;
                &lt;div class=&quot;carousel-caption bg-dark rounded-pill py-0&quot;&gt;
                  &lt;p class=&quot;text-center font-weight-bold mb-0&quot;&gt;CEO: &lt;span class=&quot;font-weight-light&quot;&gt;Brian M.&lt;/span&gt;&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;carousel-item&quot;&gt;
                &lt;img src=&quot;https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/andy.png&quot; class=&quot;d-block w-100&quot; alt=&quot;another dude named andy&quot;&gt;
                &lt;div class=&quot;carousel-caption bg-dark rounded-pill py-0&quot;&gt;
                  &lt;p class=&quot;text-center font-weight-bold mb-0&quot;&gt;CFO: &lt;span class=&quot;font-weight-light&quot;&gt; Andy C.&lt;/span&gt;&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;carousel-item&quot;&gt;
                &lt;img src=&quot;https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/angela.png&quot; class=&quot;d-block w-100&quot; alt=&quot;angela?&quot;&gt;
                &lt;div class=&quot;carousel-caption bg-dark rounded-pill py-0&quot;&gt;
                  &lt;p class=&quot;text-center font-weight-bold mb-0&quot;&gt;COO: &lt;span class=&quot;font-weight-light&quot;&gt;Angela W.&lt;/span&gt;&lt;/p&gt;
                &lt;/div&gt;
              &lt;div class=&quot;carousel-item&quot;&gt;
                &lt;img src=&quot;https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/amie.png&quot; class=&quot;d-block w-100&quot; alt=&quot;amie or amy?&quot;&gt;
                &lt;div class=&quot;carousel-caption bg-dark rounded-pill py-0&quot;&gt;
                  &lt;p class=&quot;text-center font-weight-bold mb-0&quot;&gt;CTO: &lt;span class=&quot;font-weight-light&quot;&gt;Amie S.&lt;/span&gt;&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#carouselExampleControls&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;
              &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
              &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
            &lt;/a&gt;
            &lt;a class=&quot;carousel-control-next&quot; href=&quot;#carouselExampleControls&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
              &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
              &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      
    &lt;/div&gt;
  </code></pre>