title: Bootstrap Carousel Displaying All Slides at Once
body: <p>As a beginner developer, I hope my problem's solution is not too obvious :-P
  I have already checked several questions in stackoverflow, read Bootstrap documentation, changed many properties and class names in my code. Bootstrap script CDN are in the bottom of html body.</p>
  <p>Right now, all the slides are being shown at once, and when I click the control buttons, the images seem to cycle, but the slides keep stacked one over the other.</p>
  <p>Edit - more details: i did try the classes &quot;carousel-item&quot; (instead of just &quot;item&quot;) and &quot;w-100&quot; and &quot;d-block&quot;, but they don't seem to have any effect.
  Updated the code to reflect these classes as I added them.</p>
  <pre><code>&lt;!-- Carousel --&gt;
      &lt;div id=&quot;product-carousel&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
          &lt;div class=&quot;carousel-inner&quot;&gt;
              &lt;div class=&quot;carousel-slide carousel-item active&quot;&gt;
                  &lt;img class=&quot;carousel-image d-block w-100&quot; src=&quot;image.jpg&quot; alt=&quot;&quot;&gt;
                  &lt;h3 class=&quot;carousel-text&quot;&gt;Carousel text over here!
                      &lt;button href=&quot;#&quot; class=&quot;&quot;&gt;&lt;/button&gt;&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class=&quot;carousel-item carousel-slide&quot;&gt;
                  &lt;img class=&quot;carousel-image d-block w-100&quot; src=&quot;img.jpg&quot; alt=&quot;&quot;&gt;
                  &lt;h3 class=&quot;carousel-text&quot;&gt;Carousel text over here!
                      &lt;button href=&quot;#&quot; class=&quot;&quot;&gt;&lt;/button&gt;
                  &lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class=&quot;carousel-item carousel-slide&quot;&gt;
                  &lt;img class=&quot;carousel-image d-block w-100&quot; src=&quot;img.jpg&quot; alt=&quot;&quot;&gt;
                  &lt;h3 class=&quot;carousel-text&quot;&gt;Carousel text over here!
                      &lt;button href=&quot;#&quot; class=&quot;&quot;&gt; &lt;/button&gt;
                  &lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Carousel Controls --&gt;
          &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#product-carousel&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;
              &lt;svg width=&quot;22&quot; height=&quot;43&quot; viewBox=&quot;0 0 22 43&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
                  &lt;path d=&quot;M1.68334e-06 23.7448L2.07584e-06 19.2552L22 0L22 7.59695L9.77822 21.4997L22 35.4031L22 43L1.68334e-06 23.7448Z&quot; fill=&quot;white&quot; /&gt;
              &lt;/svg&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;#product-carousel&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
              &lt;svg class=&quot;carousel-next-button&quot; aria-hidden=&quot;true&quot; width=&quot;22&quot; height=&quot;43&quot; viewBox=&quot;0 0 22 43&quot; fill=&quot;white&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
                  &lt;path d=&quot;M22 19.2552V23.7448L0 43V35.4031L12.2218 21.5003L0 7.59695V0L22 19.2552Z&quot; fill=&quot;white&quot; /&gt;
              &lt;/svg&gt;
              &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  <p>Relevant CSS looks like this:</p>
  <pre><code>/* Products Carousel */
  .carousel-inner {
      background-color: #E48500;
      display: flex;
      padding: 8%;
      align-items: center;
  }
  
  .carousel-slide {
      justify-content: center;
      display: flex;
      height: auto;
  }
  
  .carousel-image {
      display: block;
      height: auto;
      margin: auto;
      max-width: 90%;
  }
  
  @media only screen and (min-width: 768px) {
      .carousel-image {
          float: left;
          margin-right: 24px;
          width: 50%;
          height: auto;
      }
  }
  
  .carousel-text {
      color: #221110;
      font-size: 2.33rem;
      line-height: 1.5;
      margin-top: 16px;
      margin-left: 24px;
      padding-top: 8px;
  }
  
  .carousel-control-prev, .carousel-control-next {
      background-color: #D14D13;
      margin: auto 0;
      position: absolute;
      height: 170px;
      width: 51px;
  }
  </code></pre>