index.ejs

<% include ../partials/header %> 

 <div class="container">
     <header class="jumbotron">
         <div class="container">
             <h1>Welcome To YelpCamp!</h1>
             <p>View our hand-picked campgrounds from all over the world</p>
             <p>
                <a class="btn btn-primary btn-large" href="/campgrounds/new">Add New Campground</a>
             </p>
         </div>
     </header>
     
     <div class="row text-center" style="display:flex; flex-wrap: wrap;">
        <% campgrounds.forEach(function(campground){ %>
            <div class="col-md-3 col-sm-6">
                <div class="thumbnail">
                   <img src="<%= campground.image %>">
                   <div class="caption">
                       <h4><%= campground.name %></h4>
                   </div>
                   <p>
                       <a href="/campgrounds/<%= campground.slug %>" class="btn btn-primary">More Info</a>
                   </p>
                </div>
            </div>
        <% }); %>
    </div>
</div>

<% include ../partials/footer %>