Learn how to resize your elements with the sizing utilities for width, height, 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
set a size of auto width.
<any>
.w-fluid, .fluid
set a size of 100% width.
<any>
.w-50
set a size of 50px width.
<any>
.w-75
set a size of 50px width.
<any>
.w-100
set a size of 100px width.
<any>
.w-125
set a size of 125px width.
<any>
.w-150
set a size of 150px width.
<any>
.w-200
set a size of 200px width.
<any>
.w-225
set a size of 225px width.
<any>
.w-250
set a size of 250px width.
<any>
.w-275
set a size of 275px width.
<any>
.w-300
set a size of 300px width.
<any>
.w-320
set a size of 320px width.
<any>
.w-#-${breakpoint}
ser a size from a specific screen breakpoint and up.
<any>
.col-1
set a size of 8.33333% width.
<any>
.col-2
set a size of 16.66667% width.
<any>
.col-3
set a size of 25% width.
<any>
.col-4
set a size of 33.33333% width.
<any>
.col-5
set a size of 41.66667% width.
<any>
.col-6
set a size of 50% width.
<any>
.col-7
set a size of 58.33333% width.
<any>
.col-8
set a size of 66.66667% width.
<any>
.col-9
set a size of 75% width.
<any>
.col-10
set a size of 83.33333% width.
<any>
.col-11
set a size of 91.66667% width.
<any>
.col-12
set a size of 100% width.
<any>
.col-{breakpoint}-#
set a size of * width from a specific screen breakpoint and up.
<any>
Note : ( —— ) refer 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 height, for rarely needed cases.
Classname
Description
Markup
.h-auto
set a size of auto height.
<any>
.h-25
set a size of 25% height.
<any>
.h-50
set a size of 50% height.
<any>
.h-75
set a size of 75% height.
<any>
.h-100
set a size of 100% height.
<any>
.h-25vh
set a size of 25vh height.
<any>
.h-50vh
set a size of 50vh height.
<any>
.h-75vh
set a size of 75vh height.
<any>
.h-100vh
set a size of 100vh height.
<any>
Note : ( —— ) refer 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 a size of 25%min-height.
<any>
.h-min-50
set a size of 50%min-height.
<any>
.h-min-75
set a size of 75%min-height.
<any>
.h-min-100
set a size of 100%min-height.
<any>
.h-min-25vh
set a size of 25vhmin-height.
<any>
.h-min-50vh
set a size of 50vhmin-height.
<any>
.h-min-75vh
set a size of 75vhmin-height.
<any>
.h-min-100vh
set a size of 100vhmin-height.
<any>
.h-{breakpoint}-min-*
set a size of *** min-height. from a specific screen breakpoint and up.
<any>
Note : ( —— ) refer to the same value as the column before.
Classname
Description
Markup
.h-max-25
set a size of 25%max-height.
<any>
.h-max-50
set a size of 50%max-height.
<any>
.h-max-75
set a size of 75%max-height.
<any>
.h-max-100
set a size of 100%max-height.
<any>
.h-max-25vh
set a size of 25vhmax-height.
<any>
.h-max-50vh
set a size of 50vhmax-height.
<any>
.h-max-75vh
set a size of 75vhmax-height.
<any>
.h-max-100vh
set a size of 100vhmax-height.
<any>
Note : ( —— ) refer 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 screens sizes for common use cases.
Classname
Description
Markup
.w-min-2560
set a size of 2560pxmin-width.
<any>
.w-min-1920
set a size of 1920pxmin-width.
<any>
.w-min-1600
set a size of 1600pxmin-height.
<any>
.w-min-1400
set a size of 1400pxmin-width.
<any>
.w-min-1366
set a size of 1366pxmin-width.
<any>
.w-min-1200
set a size of 1200pxmin-width.
<any>
.w-min-1100
set a size of 1100pxmin-width.
<any>
.w-min-768
set a size of 768pxmin-width.
<any>
.w-min-640
set a size of 640pxmin-width.
<any>
.w-min-570
set a size of 570pxmin-width.
<any>
.w-min-480
set a size of 480pxmin-width.
<any>
.w-min-420
set a size of 420pxmin-width.
<any>
.w-min-390
set a size of 390pxmin-width.
<any>
.w-min-360
set a size of 360pxmin-width.
<any>
.w-min-320
set a size of 320pxmin-width.
<any>
.w-min-260
set a size of 260pxmin-width.
<any>
.w-min-200
set a size of 200pxmin-width.
<any>
.w-min-180
set a size of 180pxmin-width.
<any>
.w-min-150
set a size of 150pxmin-width.
<any>
.w-min-120
set a size of 120pxmin-width.
<any>
.w-min-90
set a size of 90pxmin-width.
<any>
Note : ( —— ) refer to the same value as the column before.
Classname
Description
Markup
.w-max-2560
set a size of 2560pxmax-width.
<any>
.w-max-1920
set a size of 1920pxmax-width.
<any>
.w-max-1600
set a size of 1600pxmax-height.
<any>
.w-max-1400
set a size of 1400pxmax-width.
<any>
.w-max-1366
set a size of 1366pxmax-width.
<any>
.w-max-1200
set a size of 1200pxmax-width.
<any>
.w-max-1100
set a size of 1100pxmax-width.
<any>
.w-max-768
set a size of 768pxmax-width.
<any>
.w-max-640
set a size of 640pxmax-width.
<any>
.w-max-570
set a size of 570pxmax-width.
<any>
.w-max-480
set a size of 480pxmax-width.
<any>
.w-max-420
set a size of 420pxmax-width.
<any>
.w-max-390
set a size of 390pxmax-width.
<any>
.w-max-360
set a size of 360pxmax-width.
<any>
.w-max-320
set a size of 320pxmax-width.
<any>
.w-max-260
set a size of 260pxmax-width.
<any>
.w-max-200
set a size of 200pxmax-width.
<any>
.w-max-180
set a size of 180pxmax-width.
<any>
.w-max-150
set a size of 150pxmax-width.
<any>
.w-max-120
set a size of 120pxmax-width.
<any>
.w-max-90
set a size of 90pxmax-width.
<any>
Note : ( —— ) refer to the same value as the column before.
Font sizes
in the table below you will find all font-size utilities 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 : ( —— ) refer to the same value as the column before.
