Bootstrap: Vertical Responsive height based on VH

[Igcorreia]

I have been using this for a while and would like to share as a suggestion:

`
.vh-100{
min-height:100vh;
}
.vh-90{
min-height:90vh;
}
.vh-80{
min-height:80vh;
}
.vh-70{
min-height:70vh;
}
.vh-60{
min-height:60vh;
}
.vh-50{
min-height:50vh;
}
.vh-40{
min-height:40vh;
}
.vh-30{
min-height:30vh;
}
.vh-20{
min-height:20vh;
}
.vh-10{
min-height:10vh;
}
@media (min-width: 576px){
.vh-sm-100{
min-height:100vh;
}
.vh-sm-90{
min-height:90vh;
}
.vh-sm-80{
min-height:80vh;
}
.vh-sm-70{
min-height:70vh;
}
.vh-sm-60{
min-height:60vh;
}
.vh-sm-50{
min-height:50vh;
}
.vh-sm-40{
min-height:40vh;
}
.vh-sm-30{
min-height:30vh;
}
.vh-sm-20{
min-height:20vh;
}
.vh-sm-10{
min-height:10vh;
}
}
@media (min-width: 768px){
.vh-md-100{
min-height:100vh;
}
.vh-md-90{
min-height:90vh;
}
.vh-md-80{
min-height:80vh;
}
.vh-md-70{
min-height:70vh;
}
.vh-md-60{
min-height:60vh;
}
.vh-md-50{
min-height:50vh;
}
.vh-md-40{
min-height:40vh;
}
.vh-md-30{
min-height:30vh;
}
.vh-md-20{
min-height:20vh;
}
.vh-md-10{
min-height:10vh;
}
}
@media (min-width: 992px){
.vh-lg-100{
min-height:100vh;
}
.vh-lg-90{
min-height:90vh;
}
.vh-lg-80{
min-height:80vh;
}
.vh-lg-70{
min-height:70vh;
}
.vh-lg-60{
min-height:60vh;
}
.vh-lg-50{
min-height:50vh;
}
.vh-lg-40{
min-height:40vh;
}
.vh-lg-30{
min-height:30vh;
}
.vh-lg-20{
min-height:20vh;
}
.vh-lg-10{
min-height:10vh;
}
}
@media (min-width: 1140px){
.vh-xl-100{
min-height:100vh;
}
.vh-xl-90{
min-height:90vh;
}
.vh-xl-80{
min-height:80vh;
}
.vh-xl-70{
min-height:70vh;
}
.vh-xl-60{
min-height:60vh;
}
.vh-xl-50{
min-height:50vh;
}
.vh-xl-40{
min-height:40vh;
}
.vh-xl-30{
min-height:30vh;
}
.vh-xl-20{
min-height:20vh;
}
.vh-xl-10{
min-height:10vh;
}

[XhmikosR]

This is useless; you should make a proper PR and not post random CSS.

[andresgalante]

Hi @Igcorreia thanks for sending your this. To be honest I don't think it's a good idea to create one utility classes for each CSS option, specially vh heights.

I'll keep this issue open a bit more in case other people do.

[Igcorreia]

This thing is that for me I can make am image gallery, vertically responsive in minutes like so: http://bit.ly/2gnpIRv

Was just an idea, as a front end dev I don't like to wast time, I made an entire responsive site without custom media query thanks to this customs css.

[andresgalante]

Hi, i see your usecase but I still don't think this should be part of bootstrap. I mean what's next? Width with vw and then every single unit for all proprieties?

Also you should check your example, the layout is broken

[andresgalante]

Hey @planetoftheweb, I see what you mean and I understand the use case for viewport units, thanks for putting together the codepen.

Personally I wouldn't like to add vh or vw utility classes. But it seems you guys strongly think they should be part of bootstrap, so I'll reopen this issue and let @mdo decide.

[mdo]

We’ll pass on them for now.

[nijikokun]

Just saw this and came here to note that "Vertical Alignment" and "Horizontal Alignment" for full page elements such as a Vertical / Centered login page won't work when you attempt to use the grid unless you apply 100vh / 100vw to the parents of your grid elements.

I went looking through the documentation and found the Sizing utility page that to my surprise only supported percentages. Shock! Horror! 😲

I ended up making my own utility helpers that I personally think should be in bootstrap. Not sure about a full blown scale like the original poster had in mind but something like the following was useful:

    .vwh-100 {
      width: 100vw;
      height: 100vh;
    }

    .vw-100 {
      width: 100vw;
    }

    .vh-100 {
      height: 100vh;
    }

As these kept cropping up (frequently) and were necessary to abstract out to retain a dry principle.

[Igcorreia]

@nijikokun I feel the same. In time they will considered it. You will see that more people will start requesting this feature or a variation of it.

[stevelacey]

For those looking for the scss to add these:

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $prop, $unit in (width: vw, height: vh) {
      @each $size in [25, 50, 75, 100] {
        .#{$unit}#{$infix}-#{$size} { #{$prop}: #{$size}#{$unit} !important; }
      }
    }
  }
}

[ExpDev07]

For those looking for the scss to add these:

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $prop, $unit in (width: vw, height: vh) {
      @each $size in [25, 50, 75, 100] {
        .#{$unit}#{$infix}-#{$size} { #{$prop}: #{$size}#{$unit} !important; }
      }
    }
  }
}

Can't this just be included in bootstrap?? I want my header to be min-vh-75 or min-vh-50, but only min-vh-100 is supported :(.