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>
Note : ( —— ) refers to the same value as the column before.
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>
Note : ( —— ) refers to the same value as the column before.
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 25vhmin-height.
<any>
.h-min-50vh
set size of 50vhmin-height.
<any>
.h-min-75vh
set size of 75vhmin-height.
<any>
.h-min-100vh
set size of 100vhmin-height.
<any>
.h-{breakpoint}-min-*
set the size of *** min-height. from a specific screen breakpoint and up.
<any>
Note : ( —— ) refers to the same value as the column before.
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 25vhmax-height.
<any>
.h-max-50vh
set size of 50vhmax-height.
<any>
.h-max-75vh
set size of 75vhmax-height.
<any>
.h-max-100vh
set size of 100vhmax-height.
<any>
Note : ( —— ) refers to the same value as the column before.
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 2560pxmin-width.
<any>
.w-min-1920
set size of 1920pxmin-width.
<any>
.w-min-1600
set size of 1600pxmin-height.
<any>
.w-min-1400
set size of 1400pxmin-width.
<any>
.w-min-1366
set size of 1366pxmin-width.
<any>
.w-min-1200
set size of 1200pxmin-width.
<any>
.w-min-1100
set size of 1100pxmin-width.
<any>
.w-min-768
set size of 768pxmin-width.
<any>
.w-min-640
set size of 640pxmin-width.
<any>
.w-min-570
set size of 570pxmin-width.
<any>
.w-min-480
set size of 480pxmin-width.
<any>
.w-min-420
set size of 420pxmin-width.
<any>
.w-min-390
set size of 390pxmin-width.
<any>
.w-min-360
set size of 360pxmin-width.
<any>
.w-min-320
set size of 320pxmin-width.
<any>
.w-min-260
set size of 260pxmin-width.
<any>
.w-min-200
set size of 200pxmin-width.
<any>
.w-min-180
set size of 180pxmin-width.
<any>
.w-min-150
set size of 150pxmin-width.
<any>
.w-min-120
set size of 120pxmin-width.
<any>
.w-min-90
set size of 90pxmin-width.
<any>
Note : ( —— ) refers to the same value as the column before.
Classname
Description
Markup
.w-max-2560
set size of 2560pxmax-width.
<any>
.w-max-1920
set size of 1920pxmax-width.
<any>
.w-max-1600
set size of 1600pxmax-height.
<any>
.w-max-1400
set size of 1400pxmax-width.
<any>
.w-max-1366
set size of 1366pxmax-width.
<any>
.w-max-1200
set size of 1200pxmax-width.
<any>
.w-max-1100
set size of 1100pxmax-width.
<any>
.w-max-768
set size of 768pxmax-width.
<any>
.w-max-640
set size of 640pxmax-width.
<any>
.w-max-570
set size of 570pxmax-width.
<any>
.w-max-480
set size of 480pxmax-width.
<any>
.w-max-420
set size of 420pxmax-width.
<any>
.w-max-390
set size of 390pxmax-width.
<any>
.w-max-360
set size of 360pxmax-width.
<any>
.w-max-320
set size of 320pxmax-width.
<any>
.w-max-260
set size of 260pxmax-width.
<any>
.w-max-200
set size of 200pxmax-width.
<any>
.w-max-180
set size of 180pxmax-width.
<any>
.w-max-150
set size of 150pxmax-width.
<any>
.w-max-120
set size of 120pxmax-width.
<any>
.w-max-90
set size of 90pxmax-width.
<any>
Note : ( —— ) refers to the same value as the column before.
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>
.display-{breakpoint}-h*
adding display font size from a specific screen breakpoint and up
<any>
Note : ( —— ) refers to the same value as the column before.
