In the application's view, there is a fluid container and in the home view, there is another container with 4 rows. The first row has one column that is not aligning vertically to the middle of the row. I have attempted to use Bootstrap's align-middle class and also added a custom class ({height:50vh}).
<div class="container-fluid preview-height no-padding">
<% @posts.each do |p| %>
<div class="container-fluid d-block">
<div class="row disp-margin text-white preview-height bg-cover bg-img" style="background-image: url('<%= p.image.length > 0 ? p.image : default_background_url %>');">
<div class="col-lg-12 text-center vcenter">
<p class="h1"><a><%= p.title %></a></p><%# Post's title...%>
<a class="bordera m-padding"><%= p.style %></a>
<a class="bordera m-padding"><%= p.genre %></a>
<a class="bordera m-padding"><%= p.platform %></a>
<h3><%= p.likes.length %> likes</h3>
<%= p.body %>
</div>
</div>
<div class="row b-padding bg-white text-center">
<h3 class="col-lg-12 text-center">by <%= p.user.name %>
</div>
<div class="row no-padding bg-white h1">
<h3 class="col-lg-12 text-center">
<%= link_to "Like", post_likes_path(p), method: :post %>
</h3>
<h4 class="col-lg-12 text-center">
<%=link_to("Back to the top","#", class:'text-dark')%>
</h4>
</div>
</div>
<% end %>
</div>