Clases

Documentación y ejemplos

Separadores

Añadir las clase .title u otra, al encabezado .h1, .h2, .h3... con el tamaño deseado.

Clases Información
.separa Añadir a la clase .separa los tamaños: xxl-size, xl-size, l-size, s-size, xs-size.
.p-1 .p-2 .p-3 .p-4 .p-5 Añade un padding pequeño de 0.375rem hasta un padding de 2.75rem.
.ma

Añade un margen por todos lados margin desde 0.5rem. Se pueden utilizar las clases ma-s-size con separación de 0.25rem, ma-l-size con separación de 1rem y ma-xl-size con separación de 1.5rem.
.mr

Añade un margen por la derecha margin-right de 0.5rem. Se puede utilizar la clase mr-s-size para añadir una separación mas pequeña de .25rem.
.ml

Añade un margen por la izquierda margin-left de 0.5rem. Se puede utilizar la clase ml-s-size para añadir una separación mas pequeña de .25rem.
.mt

Añade un margen por arriba margin-top de 1rem. Se puede utilizar la clase mt-s-size para añadir una separación mas pequeña de .25rem.
.mb

Añade un margen por abajo margin-bottom de 1rem. Se puede utilizar la clase mb-s-size para añadir una separación mas pequeña de .25rem.
.mtb

Añade un margen por arriba y por abajo margin-top margin-bottom de 0.5rem. Se puede utilizar la clase mtb-s-size para añadir una separación mas pequeña de .25rem y utilizar la clase mtb-l-size para añadir una separación mayor de .1rem.
.contenido-maxwidth Añadir a la clase .contenido-maxwidth los tamaños: xl-size, l-size, s-size, xs-size para delimitar los tamaños máximos del contenedor a 850px (por defecto), 1400px (xl-size), 1200px (l-size), 650px (s-size) y 520px (xs-size).
.der o .float-right, .izq o .float-left, .float-none Añadir a las clases para flotar un elmento a la derecha, izquierda o no flotarlo. Para que flote en tablet o no lo haga añadir .float-tablet-right o .float-tablet-left o .float-tablet-none y para móvil añadir .float-movil-right o .float-movil-left o .float-movil-none.

Iconos (para fuentes e imágenes)

Clases Información
.icono-fon Añadir a la clase .icono-fon para un FLATICON con los tamaños: xxl-size, xl-size, l-size, s-size, xs-size.
.icono-img Añadir a la clase .icono-img para una IMAGEN con los tamaños: xxl-size, xl-size, l-size, s-size, xs-size.
.avatar

Añadir a la clase .avatar para FUENTES o IMÁGENES con los tamaños: xxs-size, xs-size, s-size, l-size, xl-size, xxl-size.

JA

Añadir el contenedor .avatar-group para que se coloquen en línea ocupando el menor espacio posible.

2

Animaciones (auto y hover)

Clases Información
.ani-rotar-der, .ani-tada... Añadir las clases .ani-rotar-der, .ani-rotar-izq, .ani-agrandar, .ani-tada, .ani-izqder, .ani-fade, .ani-bounce
.ani-rotar, .ani-crecer... Añadir las clases .ani-rotar360, .ani-rotar, .ani-expandir, .ani-crecer, .ani-mov-horizontal, .ani-opacidad para que se ejecute al hacer HOVER sobre un objeto.

Cargadores

Clases Información
.spinner-border Añadir las clases .spinner-border y .spinner y luego los tamaños: s-size, l-size, xl-size, xxl-size.
.spinner-grow Añadir las clases .spinner-grow y .spinner y luego los tamaños: s-size, l-size, xl-size, xxl-size.

Posición imágenes

Clases Información
.position-top-right, .position-bottom-left... Añadir a las clases de la posición: .position-bottom-left, .position-bottom-right, .position-middle... dentro de un contenedor con clase .relative.
1
2
3
4
5
6
7
8
9

Tooltip (solo html)

Clases Información
.tooltip top, .tooltip bottom... Añadir a la clase .tooltip con la posición del mensaje .top, .bottom, .left, .right y dentro la clase del mensaje .tiptext con lo su color: rojo, verde y gris por defecto es negro.
Arriba Texto del tooltip
Abajo Texto del tooltip
Izquierda Texto del tooltip
Derecha Texto del tooltip

Compartir (share)

Clases Información
.share, .share mini, .share nomostrar .share mini rounded... Añadir la clase .share y dentro el href con las clases de las redes sociales.
Añadir la clase .share y la clase .rounded para hacer los botones circulares. Añadir también la clase .nomostrar para que no se vea el mensaje al hacer hover.
Añadir la clase .share y la clase .mini para el botón mas pequeño. Si no se añade span tampoco sale mensaje al hacer hover.

Timeline

  • 13/11/2021

    Título del timeline.

    ddd
  • 13 Nov

    Re-submitted KYC Application form.

    ddd
  • 13 Nov

    Re-submitted KYC Application form.

    Re-submitted KYC Application form.

    09:30am

Tree (tiene javascript)

Resolución: