Bootstrap: Add vh 25,50,75 and 100

[guledali]

https://getbootstrap.com/docs/4.1/utilities/sizing/

[desvu]

It's a good idea. It will be very useful.
Add mvh-100

[guledali]

/* Margin */

.mt-25 {
   margin-top: 25% !important;
}
.mt-50{
    margin-top: 50% !important;
}
.mt-75{
    margin-top: 75% !important;
}
.mt-100{
    margin-top: 100% !important;
}

.mr-25 {
   margin-right: 25% !important;
}
.mr-50{
    margin-right: 50% !important;
}
.mr-75{
    margin-right: 75% !important;
}
.mr-100{
    margin-right: 100% !important;
}

.mb-25 {
    margin-bottom: 25% !important;
}
.mb-50{
    margin-bottom: 50% !important;
}
.mb-75{
    margin-bottom: 75% !important;
}
.mb-100{
    margin-bottom: 100% !important;
}

.ml-25 {
   margin-left: 25% !important;
}
.ml-50{
    margin-left: 50% !important;
}
.ml-75{
    margin-left: 75% !important;
}
.ml-100{
    margin-left: 100% !important;
}

/* Margin ends */


/* Padding */

.pt-25 {
   padding-top: 25% !important;
}
.pt-50{
    padding-top: 50% !important;
}
.pt-75{
    padding-top: 75% !important;
}
.pt-100{
    padding-top: 100% !important;
}

.pr-25 {
   padding-right: 25% !important;
}
.pr-50{
    padding-right: 50% !important;
}
.pr-75{
    padding-right: 75% !important;
}
.pr-100{
    padding-right: 100% !important;
}

.pb-25 {
    padding-bottom: 25% !important;
}
.pb-50{
    padding-bottom: 50% !important;
}
.pb-75{
    padding-bottom: 75% !important;
}
.pb-100{
    padding-bottom: 100% !important;
}

.pl-25 {
   padding-left: 25% !important;
}
.pl-50{
    padding-left: 50% !important;
}
.pl-75{
    padding-left: 75% !important;
}
.pl-100{
    padding-left: 100% !important;
}

/* Padding ends */

[galczo5]

I can try to do it.

[guledali]

@galczo5 Please also add margin and padding utilities that I have posted above. I'm kinda tired of including tacyons css along side bootstrap to this.

[galczo5]

Ok, I will do it tomorrow

[guledali]

@galczo5 Thanks mate

[galczo5]

@guledali I've just added requested classes

[XhmikosR]

Closing https://github.com/twbs/bootstrap/pull/27397#issuecomment-431605637

[leecollings]

This needs to be re-opened as the docs state:

You can also use utilities to set the width and height relative to the viewport.

However, when using the class vh-25 there are no styles in the stylesheet for this.

The documentation is incorrect.

[guledali]

@leecollings That because they don't directly support that, a trick is set the container to vh-100 and the child to h-25.

<div class="vh-100 bg-dark">
  <div class="h-25 bg-light">
 </div>
</div>