title: How to make bootstrap carousel with cards
body: <p>I try to make a bootstrap carousel with cards in my website. I have a code from <a href="https://www.codeply.com/go/Q60wSmoJHO/bootstrap-4-carousel-card-slider" rel="nofollow noreferrer">here</a>.<br>
  The code I used is  </p>
  
  <pre><code>&lt;section class="carousel slide" data-ride="carousel"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-xs-12 text-md-right lead"&gt;
                  &lt;a class="btn btn-outline-secondary prev" href="" title="go back"&gt;&lt;i class="fa fa-lg fa-chevron-left"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a class="btn btn-outline-secondary next" href="" title="more"&gt;&lt;i class="fa fa-lg fa-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container p-t-0 m-t-2 carousel-inner"&gt;
  
          &lt;div class="row row-equal carousel-item active m-t-0"&gt;
              {% capture category_name %}{{ page.category }}{% endcapture %}
            {% for post in site.categories[category_name] limit:4 %}
   {% if post.url != page.url %}
              &lt;div class="col-md-4"&gt;
                  &lt;div class="card mb-2"&gt;
                      &lt;div class="card-img-top card-img-top-250"&gt;
                        {% assign image = post.content | split:"!-- ![header](" %}
        {% assign html = image[1] | split:") --&gt;" | first %}
        {% if html and html != "" %}
                          &lt;img class="img-fluid" src="{{ html }}" alt="Carousel 1"&gt;
                          {% endif %}
                      &lt;/div&gt;
                      &lt;div class="card-block p-t-2"&gt;
                        &lt;h4 class="card-title text-center " itemprop="name headline"&gt;{{ post.title }}&lt;/h4&gt;
                        &lt;div class="text-center"&gt;
                        &lt;a href="{{ post.url | prepend: site.baseurl }}" class="btn btn-info my-2 text-center shadow-sm text-white" role="button"&gt;View Now&lt;/a&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
           {% endif %}    
  {% endfor %}
  
          &lt;/div&gt;
  
  &lt;div class="row row-equal carousel-item m-t-0"&gt;
      {% for post in site.categories[category_name] offset:3 limit:3 %}
  
              &lt;div class="col-md-4"&gt;
                  &lt;div class="card mb-2"&gt;
                      &lt;div class="card-img-top card-img-top-250"&gt;
                           {% assign image = post.content | split:"!-- ![header](" %}
        {% assign html = image[1] | split:") --&gt;" | first %}
        {% if html and html != "" %}
                          &lt;img class="img-fluid" src="{{ html }}" alt="Carousel 4"&gt;
                          {% endif %}
                      &lt;/div&gt;
                      &lt;div class="card-block p-t-2"&gt;
                         &lt;h4 class="card-title text-center text-info" itemprop="name headline"&gt;{{ post.title }}&lt;/h4&gt;
                         &lt;div class="text-center"&gt;
                        &lt;a href="{{ post.url | prepend: site.baseurl }}" class="text-center btn btn-info shadow-sm my-2 text-white" role="button"&gt;View Now&lt;/a&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  {% endfor %}
          &lt;/div&gt;
  
  
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>javascript</p>
  
  <pre><code>(function($) {
      "use strict";
  
      // manual carousel controls
      $('.next').click(function(){ $('.carousel').carousel('next');return false; });
      $('.prev').click(function(){ $('.carousel').carousel('prev');return false; });
  
  })(jQuery);
  </code></pre>
  
  <p>and css</p>
  
  <pre><code>
  /* equal card height */
  .row-equal &gt; div[class*='col-'] {
      display: flex;
      flex: 1 0 auto;
  }
  
  .row-equal .card {
     width: 100%;
  }
  
  /* ensure equal card height inside carousel */
  .carousel-inner&gt;.row-equal.active, 
  .carousel-inner&gt;.row-equal.next, 
  .carousel-inner&gt;.row-equal.prev {
      display: flex;
  }
  
  /* prevent flicker during transition */
  .carousel-inner&gt;.row-equal.active.left, 
  .carousel-inner&gt;.row-equal.active.right {
      opacity: 0.5;
      display: flex;
  }
  
  
  /* control image height */
  .card-img-top-250 {
      max-height: 250px;
      overflow:hidden;
  }
  </code></pre>
  
  <p>I think I have some bootstrap.css problem. My css loaded at <a href="https://demo.justinechacko.in/css/main.css" rel="nofollow noreferrer">https://demo.justinechacko.in/css/main.css</a></p>
  
  <p>But when I apply that to my site, I have some problems like,<br>
  1. Carousel indicators are fixed to left (In codeply page it is in right position).<br>
  2. Carousel width is not proper in mobile view, it positioned little bit left.<br>
  3.Also carousel give 3 cards at a time in mobile view(In codeply it shows only one card at a time).<br>
  <a href="https://demo.justinechacko.in" rel="nofollow noreferrer">Here</a> is my site.</p>