📪Sizing
Height Classes
.h-{number}
Sets the height of the element.
CSS equivalent: height: {number}px;
Example usage:
<div class="h-100">This element has a height of 100 pixels.</div>.h-{number}p
Sets the height of the element as a percentage of its parent container's height.
CSS equivalent: height: {number}%;
Example usage:
<div class="h-50p">This element has a height of 50% of its parent container's height.</div>.h-{number}vh
Sets the height of the element as a percentage of the viewport's height.
CSS equivalent: height: {number}vh;
Example usage:
<div class="h-50vh">This element has a height of 50% of the viewport's height.</div>Max Height Classes
.max-h-{number}vh
Sets the maximum height of the element as a percentage of the viewport's height.
CSS equivalent: max-height: {number}vh;
Example usage:
<div class="max-h-80vh">This element has a maximum height of 80% of the viewport's height.</div>Min Height Classes
.min-h-{number}vh
Sets the minimum height of the element as a percentage of the viewport's height.
CSS equivalent: min-height: {number}vh;
Example usage:
<div class="min-h-20vh">This element has a minimum height of 20% of the viewport's height.</div>Width Classes
.w-{number}
Sets the width of the element.
CSS equivalent: width: {number}px;
Example usage:
<div class="w-200">This element has a width of 200 pixels.</div>.w-{number}p
Sets the width of the element as a percentage of its parent container's width.
CSS equivalent: width: {number}%;
Example usage:
<div class="w-50p">This element has a width of 50% of its parent container's width.</div>Max Width Classes
.max-w-{number}
Sets the maximum width of the element.
CSS equivalent: max-width: {number}px;
Example usage:
<div class="max-w-300">This element has a maximum width of 300 pixels.</div>.max-w-{number}p
Sets the maximum width of the element as a percentage of its parent container's width.
CSS equivalent: max-width: {number}%;
Example usage:
<div class="max-w-80p">This element has a maximum width of 80% of its parent container's width.</div>Min Width Classes
.min-w-{number}
Sets the minimum width of the element.
CSS equivalent: min-width: {number}px;
Example usage:
<div class="min-w-300">This element has a minimum width of 300 pixels.</div>.min-w-{number}p
Sets the minimum width of the element as a percentage of its parent container's width.
CSS equivalent: min-width: {number}%;
Example usage:
<div class="min-w-20p">This element has a minimum width of 20% of its parent container's width.</div>Note: Replace {number} with the desired numeric value in the class names to achieve the desired height or width.
Last updated