Make bootstrap cols square

Question

I have an index view in my Rails app. I want to display album covers in a title pattern in my index view with no gaps. I want the bootstrap divs with the class of "col-sm-4" to be the exact same height as their width, aka I want them to be squares. Is there a way to tie a div's height to its width without using javascript? I need it be responsive, obviously, because the width is responsive. I've searched around and can't seem to find an answer.

This is my code:

<%= @albums.each do |f| %>
    <div class="col-sm-4">
        <p><%= f.title %></p>
    </div>
<% end %> 

Answer 1

You need set same width and height in parrent container. Example:

<div class="container">
  <div></div><div></div><div></div>
  <div></div><div></div><div></div>
  <div></div><div></div><div></div>
</div>


.container {
  display: flex;
  flex-wrap: wrap;
  height: 600px;
  width: 600px;
}

.container div {
  background:#555;
  border: solid 1px #000;
  width: 100%;
  max-width: 33%;
}