Is there a possibility to scale vertically with Bootstrap?

Question

This code only scales horizontally:

   <div class="row">
       <div class="box col-xs-3"></div>
       <div class="box col-xs-3"></div>
       <div class="box col-xs-3"></div>
       <div class="box col-xs-3"></div>
    </div>

The height should also be scalable, someone knows how to do this with bootstrap?

The width and height are the same here:

enter image description here

After resizing window the width and height are not the same anymore:

enter image description here

Scalable? What does that mean here? Divs expand to their contents by default. — isherwood, Apr 23 '14 at 15:28
I found solution in this post: http://stackoverflow.com/questions/12121090/responsively-change-div-size-keeping-aspect-ratio — Gilko, Apr 24 '14 at 15:08

score 0 · Answer 1 · answered Apr 23 '14 at 15:34

0

For example:

.box {height: 10%;}
@media (max-width: 767px) {
    .box {height: 15%;}
}
@media (max-width: 959px) {
    .box {height: 20%;}
}

Your breakpoints should match what you're using for Bootstrap, of course. The problem here is that the contents of each .box may exceed their heights. This is rather non-standard.

answered Apr 23 '14 at 15:34

isherwood

58,414
16
114
157

The problem is when I use percentages, the height of the box stays at 0. I think thats because it's a div and not an image for instance. – Gilko Apr 23 '14 at 20:48

Is there a possibility to scale vertically with Bootstrap?

1 Answers1