title: Swiper JS carousel not fitting inside of Bootstrap 4 col
body: <p>I'm trying to put a <code>Swiper JS</code> carousel inside a div with the <code>col</code> class of Bootstrap 4, but my carousel doesn't stay inside the <code>col</code> div. To illustrate, this is the layout I'm trying to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/lgicC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lgicC.png" alt="layout desired "></a></p>
  
  <p>But for some odd reason when I put the carousel code in the second <code>col</code> div, my page ends up like this:</p>
  
  <p><a href="https://i.stack.imgur.com/WKFZA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WKFZA.png" alt="current layout"></a></p>
  
  <p>Messing with the carousel properties with the <code>Inspect Element</code> tool, I found out that what causes this is the property <code>display: flex</code> that the <code>swiper-wrapper</code> has, and I still haven't been able to figure out how to make the carousel fit nicely within my second <code>col</code> div.</p>
  
  <p>I've tried encapsulating the <code>swiper-container</code> in another div, setting <code>max-width: 100%</code>and <code>min-width: 100%</code> but nothing seems to work, it's like the <code>display: flex</code> property of the <code>row</code> class conflicts with the <code>display: flex</code> of the <code>swiper-wrapper</code> div.</p>
  
  <p>Here's the code for this part of the layout:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="myaboutdiv" class="row"&gt;
      &lt;div class="col topic"&gt;
          &lt;p&gt;TEXT&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col mt-5"&gt;
          &lt;p class="text-left whoami"&gt;&lt;i&gt;This is some text&lt;/i&gt;&lt;/p&gt;
          &lt;p class="text-justify"&gt;
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lorem purus, venenatis vel magna et, consectetur cursus libero. In augue est, iaculis sit amet faucibus ut, condimentum vitae ante. Donec et leo eu dolor suscipit viverra at et mauris. Quisque dapibus leo at ipsum elementum, sit amet interdum sapien ornare. Integer justo lorem, porttitor in gravida in, porttitor at tellus. Sed aliquet malesuada luctus. Duis ac nisl vitae nibh mattis luctus eget a ex. 
          &lt;/p&gt;
          &lt;br&gt;
          &lt;p class="text-left whoami"&gt;&lt;i&gt;Here's the Swiper Carousel&lt;/i&gt;&lt;/p&gt;
          &lt;div class="swiper-container" id="academichistory"&gt;
              &lt;div class="swiper-wrapper"&gt;
                  &lt;div class="swiper-slide"&gt;Slide 1&lt;/div&gt;
                  &lt;div class="swiper-slide"&gt;Slide 2&lt;/div&gt;
                  &lt;div class="swiper-slide"&gt;Slide 3&lt;/div&gt;
                  &lt;div class="swiper-slide"&gt;Slide 4&lt;/div&gt;
                  &lt;div class="swiper-slide"&gt;Slide 5&lt;/div&gt;
                  &lt;div class="swiper-slide"&gt;Slide 6&lt;/div&gt;
                  &lt;div class="swiper-slide"&gt;Slide 7&lt;/div&gt;
                  &lt;div class="swiper-slide"&gt;Slide 8&lt;/div&gt;
                  &lt;div class="swiper-slide"&gt;Slide 9&lt;/div&gt;
                  &lt;div class="swiper-slide"&gt;Slide 10&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
              &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
              &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>.topic {
    font-weight: bold;
    font-size: 2.5rem;
  }
  
  .whoami {
    color: grey;
    font-weight: 500;
  }
  </code></pre>
  
  <p>And finally, here are some screenshots:</p>
  
  <p><em><code>swiper-wrapper</code> with <code>display: flex</code>:</em></p>
  
  <p><a href="https://i.stack.imgur.com/OpUnR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OpUnR.png" alt="Screenshot of current layout"></a></p>
  
  <p><em><code>swiper-wrapper</code> without the <code>display: flex</code> property:</em></p>
  
  <p><a href="https://i.stack.imgur.com/zlBGr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zlBGr.png" alt="swiper-wrapper without display flex"></a></p>
  
  <p>I'm using:</p>
  
  <p>Swiper v5.3.6 and Bootstrap 4.</p>
  
  <p>And just in case, here's the JS code that initializes the Swiper carousel:</p>
  
  <p><strong>JavaScript</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>var swiper = new Swiper('#academichistory', {
      loop: true,
      pagination: {
          el: '.swiper-pagination',
          type: 'progressbar',
      },
      navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
      },
  });
  </code></pre>