https://i.sstatic.net/ndgWi.png
In the card design, the header and footer are slightly less wide than the body, resulting in some white space on both sides. Is there a way to stretch the header and footer so they fill the entire width?
Thank you for any guidance.
Here is a snippet of the code:
<div class="container mt-3">
<div class="row justify-content-md-center">
<div class="btn btn-secondary btn-md">
<%= link_to "Edit User Profile", edit_user_path(@user.id), style: 'color:#FFFFFF' %>
</div>
</div>
<h2 class="text-center mt-4">Articles</h2>
<% @user.articles.each_slice(3) do |articles| %>
<div class="row">
<% articles.each do |article| %>
<div class="card col-4 shadow rounded">
<%= link_to "", article_path(article.id), class:"stretched-link" %>
<div class="card-header font-italic">
by <%= article.user.username %>
</div>
<div class="card-body mt-4 mb-5">
<h5 class="card-title"><%= article.title%></h5>
<p class="card-text"><%= truncate(article.description, length:100) %></p>
</div>
<div class="card-footer text-muted">
<small>Created <%= time_ago_in_words(article.created_at) %> ago, edited <%= time_ago_in_words(article.updated_at) %></small>
</div>
</div>
<% end %>
</div>
<% end %>
</div>