Element widths
There are four basic utilty classes that can be used to specify content element widths. These
classes are listed below:
wid-full - 100% width
wid-min - sets element width to min-content
wid-max - sets element width to max-content
wid-fit - sets element width to fit-content
wid-i - inherit parent width property
Although, the wid-full is specially designed to set element width to 100%, the directive
-full may also be allowed in some display items like flex items and boxes as though it is not
applicable in all cases. Another utility class that can be used to set an element's width is the vx-full class.
It sets the view width of any content (i.e relative to the screen width). Other width setting classes are listed below:
wper-50 - sets width at 50%
full-width - sets element width at 100%
ll-full - sets element width at 100%
The full-width and ll-full have a much higher effect when applied on elements than wid-full
though they are not strictly defined.
Element heights
Heights are mostly set based on the screen height. The two classes vh- and vhm- both measures the height of element
using the vh unit. While the vh- classes measure based on height, the vhm- classes measures based on minimum height.
Heights range from the vh-80 to vh-90 utility classes.
The vh-80 series include vh-80, vh-85 and vh-87 utility classes while the vh-90 series include vh-90, vh-95,
and vh-97 classes. This same logic is applied for the vhm- series. The digits on these classes identifies the vertical height (vh) they give. '
There are other classes that measures heights based on percentage. An example is the h-full class which sets the height of element to 100%.