Looking for some help with my code snippet below:
<% include partials/header %><div class="container">
<header class="jumbotron">
<div class="container">
<h1>Welcome to YelpCamp!</h1>
<p>View our handpicked campgrounds from all over the world!</p>
<p><a class="btn btn-primary btn-large" href="/campgrounds/new">Add New Campsite</a></p>
</div>
</header>
<div class="row text-center" >
<% campgrounds.forEach(function(campground){ %>
<div class="col-lg-3 col-md-4 col-xs-6 img-thumbnail p-0 ">
<img class="img-fluid" src="<%= campground.image %>">
<caption> <%= campground.name %> </caption>
</div>
<% }) %>
</div>
<a href="/">Back</a>
</div>
<% include partials/footer %>
I have a list of campgrounds that I'm displaying in a Bootstrap grid, but the columns don't have any spacing between them. In Bootstrap 4, the automatic gaps from using thumbnails in Bootstrap 3 are not available. I tried adding margin mx-3 to the
`class="col-lg-3 col-md-4 col-xs-6 img-thumbnail"`
However, this adds to the total width and shifts the last item. Any suggestions on how to add spacing between the columns while maintaining alignment?