Make a div the same height as its width in bootstrap

Question

I'm trying to make a div height the same width as a col-md-3 in bootstrap so that as the page adjusts it keeps its "squareness". Outside of bootstrap I use vw, but that's not the case here and height 100%; doesn't work. Any ideas?? Needs to be simple and dynamic.

Answer 1

It has been answered before from what I see.

div {
  background:orange;
  width:?%;
  padding-top:?%;
}

width = padding=top

See here css height same as width

Answer 2

Bootstrap make same height as width. Width of the colum is added to padding so that you can get a squared box

.col-md-3{width:25%; padding:25%;}

https://jsfiddle.net/SHABU89/gee3mzsy/