col-md-4 property in bootstrap 4 not working in my ejs file

Question

    <div class="container"> 
    <div class="row card-deck">
    <% for(var i=0;i<campgrounds.length;i++){ %>
        <div class="card col-12 col-md-4">
        <img class="card-image-top" src="<%= campgrounds[i].image %>"  style=width:100%;height:350px;>
        <div class="card-body">
        <h3 class="card-title"><%= campgrounds[i].name %></h3> 
            </div>
        </div>
    <% }%>
</div>
</div>

Here "campgrounds" is a dictionary array with 2 properties("name" and image source). Now this array has 6 items and my col-md-4 should give 3 items in a row in resolutions of medium and above. But, this is not working and there are 12 items in a single row when in large/medium resolutions. Why?

Answer 1

.card in Bootstrap has its own flex properties which override .col-*

You need to add .card as a child div of .col-md-4 and you will see the results.

 .col-md-4{ margin: 20px auto; } /* Or use my-* classes */

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row card-deck"> <div class="col-md-4"> <div class="card"> <img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;"> <div class="card-body"> <h3 class="card-title">Card Title</h3> </div> </div> </div> <div class="col-md-4"> <div class="card"> <img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;"> <div class="card-body"> <h3 class="card-title">Card Title</h3> </div> </div> </div> <div class="col-md-4"> <div class="card"> <img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;"> <div class="card-body"> <h3 class="card-title">Card Title</h3> </div> </div> </div> <div class="col-md-4"> <div class="card"> <img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;"> <div class="card-body"> <h3 class="card-title">Card Title</h3> </div> </div> </div> <div class="col-md-4"> <div class="card"> <img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;"> <div class="card-body"> <h3 class="card-title">Card Title</h3> </div> </div> </div> <div class="col-md-4"> <div class="card"> <img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;"> <div class="card-body"> <h3 class="card-title">Card Title</h3> </div> </div> </div> </div> </div>