Add spacing between columns in Bootstrap 4 grid - css

Question

I have the following code
<% 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>
Back
</div>
<% include partials/footer %>
I'm reading from a campgrounds list and adding them to a Bootstrap grid.
However, the elements have no spacing between them. In Bootstrap 3 those gaps were automatic when using thumbnail (not available in 4).
If I add a margin mx-3, for example, to
`class="col-lg-3 col-md-4 col-xs-6 img-thumbnail"`
this is added to the total width and the lest item is displaced.
How can I add spacing between columns?

Answer 1

Bootstrap 4 can also give you automatic spacing. Assuming you use the right components for your needs.
The right component in your case would be the figure component. With the classes figure-img img-thumbnail applied to the images.
And for image captions, you should use these (instead of what you tried to use):
<figcaption class="figure-caption">Your Image Caption</figcaption>
The justify-content-center class on the row will center the thumbnails if you happen to have an uneven number of them or if you decide to add col-md-4 to the columns.
Click "run code snippet" below and expand to full page for testing:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<header class="jumbotron pl-5">
<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>
</header>
<div class="row justify-content-center text-center">
<div class="col-6 col-lg-3">
<figure class="figure">
<img src="https://placeimg.com/800/400/animals" class="figure-img img-thumbnail">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
</div>
<div class="col-6 col-lg-3">
<figure class="figure">
<img src="https://placeimg.com/800/400/people" class="figure-img img-thumbnail">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
</div>
<div class="col-6 col-lg-3">
<figure class="figure">
<img src="https://placeimg.com/800/400/tech" class="figure-img img-thumbnail">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
</div>
<div class="col-6 col-lg-3">
<figure class="figure">
<img src="https://placeimg.com/800/400/arch" class="figure-img img-thumbnail">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
</div>
</div>
</div>
Also: You should avoid nesting Bootstrap containers unless absolutely necessary which is almost never the case.