Website Classes Template
Spacing
Margins
Margin bottom
mb-auto
mb-0
mb-1
mb-2
mb-3
mb-4
mb-5
mb-6
mb-7
mb-8
Margin top
mt-auto
mt-0
mt-1
mt-2
mt-3
mt-4
mt-5
mt-6
mt-7
mt-8
Margin left
ml-auto
ml-0
ml-1
ml-2
ml-3
ml-4
ml-5
ml-6
ml-7
ml-8
Margin right
mr-auto
mr-0
mr-1
mr-2
mr-3
mr-4
mr-5
mr-6
mr-7
mr-8
Margin bottom tablet (md)
mb-md-auto
mb-md-0
mb-md-1
mb-md-2
mb-md-3
mb-md-4
mb-md-5
mb-md-6
mb-md-7
mb-md-8
Margin top tablet (md)
mt-md-auto
mt-md-0
mt-md-1
mt-md-2
mt-md-3
mt-md-4
mt-md-5
mt-md-6
mt-md-7
mt-md-8
Margin left tablet (md)
ml-md-auto
ml-md-0
ml-md-1
ml-md-2
ml-md-3
ml-md-4
ml-md-5
ml-md-6
ml-md-7
ml-md-8
Margin right tablet (md)
mr-md-auto
mr-md-0
mr-md-1
mr-md-2
mr-md-3
mr-md-4
mr-md-5
mr-md-6
mr-md-7
mr-md-8
Margin bottom mobile landscape (sm)
mb-sm-auto
mb-sm-0
mb-sm-1
mb-sm-2
mb-sm-3
mb-sm-4
mb-sm-5
mb-sm-6
mb-sm-7
mb-sm-8
Margin top mobile landscape (sm)
mt-sm-auto
mt-sm-0
mt-sm-1
mt-sm-2
mt-sm-3
mt-sm-4
mt-sm-5
mt-sm-6
mt-sm-7
mt-sm-8
Margin left mobile landscape (sm)
ml-sm-auto
ml-sm-0
ml-sm-1
ml-sm-2
ml-sm-3
ml-sm-4
ml-sm-5
ml-sm-6
ml-sm-7
ml-sm-8
Margin right mobile landscape (sm)
mr-sm-auto
mr-sm-0
mr-sm-1
mr-sm-2
mr-sm-3
mr-sm-4
mr-sm-5
mr-sm-6
mr-sm-7
mr-sm-8
Margin bottom mobile portrait (xs)
mb-xs-auto
mb-xs-0
mb-xs-1
mb-xs-2
mb-xs-3
mb-xs-4
mb-xs-5
mb-xs-6
mb-xs-7
mb-xs-8
Margin top mobile portrait (xs)
mt-xs-auto
mt-xs-0
mt-xs-1
mt-xs-2
mt-xs-3
mt-xs-4
mt-xs-5
mt-xs-6
mt-xs-7
mt-xs-8
Margin left mobile portrait (xs)
ml-xs-auto
ml-xs-0
ml-xs-1
ml-xs-2
ml-xs-3
ml-xs-4
ml-xs-5
ml-xs-6
ml-xs-7
ml-xs-8
Margin right mobile portrait (xs)
mr-xs-auto
mr-xs-0
mr-xs-1
mr-xs-2
mr-xs-3
mr-xs-4
mr-xs-5
mr-xs-6
mr-xs-7
mr-xs-8
Other margins
mx-auto
mx-md-auto
mx-sm-auto
mx-xs-auto
my-auto
my-md-auto
my-sm-auto
my-xs-auto
m-auto
m-md-auto
m-sm-auto
m-xs-auto
Paddings
Padding bottom
pb-0
pb-1
pb-2
pb-3
pb-4
pb-5
pb-6
pb-7
pb-8
Padding top
pt-0
pt-1
pt-2
pt-3
pt-4
pt-5
pt-6
pt-7
pt-8
Padding left
pl-0
pl-1
pl-2
pl-3
pl-4
pl-5
pl-6
pl-7
pl-8
Padding right
pr-0
pr-1
pr-2
pr-3
pr-4
pr-5
pr-6
pr-7
pr-8
Padding in Y axis
py-0
py-1
py-2
py-3
py-4
py-5
py-6
py-7
py-8
Padding in X axis
px-0
px-1
px-2
px-3
px-4
px-5
px-6
px-7
px-8
Padding bottom tablet (md)
pb-md-0
pb-md-1
pb-md-2
pb-md-3
pb-md-4
pb-md-5
pb-md-6
pb-md-7
pb-md-8
Padding top tablet (md)
pt-md-0
pt-md-1
pt-md-2
pt-md-3
pt-md-4
pt-md-5
pt-md-6
pt-md-7
pt-md-8
Padding left tablet (md)
pl-md-0
pl-md-1
pl-md-2
pl-md-3
pl-md-4
pl-md-5
pl-md-6
pl-md-7
pl-md-8
Padding right tablet (md)
pr-md-0
pr-md-1
pr-md-2
pr-md-3
pr-md-4
pr-md-5
pr-md-6
pr-md-7
pr-md-8
Padding in Y axis tablet (md)
py-md-0
py-md-1
py-md-2
py-md-3
py-md-4
py-md-5
py-md-6
py-md-7
py-md-8
Padding in X axis tablet (md)
px-md-0
px-md-1
px-md-2
px-md-3
px-md-4
px-md-5
px-md-6
px-md-7
px-md-8
Padding bottom mobile landscape (sm)
pb-sm-0
pb-sm-1
pb-sm-2
pb-sm-3
pb-sm-4
pb-sm-5
pb-sm-6
pb-sm-7
pb-sm-8
Padding top mobile landscape (sm)
pt-sm-0
pt-sm-1
pt-sm-2
pt-sm-3
pt-sm-4
pt-sm-5
pt-sm-6
pt-sm-7
pt-sm-8
Padding left mobile landscape (sm)
pl-sm-0
pl-sm-1
pl-sm-2
pl-sm-3
pl-sm-4
pl-sm-5
pl-sm-6
pl-sm-7
pl-sm-8
Padding right mobile landscape (sm)
pr-sm-0
pr-sm-1
pr-sm-2
pr-sm-3
pr-sm-4
pr-sm-5
pr-sm-6
pr-sm-7
pr-sm-8
Padding in Y axis mobile landscape (sm)
py-sm-0
py-sm-1
py-sm-2
py-sm-3
py-sm-4
py-sm-5
py-sm-6
py-sm-7
py-sm-8
Padding in X axis mobile landscape (sm)
px-sm-0
px-sm-1
px-sm-2
px-sm-3
px-sm-4
px-sm-5
px-sm-6
px-sm-7
px-sm-8
Padding bottom mobile portrait (xs)
pb-xs-0
pb-xs-1
pb-xs-2
pb-xs-3
pb-xs-4
pb-xs-5
pb-xs-6
pb-xs-7
pb-xs-8
Padding top mobile portrait (xs)
pt-xs-0
pt-xs-1
pt-xs-2
pt-xs-3
pt-xs-4
pt-xs-5
pt-xs-6
pt-xs-7
pt-xs-8
Padding left mobile portrait (xs)
pl-xs-0
pl-xs-1
pl-xs-2
pl-xs-3
pl-xs-4
pl-xs-5
pl-xs-6
pl-xs-7
pl-xs-8
Padding right mobile portrait (xs)
pr-xs-0
pr-xs-1
pr-xs-2
pr-xs-3
pr-xs-4
pr-xs-5
pr-xs-6
pr-xs-7
pr-xs-8
Padding in Y axis mobile portrait (xs)
py-xs-0
py-xs-1
py-xs-2
py-xs-3
py-xs-4
py-xs-5
py-xs-6
py-xs-7
py-xs-8
Padding in X axis mobile portrait (xs)
px-xs-0
px-xs-1
px-xs-2
px-xs-3
px-xs-4
px-xs-5
px-xs-6
px-xs-7
px-xs-8
Otros padding styles
col-padding
col-md-padding
col-sm-padding
col-xs-padding
col-padding-0
Positioning
Display type
display-block
display-v-flex
display-h-flex
display-inline-block
display-none
Flex alignment
order-last
v-vertical-start
v-vertical-center
v-vertical-end
v-horizontal-start
h-horizontal-space-between
h-horizontal-space-around
v-vertical-space-between
v-vertical-space-around
v-horizontal-end
v-horizontal-center
v-full-center
h-vertical-start
h-vertical-center
h-vertical-end
h-horizontal-start
h-horizontal-center
h-horizontal-end
h-full-center
order-first
Position styles
position-relative
position-static
position-absolute
Floats
float-left
float-right
clear-both
Display type tablet (md)
display-md-block
display-md-v-flex
display-md-h-flex
display-md-inline-block
display-md-none
Flex alignment tablet (md)
order-md-last
v-md-vertical-center
v-md-vertical-center
v-md-vertical-end
v-md-horizontal-start
v-md-horizontal-center
v-md-horizontal-end
v-md-full-center
h-md-vertical-start
h-md-vertical-center
h-md-vertical-end
h-md-horizontal-start
h-md-horizontal-center
h-md-horizontal-end
h-md-full-center
order-md-first
Position styles tablet (md)
position-md-relative
position-md-static
Floats tablet (md)
float-md-left
float-md-right
clear-md-both
Display type mobile landscape (sm)
display-sm-block
display-sm-v-flex
display-sm-h-flex
display-sm-inline-block
display-sm-none
Flex alignment mobile landscape (sm)
order-sm-last
v-sm-vertical-start
v-sm-vertical-center
v-sm-vertical-end
v-sm-horizontal-start
v-sm-horizontal-center
v-sm-horizontal-end
v-sm-full-center
h-sm-vertical-start
h-sm-vertical-center
h-sm-vertical-end
h-sm-horizontal-start
h-sm-horizontal-center
h-sm-horizontal-end
h-sm-full-center
order-sm-first
Position styles mobile landscape (sm)
position-sm-relative
position-sm-static
Floats mobile landscape (sm)
float-sm-left
float-sm-right
clear-sm-both
Display type mobile portrait (xs)
display-xs-block
display-xs-v-flex
display-xs-h-flex
display-xs-inline-block
display-xs-none
Flex alignment mobile portrait (xs)
order-xs-last
v-xs-vertical-start
v-xs-vertical-center
v-xs-vertical-end
v-xs-horizontal-start
v-xs-horizontal-center
v-xs-horizontal-end
v-xs-full-center
h-xs-vertical-start
h-xs-vertical-center
h-xs-vertical-end
h-xs-horizontal-start
h-xs-horizontal-center
h-xs-horizontal-end
h-xs-full-center
order-xs-first
Position styles mobile portrait (xs)
position-xs-relative
position-xs-static
Floats mobile portrait (xs)
float-xs-left
float-xs-right
clear-xs-both
Other positioning styles
stick-left
stick-right
strick-top
sstick-bottom
Sizing
Viewport width
vw-25
vw-50
vw-75
vw-100
Viewport height
vh-25
vh-50
vh-75
vh-100
Viewport width tablet (md)
vw-md-25
vw-md-50
vw-md-75
vw-md-100
Viewport height tablet (md)
vh-md-25
vh-md-50
vh-md-75
vh-md-100
Viewport width mobile landscape (sm)
vw-sm-25
vw-sm-50
vw-sm-75
vw-sm-100
Viewport height mobile landscape (sm)
vh-sm-25
vh-sm-50
vh-sm-75
vh-sm-100
Viewport width mobile portrait (xs)
vw-xs-25
vw-xs-50
vw-xs-75
vw-xs-100
Viewport height mobile portrait (xs)
vh-xs-25
vh-xs-50
vh-xs-75
vh-xs-100
Other sizing styles
full-width
full-md-width
full-sm-width
full-xs-width
full-height
full-md-height
full-sm-height
full-xs-height
Sections
Containers
container-slim
container-wide
screen-container
row
Columns
col-1
col-2
col-3
col-4
col-5
col-6
col-7
col-8
col-9
col-10
col-11
col-12
Columns tablet (md)
col-md-1
col-md-2
col-md-3
col-md-4
col-md-5
col-md-6
col-md-7
col-md-8
col-md-9
col-md-10
col-md-11
col-md-12
Columns mobile landscape (sm)
col-sm-1
col-sm-2
col-sm-3
col-sm-4
col-sm-5
col-sm-6
col-sm-7
col-sm-8
col-sm-9
col-sm-10
col-sm-11
col-sm-12
Columns mobile portrait (xs)
col-xs-1
col-xs-2
col-xs-3
col-xs-4
col-xs-5
col-xs-6
col-xs-7
col-xs-8
col-xs-9
col-xs-10
col-xs-11
col-xs-12
Images
Text Alignments
Alignment styles
text-center
text-left
text-right
text-justify
Alignment styles tablet (md)
text-md-center
text-md-left
text-md-right
text-md-justify
Alingment styles mobile landscape (sm)
text-sm-center
text-sm-left
text-sm-right
text-sm-justify
Alingment styles mobile portrait (xs)
text-xs-center
text-xs-left
text-xs-right
text-xs-justify
Animations
"In" animations
Slide
Fade
fade-in
Zoom
zoom-in
zoom-out
Load animations
Slide
load-slide-right
load-slide-top
Fade
load-fade-in
Other animations
Toggler
toggler-container close open toggler-content
Spinner
This is a spinner example
Colors
Background colors
Add here the background color classes for the project you'll be building.
Light Chocolate: bg-{color-class}
Text colors
Add here the text color classes for the project you'll be building.
Light Chocolate: bg-{color-class}
Typography
Style the following classes based on the styling of the design system for the project you'll be building.
Headings
h1
h2
h3
h4
eyebrow
label
Navigation
Buttons
Text classes
text-big
normal paragraph
text-small
copyright
Forms
Style the elements inside this form to match the styling of the design system of the project you'll be building.
Miscelaneous
Font weight (just works if the typo has support for it)
weight-light
weight-normal
weight-bold
Text decoration
text-uppercase
font-italic
text-decoration-none
Overflow
o-hidden