title: Why my carousel from Bootstrap Examples page not working?
body: <p>I am doing a web page with Bootstrap, and I want to add a carousel. So I went to the Examples page, and looked for the source code of the carousel template (<a href="https://getbootstrap.com/docs/4.5/examples/carousel/" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.5/examples/carousel/</a>). I copy/paste the carousel section into my web page but it is not working.</p>
  <p><a href="https://i.stack.imgur.com/dU2DS.png" rel="nofollow noreferrer">carousel from bootsrap web page</a></p>
  <p><a href="https://i.stack.imgur.com/fxB9s.png" rel="nofollow noreferrer">carousel from my web page</a></p>
  <p>As you can see, I got a tiny portion of the original carousel, and I don't know why, because it is supposed to be the original source code of the carousel of Bootstrap. Here the portion of my code related to the carousel :</p>
  <pre><code> &lt;body&gt;
      &lt;?php include &quot;header.php&quot; ?&gt;
      &lt;main role=&quot;main&quot;&gt;
       &lt;div id=&quot;myCarousel&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
      &lt;ol class=&quot;carousel-indicators&quot;&gt;
        &lt;li data-target=&quot;#myCarousel&quot; data-slide-to=&quot;0&quot; class=&quot;active&quot;&gt;&lt;/li&gt;
        &lt;li data-target=&quot;#myCarousel&quot; data-slide-to=&quot;1&quot;&gt;&lt;/li&gt;
        &lt;li data-target=&quot;#myCarousel&quot; data-slide-to=&quot;2&quot;&gt;&lt;/li&gt;
      &lt;/ol&gt;
      &lt;div class=&quot;carousel-inner&quot;&gt;
        &lt;div class=&quot;carousel-item active&quot;&gt;
          &lt;svg class=&quot;bd-placeholder-img&quot; width=&quot;100%&quot; height=&quot;100%&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; preserveAspectRatio=&quot;xMidYMid slice&quot; focusable=&quot;false&quot; role=&quot;img&quot;&gt;&lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;#777&quot;/&gt;&lt;/svg&gt;
          &lt;div class=&quot;container&quot;&gt;
            &lt;div class=&quot;carousel-caption text-left&quot;&gt;
              &lt;h1&gt;Example headline.&lt;/h1&gt;
              &lt;p&gt;Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.&lt;/p&gt;
              &lt;p&gt;&lt;a class=&quot;btn btn-lg btn-primary&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;Sign up today&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;carousel-item&quot;&gt;
          &lt;svg class=&quot;bd-placeholder-img&quot; width=&quot;100%&quot; height=&quot;100%&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; preserveAspectRatio=&quot;xMidYMid slice&quot; focusable=&quot;false&quot; role=&quot;img&quot;&gt;&lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;#777&quot;/&gt;&lt;/svg&gt;
          &lt;div class=&quot;container&quot;&gt;
            &lt;div class=&quot;carousel-caption&quot;&gt;
              &lt;h1&gt;Another example headline.&lt;/h1&gt;
              &lt;p&gt;Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.&lt;/p&gt;
              &lt;p&gt;&lt;a class=&quot;btn btn-lg btn-primary&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;Learn more&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;carousel-item&quot;&gt;
          &lt;svg class=&quot;bd-placeholder-img&quot; width=&quot;100%&quot; height=&quot;100%&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; preserveAspectRatio=&quot;xMidYMid slice&quot; focusable=&quot;false&quot; role=&quot;img&quot;&gt;&lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;#777&quot;/&gt;&lt;/svg&gt;
          &lt;div class=&quot;container&quot;&gt;
            &lt;div class=&quot;carousel-caption text-right&quot;&gt;
              &lt;h1&gt;One more for good measure.&lt;/h1&gt;
              &lt;p&gt;Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.&lt;/p&gt;
              &lt;p&gt;&lt;a class=&quot;btn btn-lg btn-primary&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;Browse gallery&lt;/a&gt;&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#myCarousel&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;#myCarousel&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;/body&gt;
  </code></pre>