Owl carousel with bootstrap grid and card

$('.slider').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  responsive: {
    0: {
      items: 3
    },
    600: {
      items: 3
    },
    1000: {
      items: 3
    }
  }
})

.main-content {
  background-image: url("https://d3ertfc829vzop.cloudfront.net/img/topo-map-50.png");
  background-color: #efefef;
}

.subheading-wrapper .subheading {
  font-size: 15px;
  color: #9AC133;
  text-transform: uppercase;
}

.heading-wrapper .heading {
  font-size: 2rem;
  color: #656565;
  font-weight: 500;
  text-transform: capitalize;
}

.card-img-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-img-overlay .card-title a {
  color: white;
}

.card-img-overlay .card-title a:hover {
  text-decoration: none;
}

.floating-wrapper {
  transform: translateX(0px) translateY(-100px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet">
<section>
  <div class="container my-5 py-3">
    <div class="row">
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae asperiores pariatur dignissimos itaque necessitatibus nam minus laudantium porro inventore cum ullam nisi, veniam, fugit deleniti explicabo nemo accusamus. Alias distinctio quisquam
        aperiam, voluptatem aliquid neque nisi minus dicta, ut beatae vitae vero labore cumque ad. Adipisci eaque tenetur veniam eius, ipsam minima fugiat deleniti est facere quasi consequuntur, odit doloremque deserunt veritatis, corporis nobis reiciendis
        eligendi. Saepe, eos nesciunt, impedit pariatur necessitatibus natus id harum et beatae, voluptatum nam odio! Doloribus sit quia deserunt. Soluta earum velit laudantium iusto deserunt eum iste illum nemo tempora consequatur amet voluptatum ut,
        exercitationem reiciendis sequi. Ipsum, assumenda laudantium! Soluta pariatur dolorum, quia ut tempora exercitationem placeat? Ratione animi laboriosam suscipit adipisci natus quo! Similique optio quidem animi amet nostrum, fugiat, repudiandae
        non laudantium consectetur aliquam recusandae velit quis nemo doloribus voluptas sunt ab incidunt! Id dolore consectetur repudiandae quidem dicta maiores illo, error eius tenetur eveniet consequatur esse voluptate cum, quaerat possimus odit alias
        ab, sit minus mollitia? Fugit labore dolorem voluptatem maxime reprehenderit fugiat assumenda, vero dicta, qui corporis minus! Sit consequuntur rerum est reprehenderit voluptatum sequi cupiditate. Qui ipsam saepe at dolor eos. Sequi voluptatem
        laborum impedit quis sapiente neque. Soluta!</p>
    </div>
  </div>
</section>

<section class="main-content">
  <div class="container">
    <div class="row py-5 position-relative">

      <div class="col-sm-12 col-md-3">
        <div class="subheading-wrapper mb-2">
          <span class="subheading">Lorem ipsum dolor.</span>
        </div>
        <div class="heading-wrapper mb-2">
          <span class="heading">
            Lorem ipsum dolor sit.
          </span>
        </div>
        <div class="content-wrapper">
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas, magnam facere inventore culpa suscipit ducimus exercitationem doloremque mollitia quod voluptate ipsa dolorem enim sint eaque quos debitis sapiente ipsam architecto velit sed!</p>
        </div>
      </div>

      <div class="col-md-9 col-sm-12 ">
        <div class="row position-absolute floating-wrapper slider owl-carousel owl-theme">

          <div class="col-4">
            <div class="card text-white">
              <img src="https://via.placeholder.com/500x858" alt="" class="card-img-top">
              <div class="card-img-overlay">
                <h5 class="card-title"><a href="#">Card title</a></h5>
              </div>
            </div>
          </div>

          <div class="col-4">
            <div class="card text-white">
              <img src="https://via.placeholder.com/500x858" alt="" class="card-img-top">
              <div class="card-img-overlay">
                <h5 class="card-title"><a href="#">Card title</a></h5>
              </div>
            </div>
          </div>

          <div class="col-4">
            <div class="card text-white">
              <img src="https://via.placeholder.com/500x858" alt="" class="card-img-top">
              <div class="card-img-overlay">
                <h5 class="card-title"><a href="#">Card title</a></h5>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</section>

The above code snippet is from app's html template. Here I'm trying to implement owl carousel to card items.

The layout of the section should be like this as per the wireframe:

I have achieved the following layout but after adding the owl carousel classes owl-carousel owl-theme the layout is disfigured. Specially cards and couldn't figure-out the cause.

I've recreated the layout in the codepen here

Solution

The problem is that you have class col-4 inside the owl-item. You do not need that because the owl-item has already a calculated width ( so you have 3 items visible )

The col-4 class from bootstrap adds a width:33.33% to that element. So it will have 33.33% width of the owl-item but you need 100%.

You can either change it to col-12 ( if you need it to be flex ) or remove that class and everything will work as intended.

<div>
 <div class="card text-white">
   <img src="https://via.placeholder.com/500x858" alt="" class="card-img-top">
   <div class="card-img-overlay">
     <h5 class="card-title"><a href="#">Card title</a></h5>
   </div>
 </div>
</div>

See codepen ( changed for the first two items )

https://codepen.io/MihaiTCode/pen/RwbyWVX