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
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> |
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> |
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> |
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> |
| --- | --- | --- |
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
| --- | --- | --- |