col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-2
col-2
col-2
col-2
col-2
col-2
col-3
col-3
col-3
col-3
col-4
col-4
col-4
col-6
col-6
col-7
col-5
col-8
col-4
col-9
col-3
col-10
col-2
col-11
col-1
col-12
contenido
m-15 = margin:15px
contenido
m-10 = margin:10px
contenido
m-5 = margin:5px
margin - clases: m-1, m-2, m-3, m-4, m-5, m-10, m-15, m-20, m-25, m-30.
contenido
mt-15 = margin-top:15px
contenido
mr-15 = margin-right:15px
contenido
mb-15 = margin-bottom:15px
contenido
ml-15 = margin-left:15px
margin-top - clases: mt-1, mt-2, mt-3, mt-4, mt-5, mt-10, mt-15, mt-20, mt-25, mt-30.
margin-right - clases: mr-1, mr-2, mr-3, mr-4, mr-5, mr-10, mr-15, mr-20, mr-25, mr-30.
margin-bottom - clases: mb-1, mb-2, mb-3, mb-4, mb-5, mb-10, mb-15, mb-20, mb-25, mb-30.
margin-left - clases: ml-1, ml-2, ml-3, ml-4, ml-5, ml-10, ml-15, ml-20, ml-25, ml-30.
contenido
p-15 = padding:15px
contenido
p-10 = padding:10px
contenido
p-5 = padding:5px
padding - clases: p-1, p-2, p-3, p-4, p-5, p-10, p-15, p-20, p-25, p-30.
contenido
pt-15 = padding-top:15px
contenido
pr-15 = padding-right:15px
contenido
pb-15 = padding-bottom:15px
contenido
pl-15 = padding-left:15px
padding-top - clases: pt-1, pt-2, pt-3, pt-4, pt-5, pt-10, pt-15, pt-20, pt-25, pt-30.
padding-right - clases: pr-1, pr-2, pr-3, pr-4, pr-5, pr-10, pr-15, pr-20, pr-25, pr-30.
padding-bottom - clases: pb-1, pb-2, pb-3, pb-4, pb-5, pb-10, pb-15, pb-20, pb-25, pb-30.
padding-left - clases: pl-1, pl-2, pl-3, pl-4, pl-5, pl-10, pl-15, pl-20, pl-25, pl-30.
contenido
w10 = width:10%
contenido
w30 = width:30%
contenido
w60 = width:60%
contenido
w100 = width:100%
width (%) - clases: w10, w20, w30, w40, w50, w60, w70, w80, w90, w100.
contenido
estructura normal: container (o container-fluid) > row > col
contenido
cambia a 0 el padding derecho e izquierdo del col.
clase: prpl-0 (se aplica en el col).
contenido
cambia a 0 el margin derecho e izquierdo del row.
clase: row-nomargin (se aplica en el row).
contenido
cambia a 0 el margin derecho e izquierdo del row.
clase: row-nomargin (se aplica en el row).
contenido
cambia a 0 el padding derecho e izquierdo de las columnas.
clase: no-gutters (se aplica en el row).
contenido
cambia a 0 el padding derecho e izquierdo de las columnas.
clase: no-gutters (se aplica en el row).
clr-red-principal1
clr-red-secundario1
clr-red-principal2
clr-red-secundario2
clr-red-principal3
clr-red-secundario3
clr-opcional1
clr-opcional2
clr-opcional3
clr-opcional4
clr-opcional5
clr-opcional-pastel1
clr-opcional-pastel2
clr-opcional-pastel3
clr-opcional-pastel4
clr-black-100
clr-black-90
clr-black-80
clr-black-70
clr-black-60
clr-black-50
clr-black-40
clr-black-30
clr-black-20
clr-white
clr-white-txt (para textos blancos)
btn btn-principal
btn btn-principal-pago
btn btn-secundario
btn btn-desactivado
grosor light // Lorem ipsum dolor sit amet consectetur, adipisicing elit. // clase: light
grosor normal // Lorem ipsum dolor sit amet consectetur, adipisicing elit.
grosor medium // Lorem ipsum dolor sit amet consectetur, adipisicing elit. // clase: medium
grosor bold // Lorem ipsum dolor sit amet consectetur, adipisicing elit. // clase: bold
italica // Lorem ipsum dolor sit amet consectetur, adipisicing elit. // clase: italic
estilo de los link // clase: lnk
estilo de los link descativado // clase: lnk lnk-deshabilitado
texto tamaño -2 // tamaño de fuente: 14px // clase: txt-menos2
texto tamaño -1 // tamaño de fuente: 15px // clase: txt-menos1
texto tamaño normal // tamaño de fuente: 16px
texto tamaño +1 // tamaño de fuente: 17px // clase: txt-mas1
texto tamaño +2 // tamaño de fuente: 18px // clase: txt-mas2
Lorem ipsum dolor sit amet consectetur adipisicing elit.
clase: txt-left
Lorem ipsum dolor sit amet consectetur adipisicing elit.
clase: txt-center
Lorem ipsum dolor sit amet consectetur adipisicing elit.
clase: txt-right
Lorem ipsum dolor sit amet prueba para link consectetur adipisicing elit. voluptatum culpa deserunt consectetur placeat blanditiis tempora repellendus mollitia rerum at? Nemo, dicta aperiam rerum iste eos ipsum expedita ex alias? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor alias mollitia officiis harum perferendis possimus temporibus, distinctio nobis quo enim modi repudiandae voluptatibus deleniti architecto fuga dignissimos. Deleniti, nam consequuntur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, vel tenetur temporibus repellat magni sit omnis. Et, qui natus nesciunt commodi, quia quae iure dolorem quibusdam veniam repudiandae quam rerum?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, vel tenetur temporibus repellat magni sit omnis. Et, qui natus nesciunt commodi, quia quae iure dolorem quibusdam veniam repudiandae quam rerum?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, vel tenetur temporibus repellat magni sit omnis. Et, qui natus nesciunt commodi, quia quae iure dolorem quibusdam veniam repudiandae quam rerum?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, vel tenetur temporibus repellat magni sit omnis. Et, qui natus nesciunt commodi, quia quae iure dolorem quibusdam veniam repudiandae quam rerum?
Los campos marcados con * son obligatorios.