Espaciado
Posicionamiento
Tamaño
Secciones
Imagenes
Alineacion de texto
Animaciones
Colores
Typo
Formulario
Miscelanea

Margenes

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

Otros margenes

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

col-padding
col-md-padding
col-sm-padding
col-xs-padding
col-padding-0

Posicionamientos

Displays

display-block
display-v-flex
display-h-flex
display-inline-block

Alineamiento en flex

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

Positions

position-relative
position-static
position-absolute

Floats

float-left
float-right
clear-both

Displays md

display-md-block
display-md-v-flex
display-md-h-flex
display-md-inline-block
display-md-none

Alineamiento en flex 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

Positions md

position-md-relative
position-md-static

Floats md

float-md-left
float-md-right
clear-md-both

Displays sm

display-sm-block
display-sm-v-flex
display-sm-h-flex
display-sm-inline-block
display-sm-none

Alineamiento en flex 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

Positions sm

position-sm-relative
position-sm-static

Floats sm

float-sm-left
float-sm-right
clear-sm-both

Displays xs

display-xs-block
display-xs-v-flex
display-xs-h-flex
display-xs-inline-block
display-xs-none

Alineamiento en flex 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

Positions xs

position-xs-relative
position-xs-static

Floats xs

float-xs-left
float-xs-right
clear-xs-both

Otros posicionamientos

stick-left
stick-right
strick-top
sstick-bottom

Tamaños

Viewport width

vw-25
vw-50
vw-75
vw-100

Viewport height

vh-25
vh-50
vh-75
vh-100

Viewport width md

vw-md-25
vw-md-50
vw-md-75
vw-md-100

Viewport height md

vh-md-25
vh-md-50
vh-md-75
vh-md-100

Viewport width sm

vw-sm-25
vw-sm-50
vw-sm-75
vw-sm-100

Viewport height sm

vh-sm-25
vh-sm-50
vh-sm-75
vh-sm-100

Viewport width xs

vw-xs-25
vw-xs-50
vw-xs-75
vw-xs-100

Viewport height xs

vh-xs-25
vh-xs-50
vh-xs-75
vh-xs-100

Otros tamaños

full-width
full-md-width
full-sm-width
full-xs-width
full-height
full-md-height
full-sm-height
full-xs-height

Secciones

Contenedores

container-slim
container-wide
screen-container
row

Cols

col-1
col-2
col-3
col-4
col-5
col-6
col-7
col-8
col-9
col-10
col-11
col-12

Cols 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

Cols 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

Cols 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

Alineacion de texto

Alineacion

text-center
text-left
text-right
text-justify

Alineacion md

text-md-center
text-md-left
text-md-right
text-md-justify

Alineacion sm

text-sm-center
text-sm-left
text-sm-right
text-sm-justify

Alineacion xs

text-xs-center
text-xs-left
text-xs-right
text-xs-justify

Animaciones de entrada

Slide

slide-left
slide-right
slide-top
slide-bottom

Fade

fade-in

Zoom

zoom-in
zoom-out

Animaciones de carga

Slide

load-slide-left
load-slide-right
load-slide-top
load-slide-bottom

Fade

load-fade-in

Otras animaciones

Toggler

toggler-container close open toggler-content

Spinner

This is a spinner example

This is some text inside of a div block.

Colores

Colores de fondo

bg-black
bg-white
bg-red
bg-coal
bg-green
bg-cream
bg-gray
bg-light-green
bg-yellow
bg-gold
bg-sand
bg-light-sand
bg-pink

Colores de texto

text-black
text-white
text-red
text-coal
text-green
text-gray
text-cream
text-light-green
text-yellow
text-gold
text-sand
text-light-sand
text-pink

Tipografia

Headings

h1

h2

h3

h4

eyebrow

label

Botones

Texto normal

text-big

normal paragraph

text-small

Miscelanea

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