La clase.line al ser añadida a algún tag html agrega una franja debajo del elemento con colores por defecto del diseño de gobierno, como en el título principal de esta documentación.

La clase.line-x, donde x es el nombre de uno de los colores mencionados en la sección colores, al ser añadida junto a la clase.line, permite elegir un color diferente para la franja completa.

A continuación, una lista con las franjas en los distintos colores disponibles:

Una forma sencilla de añadir imágenes como background se logra utilizando los data-attributes implementados para estos casos:

• data-background especifica la referencia a la imágen que se quiere utilizar de fondo.
• data-opacity especifica si se quiere el comportamiento hover.
• data-background-video especifica la referencia a un recurso tipo video.

Fondo simple #

El siguiente ejemplo es un div con un background sencillo:

Fondo con efecto #

Es lo mismo que lo anterior pero activando el efecto hover:

Fondo con video #

Para añadir un video como background tiene que especificar la imágen placeholder con data-background y el enlace al recurso con data-background-video.

El siguiente ejemplo utiliza un video obtenido desde la documentación del elemento video en mdn.

Fondo con el plugin pseudo-background #

Otra herramienta disponible para los fondos es la clasepseudo-background. Si bien tiene un comportamiento similar al Fondo simple, esta clase es compatible con navegadores que no soportan o permiten el uso de javascript dado que utiliza el tag html img:

Bootstrap provee de varias clases de utilidad que permiten dar estilo sin la necesidad de crear nuevas clases. Este kit agrega nuevas clases y extiende otras de manera de ampliar las posibilidades:

• .list-inline: Ordena los elementos de una lista en una misma fila.
• .text-underline: Decora con subrayado el texto.
• .text-normal: Remueve las transformaciones y decorados de un texto.
• .text-break: Hace que un texto haga salto de línea y esconda el exceso por overflow por palabra en vez de letra.
• .border-$infix: Por cada $infix (breakpoint) define un borde de ancho y color definido por el tema. Ejemplo, .border-md.
• .border-$infix-$side: Por cada $infix (breakpoint) define un borde en la dirección $side (top, right, bot left) de ancho y color definido por el tema. Ejemplo, .border-md-top.
• .text-$color: Aplica el color $color al texto. Ejemplo, .text-primary.
• a.text-$color:focus: Aplica el color $color al texto de un anchor en la acción focus. Ejemplo, a.text-primary
• .badge-$color: Aplica cambio de color al contenido y al fondo de acuerdo a lo definido para cada $color del tema. Ejemplo, .badge-primary.
• .bg-layer-$color: Añade un background de color $color como pseudo elemento.
• .col-separator-$color: Añade un separador de columnas hijas del elemento de color $color. Ejemplo, .col-separator-primary.
• .border-$color: Aplica el color $color al borde. Ejemplo, .border-primary.
• .text-before-$color: Aplica el color $color a un pseudo elemento que esté antes de este. Ejemplo, .text-before-primary.
• .text-after-$color: Aplica el color $color a un pseudo elemento que esté después de este. Ejemplo, .text-after-primary.
• .bg-before-$color: Aplica el color $color al fondo de un pseudo elemento que esté antes de este. Ejemplo, .text-after-primary.
• .bg-after-$color: Aplica el color $color al fondo de un pseudo elemento que esté antes de este. Ejemplo, .text-after-primary.
• .square-text-$color: Aplica el color y fondo $color al cuadrado de texto. Ejemplo, .square-text-primary.
• .border$infix-$color: Aplica el color $color al borde activo en el breakpoint $infix.
• .close: Deja en normal el valor para font-style.
• .opacity: Aplica una opacidad definida por el tema.
• .square-text-$key: Define un cuadrado de texto, con color gray-a y fondo neutral en bold para un tamaño $key. Ejemplo, .square-text-1.
• .max-vh-100: Define un alto máximo de 100vh.
• .a11y-contrast-text-$color: Aplica la versión contraste del color $color. Ejemplo, .square-text-primary.

Cabe destacar, que las clases existentes que manejan colores son adaptadas para el modo contraste en themes/a11y-contrast/base/_base.scss.