Clases disponibles

Disposición de Accesos.

• access-items-4
• access-items-4 row-cols-md-1
• access-items-3
• access-items-3 row-cols-md-1
• access-items-1

Estas son las clases de nuestra paleta de colores theme-colors.

• bg-primary
• bg-secondary
• bg-success
• bg-danger
• bg-warning
• bg-info
• bg-tertiary
• bg-light
• bg-dark
• bg-berries
• bg-sky
• form-bg-light

• border
• border-top
• border-right
• border-bottom
• border-left

• text-start
• text-center
• text-end
• text-sm-end
• text-md-end
• text-lg-end
• text-xl-end
• text-xxl-end

• fw-bold
• fw-bolder
• fw-semibold
• fw-medium
• fw-normal
• fw-light
• fw-lighter
• fst-italic
• fst-normal

• rounded
• rounded-top
• rounded-end
• rounded-bottom
• rounded-start
• rounded-circle
• rounded-pill

• border-0
• border-top-0
• border-right-0
• border-bottom-0
• border-left-0

• rounded-0
• rounded-1
• rounded-2
• rounded-3
• rounded-4
• rounded-5

• border border-1
• border border-2
• border border-3
• border border-4
• border border-5

Disposición de Calendario

• calendar-deck

Disposición de 2 en Destacado Conjunto.

• highlighted-items-2

Para xs:

• {propiedad}-{lado}-{tamaño}

Para sm, md, lg, xl y xxl :

• {propiedad}-{lado}-{breakpoint}-{tamaño}

Donde {propiedad} es uno de:

• m - para margin
• p - para padding

Donde {lado} es uno de:

• t - para margin o padding top
• b - para margin o padding bottom
• s - para margin o padding left
• s - para margin o padding right
• x - para margin o padding | left y right
• y - para margin o padding | top y bottom
• nada - para que aplique a los 4 lados del elemento

Clase base para flexbox:

Clases para flexbox con breakpoints:

Donde {breakpoint} puede ser uno de los siguientes valores:

• sm
• md
• lg
• xl
• xxl

Donde {alignment} es uno de: start, end, center, between, around, stretch.

• .align-content-{alignment}

Donde {breakpoint} es uno de: sm, md, lg, xl, xxl:

• .align-content-{breakpoint}-{alignment}

Donde {alignment} es uno de: start, end, center, between, around, stretch.

• .align-items-{alignment}

Donde {breakpoint} es uno de: sm, md, lg, xl, xxl:

• .align-items-{breakpoint}-{alignment}

Donde {alignment} es uno de: start, end, center, between, around, stretch.

• .align-self-{alignment}

Donde {breakpoint} es uno de: sm, md, lg, xl, xxl:

• .align-self-{breakpoint}-{alignment}

• .d-flex flex-row
• .d-flex flex-column
• .d-flex flex-row-reverse
• .d-flex flex-column-reverse

Clases para flexbox con breakpoints, donde {breakpoint} es uno de: sm, md, lg, xl, xxl:

• .flex-{breakpoint}-row
• .flex-{breakpoint}-row-reverse
• .flex-{breakpoint}-column
• .flex-{breakpoint}-column-reverse

Donde {alignment} es uno de: start, end, center, between, around, evenly.

• .justify-content-{alignment}

Donde {breakpoint} es uno de: sm, md, lg, xl, xxl:

• .justify-content-{breakpoint}-{alignment}

Donde {level} es uno de: 0, 1, 2, 3, 4, 5.

• .order-{level}
• .order-first
• .order-last

Clases para flexbox con breakpoints, donde {breakpoint} es uno de: sm, md, lg, xl, xxl:

• .order-{breakpoint}-{level}
• .order-{breakpoint}-first
• .order-{breakpoint}-last

• overflow-auto
• overflow-hidden
• overflow-visible
• overflow-scroll

Donde {direction} Toma x o y cómo valores, se puede indicar que sólo funcione horizontal o verticalmente

• overflow-{direction}-auto
• overflow-{direction}-hidden
• overflow-{direction}-visible
• overflow-{direction}-scroll

Modo de uso: {property}-{position}

Donde {property} es uno de:

• top
• start
• bottom
• end

Donde {position} es uno de:

• 0
• 50
• 100

• responsive-scroll

• shadow-none
• shadow-sm
• shadow
• shadow-lg

Estas clases, funcionan de manera relativa al contenedor padre.

Donde {quantity} es uno de: 25, 50, 75, 100, auto

• w-{quantity}
• h-{quantity}

Ancho y alto máximo 100%.

• max-height
• max-width

Ancho y alto relativo el viewport.

• min-vw-100
• min-vh-100
• vw-100
• vh-100

Disposición de Tarjetas

• card-items-3
• card-items-2
• vertical-cards-container

Truncado de Texto

Estas clases truncan el texto a 1, 2, 3 y 4 lineas.

• ellipsis-1
• ellipsis-2
• ellipsis-3
• ellipsis-4
• text-truncate