Sizing
Learn how to resize your elements with the sizing utilities for width, height, and font to modify and design your elements easily with shorthand classes
Width Utilities
in the table below you can find a list of shorthand width properties class names to set a size for any element width, and you can use the grid columns classes for percentage width.
| Classname |
Description |
Markup |
.w-auto |
sets width size to auto. |
<any> |
.w-fluid, .fluid |
sets width size to 100%. |
<any> |
.w-50 |
sets width size to 50px. |
<any> |
.w-75 |
sets width size to 50px. |
<any> |
.w-100 |
sets width size to 100px. |
<any> |
.w-125 |
sets width size to 125px. |
<any> |
.w-150 |
sets width size to 150px. |
<any> |
.w-200 |
sets width size to 200px. |
<any> |
.w-225 |
sets width size to225px. |
<any> |
.w-250 |
sets width size to 250px. |
<any> |
.w-275 |
sets width size to 275px. |
<any> |
.w-300 |
sets width size to 300px. |
<any> |
.w-320 |
sets width size to 320px. |
<any> |
.w-#-${breakpoint} |
sets width size from a specific screen breakpoint and up. |
<any> |
.col-1 |
sets width size to 8.33333%. |
<any> |
.col-2 |
sets width size to 16.66667%. |
<any> |
.col-3 |
sets width size to 25%. |
<any> |
.col-4 |
sets width size to 33.33333%. |
<any> |
.col-5 |
sets width size to 41.66667%. |
<any> |
.col-6 |
sets width size to 50%. |
<any> |
.col-7 |
sets width size to58.33333%. |
<any> |
.col-8 |
sets width size to 66.66667% width. |
<any> |
.col-9 |
sets width size to 75%. |
<any> |
.col-10 |
sets width size to 83.33333%. |
<any> |
.col-11 |
sets width size to 91.66667%. |
<any> |
.col-12 |
sets width size to 100% width. |
<any> |
.col-{breakpoint}-# |
sets width size to #size from a specific screen breakpoint and up. |
<any> |
Height Utilities
in the table below you can find a list of shorthand height properties class names to set a size for any element, for rarely needed cases.
| Classname |
Description |
Markup |
.h-auto |
sets height size to auto. |
<any> |
.h-25 |
sets height size to 25%. |
<any> |
.h-50 |
sets height size to 50%. |
<any> |
.h-75 |
sets height size to 75%. |
<any> |
.h-100 |
sets height size to 100%. |
<any> |
.h-25vh |
sets height size to 25vh. |
<any> |
.h-50vh |
sets height size to 50vh. |
<any> |
.h-75vh |
sets height size to 75vh. |
<any> |
.h-100vh |
sets height size to 100vh. |
<any> |
Min & Max Height
in the table below you can find a list of shorthand max-height & min-height properties class names to set a size for any element max-height & min-height, for rarely needed cases.
| Classname |
Description |
Markup |
.h-min-25 |
set size of 25% min-height. |
<any> |
.h-min-50 |
set size of 50% min-height. |
<any> |
.h-min-75 |
set size of 75% min-height. |
<any> |
.h-min-100 |
set size of 100% min-height. |
<any> |
.h-min-25vh |
set size of 25vh min-height. |
<any> |
.h-min-50vh |
set size of 50vh min-height. |
<any> |
.h-min-75vh |
set size of 75vh min-height. |
<any> |
.h-min-100vh |
set size of 100vh min-height. |
<any> |
.h-{breakpoint}-min-* |
set the size of *** min-height. from a specific screen breakpoint and up. |
<any> |
| Classname |
Description |
Markup |
.h-max-25 |
set size of 25% max-height. |
<any> |
.h-max-50 |
set size of 50% max-height. |
<any> |
.h-max-75 |
set size of 75% max-height. |
<any> |
.h-max-100 |
set size of 100% max-height. |
<any> |
.h-max-25vh |
set size of 25vh max-height. |
<any> |
.h-max-50vh |
set size of 50vh max-height. |
<any> |
.h-max-75vh |
set size of 75vh max-height. |
<any> |
.h-max-100vh |
set size of 100vh max-height. |
<any> |
Min & Max Width
in the table below you can find a list of shorthand max-width & min-width properties class names to set a size for any element max-width & min-width, that matches screen sizes for common use cases.
| Classname |
Description |
Markup |
.w-min-2560 |
set size of 2560px min-width. |
<any> |
.w-min-1920 |
set size of 1920px min-width. |
<any> |
.w-min-1600 |
set size of 1600px min-height. |
<any> |
.w-min-1400 |
set size of 1400px min-width. |
<any> |
.w-min-1366 |
set size of 1366px min-width. |
<any> |
.w-min-1200 |
set size of 1200px min-width. |
<any> |
.w-min-1100 |
set size of 1100px min-width. |
<any> |
.w-min-768 |
set size of 768px min-width. |
<any> |
.w-min-640 |
set size of 640px min-width. |
<any> |
.w-min-570 |
set size of 570px min-width. |
<any> |
.w-min-480 |
set size of 480px min-width. |
<any> |
.w-min-420 |
set size of 420px min-width. |
<any> |
.w-min-390 |
set size of 390px min-width. |
<any> |
.w-min-360 |
set size of 360px min-width. |
<any> |
.w-min-320 |
set size of 320px min-width. |
<any> |
.w-min-260 |
set size of 260px min-width. |
<any> |
.w-min-200 |
set size of 200px min-width. |
<any> |
.w-min-180 |
set size of 180px min-width. |
<any> |
.w-min-150 |
set size of 150px min-width. |
<any> |
.w-min-120 |
set size of 120px min-width. |
<any> |
.w-min-90 |
set size of 90px min-width. |
<any> |
| Classname |
Description |
Markup |
.w-max-2560 |
set size of 2560px max-width. |
<any> |
.w-max-1920 |
set size of 1920px max-width. |
<any> |
.w-max-1600 |
set size of 1600px max-height. |
<any> |
.w-max-1400 |
set size of 1400px max-width. |
<any> |
.w-max-1366 |
set size of 1366px max-width. |
<any> |
.w-max-1200 |
set size of 1200px max-width. |
<any> |
.w-max-1100 |
set size of 1100px max-width. |
<any> |
.w-max-768 |
set size of 768px max-width. |
<any> |
.w-max-640 |
set size of 640px max-width. |
<any> |
.w-max-570 |
set size of 570px max-width. |
<any> |
.w-max-480 |
set size of 480px max-width. |
<any> |
.w-max-420 |
set size of 420px max-width. |
<any> |
.w-max-390 |
set size of 390px max-width. |
<any> |
.w-max-360 |
set size of 360px max-width. |
<any> |
.w-max-320 |
set size of 320px max-width. |
<any> |
.w-max-260 |
set size of 260px max-width. |
<any> |
.w-max-200 |
set size of 200px max-width. |
<any> |
.w-max-180 |
set size of 180px max-width. |
<any> |
.w-max-150 |
set size of 150px max-width. |
<any> |
.w-max-120 |
set size of 120px max-width. |
<any> |
.w-max-90 |
set size of 90px max-width. |
<any> |
Font sizes
in the table below you will find all font-size utility class names to help you control your content and style it in the best way you see fit, and it can be used from a specific breakpoint and up using .fs-{breakpoint}-* classes pattern
| Classname |
Description |
Markup |
.fs-12 |
adding font-size of 12px |
<any> |
.fs-13 |
adding font-size of 13px |
<any> |
.fs-14 |
adding font-size of .875rem (14px) |
<any> |
.fs-15 |
adding font-size of .9375rem (15px) |
<any> |
.fs-16 |
adding font-size of 1rem (16px) |
<any> |
.fs-17 |
adding font-size of 1.0625rem (17px) |
<any> |
.fs-18 |
adding font-size of 1.125rem (18px) |
<any> |
.fs-19 |
adding font-size of 1.1875rem (19px) |
<any> |
.fs-20 |
adding font-size of 1.25rem (20px) |
<any> |
.fs-{breakpoint}-* |
adding font size from a specific screen breakpoint and up |
<any> |
.small-text |
adding font-size of 0.875rem |
<any> |
.large-text |
adding font-size of 1.125rem and 1.25rem for xLarge screens |
<any> |
.h6 |
adding font-size of 1.25rem (17px) |
<any> |
.h5 |
adding font-size of 1.25rem (20px) |
<any> |
.h4 |
adding font-size of 1.25rem (23px) |
<any> |
.h3 |
adding font-size of 1.25rem (25px) |
<any> |
.h2 |
adding font-size of 1.25rem (28px) |
<any> |
.h1 |
adding font-size of 1.25rem (32px) |
<any> |
.display-h6 |
adding display font-size 2.25rem (36px) |
<any> |
.display-h5 |
adding display font-size 2.5rem (40px) |
<any> |
.display-h4 |
adding display font-size 2.75rem (44px) |
<any> |
.display-h3 |
adding display font-size 3rem (48px) |
<any> |
.display-h2 |
adding display font-size 3.25rem (52px) |
<any> |
.display-h1 |
adding display font-size 3.875rem (62px) |
<any> |