title: When using slick slider and have slide with row which have 2 divs it becomes column with 2 divs. Bootstrap 4
body: <p>I need to make slider which have slide with row which have 2 divs in it. But when I try to use slick slider this row becomes column. Using Bootstrap 4 and flexbox.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;section class="main-slider"&gt;
      &lt;div class="container-fluid sl"&gt;
          &lt;div class="row slider-content justify-content-center align-items-lg-center"&gt;
              &lt;div class="left-side d-flex flex-column col-11 col-sm-7 col-md-5 col-lg-4 col-xl-3"&gt;
                  &lt;h1 class="main-slider-header top-header"&gt;We Believe&lt;/h1&gt;
                  &lt;h1 class="main-slider-header bottom-header"&gt;in quality design&lt;/h1&gt;
                  &lt;p class="slider-text top-text"&gt;Any creative project is unique&lt;/p&gt;
                  &lt;p class="slider-text middle-text"&gt;and should be provided with&lt;/p&gt;
                  &lt;p class="slider-text bottom-text"&gt;the appropriate quality&lt;/p&gt;
                  &lt;a class="btn slider-btn" href="#"&gt;Order Now&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="right-side text-center col-lg-8 col-xl-6"&gt;
                  &lt;ul class="row people-list justify-content-center"&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-1.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-2.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-3.png"&gt;&lt;/li&gt;
                      &lt;li class="offset-lg-3 offset-xl-4"&gt;&lt;img class="img-fluid" src="images/main-slider-img-4.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-5.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-6.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-7.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-8.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-9.png"&gt;&lt;/li&gt;
                      &lt;li class="col-xl-12"&gt;&lt;img class="img-fluid " src="images/main-slider-img-10.png"&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row slider-content justify-content-center align-items-lg-center"&gt;
              &lt;div class="right-side text-center col-lg-8 col-xl-6"&gt;
                  &lt;ul class="row people-list justify-content-center"&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-1.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-2.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-3.png"&gt;&lt;/li&gt;
                      &lt;li class="offset-lg-3 offset-xl-4"&gt;&lt;img class="img-fluid" src="images/main-slider-img-4.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-5.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-6.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-7.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-8.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-9.png"&gt;&lt;/li&gt;
                      &lt;li class="col-xl-12"&gt;&lt;img class="img-fluid " src="images/main-slider-img-10.png"&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
              &lt;div class="left-side d-flex flex-column col-11 col-sm-7 col-md-5 col-lg-4 col-xl-3"&gt;
                  &lt;h1 class="main-slider-header top-header"&gt;We Believe&lt;/h1&gt;
                  &lt;h1 class="main-slider-header bottom-header"&gt;in quality design&lt;/h1&gt;
                  &lt;p class="slider-text top-text"&gt;Any creative project is unique&lt;/p&gt;
                  &lt;p class="slider-text middle-text"&gt;and should be provided with&lt;/p&gt;
                  &lt;p class="slider-text bottom-text"&gt;the appropriate quality&lt;/p&gt;
                  &lt;a class="btn slider-btn" href="#"&gt;Order Now&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row slider-content justify-content-center align-items-lg-center"&gt;
              &lt;div class="left-side d-flex flex-column col-11 col-sm-7 col-md-5 col-lg-4 col-xl-3"&gt;
                  &lt;h1 class="main-slider-header top-header"&gt;We Believe&lt;/h1&gt;
                  &lt;h1 class="main-slider-header bottom-header"&gt;in quality design&lt;/h1&gt;
                  &lt;p class="slider-text top-text"&gt;Any creative project is unique&lt;/p&gt;
                  &lt;p class="slider-text middle-text"&gt;and should be provided with&lt;/p&gt;
                  &lt;p class="slider-text bottom-text"&gt;the appropriate quality&lt;/p&gt;
                  &lt;a class="btn slider-btn" href="#"&gt;Order Now&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="right-side text-center col-lg-8 col-xl-6"&gt;
                  &lt;ul class="row people-list justify-content-center"&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-1.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-2.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-3.png"&gt;&lt;/li&gt;
                      &lt;li class="offset-lg-3 offset-xl-4"&gt;&lt;img class="img-fluid" src="images/main-slider-img-4.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-5.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-6.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-7.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-8.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-9.png"&gt;&lt;/li&gt;
                      &lt;li class="col-xl-12"&gt;&lt;img class="img-fluid " src="images/main-slider-img-10.png"&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row slider-content justify-content-center align-items-lg-center"&gt;
              &lt;div class="right-side text-center col-lg-8 col-xl-6"&gt;
                  &lt;ul class="row people-list justify-content-center"&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-1.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-2.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-3.png"&gt;&lt;/li&gt;
                      &lt;li class="offset-lg-3 offset-xl-4"&gt;&lt;img class="img-fluid" src="images/main-slider-img-4.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-5.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-6.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-7.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-8.png"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img class="img-fluid" src="images/main-slider-img-9.png"&gt;&lt;/li&gt;
                      &lt;li class="col-xl-12"&gt;&lt;img class="img-fluid " src="images/main-slider-img-10.png"&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
              &lt;div class="left-side d-flex flex-column col-11 col-sm-7 col-md-5 col-lg-4 col-xl-3"&gt;
                  &lt;h1 class="main-slider-header top-header"&gt;We Believe&lt;/h1&gt;
                  &lt;h1 class="main-slider-header bottom-header"&gt;in quality design&lt;/h1&gt;
                  &lt;p class="slider-text top-text"&gt;Any creative project is unique&lt;/p&gt;
                  &lt;p class="slider-text middle-text"&gt;and should be provided with&lt;/p&gt;
                  &lt;p class="slider-text bottom-text"&gt;the appropriate quality&lt;/p&gt;
                  &lt;a class="btn slider-btn" href="#"&gt;Order Now&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Here how it looks without slick slider (correct):
  <a href="https://i.stack.imgur.com/04adR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/04adR.png" alt="enter image description here"></a></p>
  
  <p>Here how it looks with slick slider initialized (need to look like on the first screenshot): 
  <a href="https://i.stack.imgur.com/spXv2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/spXv2.png" alt="enter image description here"></a></p>
  
  <p>Initializing slick slider:</p>
  
  <pre><code>$(document).ready(function(){
      $('.sl').slick({
  });
  });
  </code></pre>