Everything seems to be working smoothly with my current template.
However, I am facing an issue when trying to separate individual courses (or products) into components, as the row class is not functioning properly and causing the items to stack on top of each other...
Here is the code I am using:
<div class="col-lg-9">
<div class="row">
<app-single-course></app-single-course>
<app-single-course></app-single-course>
</div>
</div>
Update
This is the code without the single component, and it works perfectly when the content appears side by side:
<div class="col-lg-9">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-course-inner style-two">
<div class="thumb">
<img src="assets/img/course/2.png" alt="img">
<div class="rating">4.9/5 <i class="fa fa-star"></i></div>
<a href="#" class="bookmark"><i class="fa fa-bookmark-o"></i></a>
</div>
<div class="details">
<div class="meta">
<div class="row">
<div class="col-6">
<p>5,957 students</p>
</div>
<div class="col-6 text-right">
<p>01h 49m</p>
</div>
</div>
</div>
<h5><a href="#">Motion Graphics: Create a Nice Typography Animation</a></h5>
<div class="price-inner">
<div class="row">
<div class="col-6">
<p>$33.99</p>
</div>
<div class="col-6 text-right">
<a href="#"><i class="fa fa-shopping-cart"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>