Looking to display 3 article divs in each row on my website using bootstrap 3 grid system:
<div class="container-fluid">
<h1>NEWS</h1>
<div class="row">
<% @articles.each do |article| %>
<div class="col-sm-4">
<h2><%= article.title %></h2>
<p><strong>Author: </strong>
<% article.author_id do |c| %>
<p><%= c.first_name %></p>
<% end %></p>
<p><strong>Excerpt: </strong><%= article.excerpt %></p>
<p><strong>Category: </strong>
<% article.categories.each do |c| %>
<%= c.name %>
<% end %>
</p>
<p><strong>Nr of comments: </strong><%= article.comments.count %></p>
<%= link_to article do %>
<button type="button" class="btn btn-primary btn-sm">Show
</button>
<% end %>
<%= link_to edit_article_path(article) do %>
<button type="button" class="btn btn-success btn-sm">Edit
</button>
<% end %>
<%= link_to article, method: :delete, data: { confirm: 'Are you sure?' } do %>
<button type="button" class="btn btn-danger btn-sm">Delete
</button>
<% end %>
</div>
<% end %>
</div> <!-- .row -->
</div> <!-- .container -->
<% content_for :aside do %>
<%= render 'sidebar_popular' %>
<%= render 'sidebar_categories' %>
<% end %>
The first row is displaying correctly but the second row only shows two divs (see image)
How do I fix this? I attempted inserting but it didn't make any difference (maybe placed incorrectly).