Introducción a Bootstrap 5

• La clase .table-dark crea una tabla con fondo negro.

• Podemos combinar las clases .table-dark y .table-striped.

• Podemos combinar las clases .table-dark y .table-hover.

Bordes aditivos

• <span class="border"></span>

• <span class="border-top"></span>

• <span class="border-start"></span>

• <span class="border-bottom"></span>

• <span class="border-end"></span>

• Las imágenes en Bootstrap responden con .img-fluid.

• Esto se aplica max-width: 100%; y height: auto; de la imagen para que se escala con el elemento padre.

• <img src="..." class="img-fluid" alt="...">

• Un “jumbotron” indica una caja grande para llamar la atención adicional a un cierto contenido o información especial.

• También amplía los tamaños de fuente del texto dentro de él.

• Consejo: Dentro de un “jumbotron” puede poner casi cualquier HTML válido, incluyendo otros elementos / clases de Bootstrap.

• Las alertas se crean con la clase .alert seguida de una de las cuatro clases contextuales:

  • .alert-success,

  • .alert-info,

  • .alert-warning o

  • .alert-danger.

Para lograr los estilos de botón, Bootstrap tiene las siguientes clases:

• .btn

• .btn-default

• .btn-primary

• .btn-success

• .btn-info

• .btn-warning

• .btn-danger

• .btn-link

Grupos de botones:

• Bootstrap le permite agrupar una serie de botones (en una sola línea) en un grupo de botones.

• Utilice un elemento <div> con la clase .btn-group para crear un grupo de botones.

Medidas de botones:

• En lugar de aplicar los tamaños de los botones a cada botón de un grupo, utilice la clase .btn-group-lg | sm | xs para dimensionar todos los botones del grupo.

Insignias:

• Las insignias son indicadores numéricos de cuántos elementos están asociados con un enlace.

• Los números (5, 10 y 2) son los distintivos.

• Utilice la clase .badge dentro de los elementos <span> para crear insignias o burbujas.

• Ya no utilizar .badge-pill (BS4) ahora utilice .rounded-pill (BS5).

• Cambió badge-primary (BS4) a bg-primary (BS5).

• Se puede usar una barra de progreso para mostrar al usuario hasta qué punto está en un proceso.

• Bootstrap proporciona varios tipos de barras de progreso.

• Para crear una barra de progreso predeterminada, agregue una clase .progress a un elemento <div>.

Paginación básica:

• Si usted tiene un sitio web con muchas páginas, es posible que desee añadir algún tipo de paginación a cada página.

• Para crear una paginación básica, agregue la clase .pagination a un elemento <ul>.

• Es una buena práctica envolver la división en una etiqueta <nav>.

• Podemos agregar un atributo aria-label para la accesibilidad.

Grupos de listas básicas:

• El grupo de lista más básico es una lista no ordenada con elementos de lista:

• Para crear un grupo de listas básicas, utilice un elemento <ul> con clase .list-group y <li> elementos con clase .list-group-item.

• Siempre que necesite mostrar un fragmento de contenido, como una imagen con un título opcional, considere usar una división <figure>.

• Utilizar las clases .figure, .figure-img y .figure-caption para proporcionar algunos de los estilos de línea de base para el HTML5 <figure> y <figcaption> elementos

Podemos añadir iconos y utilizar las “ayudas” (helpers) con utilidades flexbox.

Apuntes a la sección 2

Grupos de listas básicas:

• El grupo de lista más básico es una lista no ordenada con elementos de lista:

• Para crear un grupo de listas básicas, utilice un elemento <ul> con clase .list-group y <li> elementos con clase .list-group-item.

Clases Contextuales:

Las clases para colorear los elementos de la lista son:

• .list-group-item-success,

• .list-group-item-info,

• .list-group-item-warning

• .list-group-item-danger

• .list-group-item-dark

• .list-group-item-ligth

Las cartas están formadas por dos divisiones: la primera debe tener la clase .card, y en el interior, otra división interna, con la clase .card-body.

• Podemos utilizar las utilidades de los bordes para cambiar el borde de una carta.

• Podemos colocar la clase .text-{color} en el elemento .card.

• Podemos cambiar los bordes de los encabezados y de los pies de página de una carta.

• Podemos crear un list-group por medio de la clase .list-group-flush.

• Por medio del grupo de cartas podemos manejar varias de ellas como una sola.

• Las cartas se alinean según las reglas del flex-box.

• Si se utilizan los pies de páginas (footer) estas también se alinean.

• Necesitamos una división que envuelva a las cartas individuales con la clase .card-group.

Para alinear a la derecha el menú desplegable, agregue la clase .dropdown-menu-right al elemento con .dropdown-menu.

Colapsable básico:

• Los elementos plegables son útiles cuando se desea ocultar y mostrar una gran cantidad de contenido.

A partir de la versión 5.3 tendremos el tema claro (light por omisión) y el oscuro (dark).

data-bs-theme="dark"

A partir de la versión 5.3 tendremos un mayor control en los colores de nuestros elementos en Bootstrap.

Podemos agregar un gradiente por medio de la clase genérica bg-gradient a partir de la versión 5 de Bootstrap.

Podemos agregar una transparencia por medio de la clase genérica bg-opacity-* a partir de la versión 5.1 de Bootstrap.

A partir de la versión 5.2 podemos coordinar el color de fondo con el texto en las cartas.

Por medio de las utilidades, estilos en cascada y alineación de texto podemos modificar la apariencia de una carta o recuadro.

Por medio de las cartas o recuadros podemos crear una sencilla zona de navegación.

Por medio de las cartas o recuadros podemos crear una sencilla zona de navegación ahora con botones.

Podemos añadir una imagen en cualquier parte de una imagen.

• Podemos añadir una imagen en cualquier parte de una imagen.

Podemos utilizar todas las propiedades del grid de Bootstrap con las cartas o recuadros.

Podemos crear listas agrupadas numeradas, tan complejas como queramos.

• Podemos crear listas agrupadas con los colores ya establecidos e Bootstrap.

• Podemos añadir links para convertir la lista en un menú.

• Podemos crear listas agrupadas con checkboxes y botones de radio que nos pueden ser muy útiles en aplicaciones.

Podemos aplicar todo lo conocido para crear elementos más personalizados.

Apuntes a la sección 3

¿Algo para mejorar en esta sección?

¿Algún comentario o aporte?

Tus comentario son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.

Colapsable básico:

• Los elementos plegables son útiles cuando se desea ocultar y mostrar una gran cantidad de contenido.

Podemos hacer referencia a múltiples objetos colapsables por medio de la clase .multi-collapse.

Migración BS4 a BS5

• En lugar de objeto cartas, se utiliza la clase .accordion-item.

• El encabezado (H2) debe tener una clase .accordion-header.

• El cuerpo de la sección colapsable debe tener una clase .accordion-collapse.

• Para crear un menú simple. Añadimos la clase .nav a elementos <ul>

• Seguidos de las etiquetas <li> con la clase .nav-item.

• Las etiquetas <a> deben tener la clase .nav-link.

• Para crear un menú simple. Añadimos la clase .nav a elementos <ul>

• Seguidos de las etiquetas <li> con la clase .nav-item.

• Las etiquetas <a> deben tener la clase .nav-link.

• Añadimos la clase .justify-content-center para centrar los contenidos, utilice la clase .justify-content-end para alinear a la derecha.

• Utilice la clase .flex-column para hacer un menú vertical.

• Podemos convertir en un menú con tabuladores con añadiendo la clase .nav-tabs a la etiqueta <ul>.

• Podemos convertir un menú en botones o píldoras con la clase .nav-pills.

• Para justificar tanto tabuladores como píldoras, añadimos la clase .nav-justified.

• Podemos añadir a un menú un dropdown, ya sea con tabuladores o con pastillas.

Podemos combinar un pequeño submenú en las opciones con un poco de HTML.

Barras de navegación:

• Una barra de navegación es un encabezado de navegación que se coloca en la parte superior de la página.

• Con Bootstrap una barra de navegación puede extenderse o contraerse, dependiendo del tamaño de la pantalla. Se crea una barra de navegación estándar con <nav class = "navbar">.

• Tenemos clases responsivas como .navbar-expand-xllg|md|sm

• Para crear una barra de navegación colapsable usaremos un botón con la clase .navbar-toggle, data-toggle=”collapse” y data-target=”#id”.

• La división debe tener la clase .collapse .navbar-collapse con el identificador escrito en data-target.

• También podemos añadir un dropdown.

• Añadir una etiqueta <form> con la clase .form-inline.

• Podemos añadir las class .input-group-prepend y .input-group-append.

• Podemos colocar otros elementos de un formulario en una barra de navegación, como botones, cajas de entrada, etc.

• Podemos cambiar los colores de la barra, con los colores contextuales.

• Podemos añadir texto en una barra de navegación.

• Para fijar la barra de navegación en la parte superior de la pantalla, añada la clase .fixed-top.

• Para fijar la barra de navegación en la parte inferior de la pantalla, añada la clase .fixed-bottom.

• Para hacer una barra de navegación que se fije en la parte superior (sticky), añada la clase .sticky-top. (No funciona en IE11-).

Apuntes a la sección 4

¿Algo para mejorar en esta sección?

¿Algún comentario o aporte?

Tus comentario son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.

• Por medio de la clase .form-control se puede estilizar los controles <input>, <select> y <textarea>.

• Para las entradas de archivos (files) cambiamos .form-control por .form-control-file.

• Puede cambiar la altura de las cajas de entrada con .form-control-lg, .form-control y .form-control-sm.

• Por medio de la clase .readonly podemos hacer un campo de entrada (input) sólo lectura, no se puede modificar.

• Si quiere hacer el texto sin la caja de entrada, utilice la clase .form-control-plaintext.

• Las cajas de verificación y los botones de radio son mejoradas con la clase .form-check para ambos elementos.

• Para las etiquetas <label> utilizamos la clase .form-check-label para estilizar las mismas.

• Para desactivarlo añadimos el atributo disabled.

En Bootstrap podemos estilizar interruptores y botones de estado (encendido y apagado) con las clases .form-switch y btn-check.

• Los menús <select> personalizados solo necesitan una clase personalizada .form-select para activar los estilos personalizados.

• Los estilos personalizados se limitan a la apariencia inicial de <select> y no pueden modificar las etiquetas <option> debido a las limitaciones del navegador.

• Con la clase .form-range podemos personalizar el control de rangos de HTML.

• El control tendrá la misma apariencia en todos los navegadores.

• En los navegadores Edge Legacy y Firefox admiten "llenar" su pista desde la izquierda o la derecha del control como un medio para indicar visualmente el progreso, actualmente no lo admite Bootstrap.

• Coloque un complemento o un botón a cada lado de una entrada.

• También puede colocar uno a ambos lados de una entrada.

• Los grupos de entrada se ajustan de forma predeterminada a través flex-wrap: wrap de para adaptarse a la validación de campos de formulario personalizados dentro de un grupo de entrada.

• Puede desactivar esto con .flex-nowrap.

• Podemos agrupar botones y cajas de entrada.

Podemos agrupar controles select (combo box) y entradas de selección de un archivo (input file).

Etiquetas flotantes

• Para dar estructura a un formulario, utilice la clase .form-group.

• Podemos utilizar la etiqueta <fieldset>

• Podemos utilizar las clases del .grid desde BS4.

Por medio de una etiqueta <fieldset> podemos desactivar y habilitar todo un formulario por medio del atributo disabled.

• Cree formas horizontales con la cuadrícula agregando la clase .row para formar grupos y usando las clases .col-*-* para especificar el ancho de sus etiquetas y controles.

• Asegúrese de agregar también la clase .col-form-label a sus etiquetas <label> para que estén centrados verticalmente con sus controles de formulario.

• A veces, es posible que necesite utilizar utilidades de margen o padding para crear la alineación que necesita.

• Cree formas horizontales con la cuadrícula agregando la clase .row para formar grupos y usando las clases .col-*-* para especificar el ancho de sus etiquetas y controles.

• Asegúrese de agregar también la clase .col-form-label a sus etiquetas <label> para que estén centrados verticalmente con sus controles de formulario.

• Podemos mezclar las clases .col-*-* con la clase .col.

• Con la clase .col-auto las columnas adaptan su ancho al contenido.

• Podemos mezclar las clases .col-*-* con la clase .col-auto.

• Podemos mezclar las clases .col-*-* con la clase .col.

• Con la clase .col-auto las columnas adaptan su ancho al contenido.

• Podemos mezclar las clases .col-*-* con la clase .col-auto.

El siguiente ejemplo usa una utilidad flexbox para centrar verticalmente el contenido y cambia .col por .col-auto para que sus columnas solo ocupen el espacio necesario.

Dicho de otra manera, el tamaño de la columna se basa en el contenido.

.gx-* gutter horizontal

.gy-* gutter vertical

visually-hidden hace a un elemento oculto

Formularios en línea

Apuntes a la sección 5

¿Algo para mejorar en esta sección?

¿Algún comentario o aporte?

Tus comentario son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.

La herramienta del carrusel no adapta las dimensiones de las imágenes. Para ello utilizamos las clases:

.w-100 Se va al 100% de ancho.

.d-block Visible en todos los modos (sm, lg, xl, md, etc.)

• Podemos añadir controles de avanzar y retroceder.

• Debemos crear botones fuera de la división interna del carrusel.

Podemos añadir indicadores para cada imagen o diapositiva del carrusel.

Podemos añadir subtítulos a cada una de las imágenes en un carrusel.

• Podemos cambiar el color de las letras con carousel-dark.

• Cambiamos la duración del tiempo de visualización de cada imagen con el parámetro: data-bs-interval="2000"

• Cambiamos el efecto de deslizamiento por el de fade-in, fade-out con la clase .carousel-fade.

Apuntes a la sección 6

¿Algo para mejorar en esta sección?

¿Algún comentario o aporte?

Tus comentario son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.

data-bs-dismiss="modal" lo utilizamos para cerrar la caja de diálogo.

• Hacer el fondo de bloqueo estática: data-bs-backdrop="static" data-bs-keyboard="false".

• Desplegar contenido muy largo: cambiar la clase .modal-dialog por .modal-dialog-scrollable.

Podemos utilizar el Grid System dentro de una ventana modal.

Podemos crear cualquier contenido HTML en una ventana modal, incluidos los formularios.

Por medio de un poco de JavaScript podemos asignar dinámicamente el contenido de una caja de entrada.

Podemos crear diferentes tamaños añadiendo las clases:

• Small: .modal-sm 300px

• Default: None 500px

• Large: .modal-lg 800px

• Extra large:.modal-xl1140px

• Por medio de la clase .float-start y .float-end, podemos flotar a derecha e izquierda las divisiones.

• Con la clase .clearfix limpiamos ambas flotaciones.

• Se tienen las clases .float-*-start/end responsivas.

Scrollspy vertical

• Desde una imagen puede lanzar una ventana modal de cualquier modelo.

• Los tooltips son opcionales por razones de rendimiento, por lo que debe inicializarlas usted mismo .

• Los tooltips con títulos de longitud cero nunca se muestran.

• La activación de información sobre herramientas en elementos ocultos no funcionará.

• Podemos crear tooltips aparecen cuando el usuario pasa el apuntador del ratón sobre el botón o el enlace.

• Necesitamos añadir el atributo data-toggle=”tooltip”.

• Podemos modificar la ubicación del mismo por medio del atributo data-bs-placement.

• Envíe notificaciones automáticas a sus visitantes con un toast, un mensaje de alerta ligero y fácilmente personalizable.

• Están construidos con flexbox, por lo que son fáciles de alinear y colocar.

Los indicadores de carga (spinners) de Bootstrap se pueden usar para mostrar el estado de carga de tus proyectos. Están creados únicamente con HTML y CSS, lo que significa que no necesitas JavaScript para crearlos.

Utilice los indicadores dentro de los botones para indicar que una acción se está procesando o llevando a cabo.

También puede intercambiar el texto del indicador y utilizar el texto del botón según sea necesario.

• Podemos crear popover aparecen cuando el usuario presiona sobre el botón o el enlace.

• Necesitamos la librería popper

• Necesitamos añadir el atributo data-toggle=”popover”.

• Los popover deben ser iniciados.

• Offcanvas es un componente de barra lateral que se puede activar mediante JavaScript para que aparezca en el borde izquierdo, derecho, superior o inferior de la ventana gráfica.

• Los botones o anclas se utilizan como “activadores” asociados a elementos específicos que se activan, y los atributos “data” se utilizan para invocar nuestro JavaScript.

• El desplazamiento del elemento <body> está deshabilitado cuando un offcanvas y su fondo son visibles. Utilice el atributo data-bs-scroll para habilitar el desplazamiento de <body>: data-bs-scroll="true" data-bs-backdrop="false".

• Body scrolling and backdrop: También puede habilitar el desplazamiento del <body> con un fondo visible: data-bs-scroll="true".

• Los marcadores de posición se pueden usar para mejorar la experiencia de tu aplicación.

• Están creados únicamente con HTML y CSS, lo que significa que no necesitas JavaScript para crearlos. Sin embargo, necesitarás JavaScript personalizado para activar o desactivar su visibilidad.

• La apariencia, color y tamaño se pueden personalizar fácilmente con nuestras clases de utilidad.

Apuntes a la sección 7

¿Algo para mejorar en esta sección?

¿Algún comentario o aporte?

Tus comentario son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.

• Por medio de la clase .float-start y .float-end, podemos flotar a derecha e izquierda las divisiones.

• Con la clase .clearfix limpiamos ambas flotaciones.

• Se tienen las clases .float-*-start/end responsivas.

Por medio de la clase .mx-auto podemos centrar una división.

• Bootstrap 5 puede manejar el espaciado entre elementos ya sea con su márgen (m) o su padding (p).

• Los breakpoints son los siguientes: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px) o xl (>=1200px)):

• Las clases utilizan el siguiente formato: {property}{sides}-{size} para xs y {property}{sides}-{breakpoint}-{size} para sm, md, lg, and xl.

Cuando tenemos una división display en grid (display: grid) podemos utilizar la herramienta gap para su espaciado.

Con las clases .align- cambia el alineamiento de los elementos en los elementos del tipo inline, inline-block, inline-table y table.

• Con la clase .fixed-top fija un elemento en la parte superior de la pantalla.

• Con la clase .fixed-bottom fija un elemento en la parte inferior de la pantalla.

Variaciones a las clases responsivas de las clases .d-flex y .d-inline-flex.

• .d-flex

• .d-inline-flex

• .d-sm-flex

• .d-sm-inline-flex

• .d-md-flex

• .d-md-inline-flex

• .d-lg-flex

• .d-lg-inline-flex

• .d-xl-flex

• .d-xl-inline-flex

<div class="d-flex p-2">Contenedor flexbox</div>

<div class="d-inline-flex p-2">Contenedor inline flexbox</div>

Align-items:

Use las utilidades de alinear elementos en contenedores de caja flexible para cambiar la alineación de los elementos flexibles en el eje transversal (el eje y para comenzar, el eje x si dirección flexible: column).

Por medio de la clase .align-self podemos cambiar individualmente la alineación de los ítems flexibles con respecto al eje transversal o cross axis (el eje “y” por omisión o el eje “x” si la dirección es flex: column).

Cambia cómo se envuelven (wrap) los artículos flexibles en un contenedor flexible.

Elija entre ningún envoltorio (el navegador predeterminado) con .flex-nowrap, envoltura con .flex-wrap o envoltura inversa con .flex-wrap-reverse.

Cambie el orden visual de elementos flexibles específicos con un puñado de utilidades de orden.

Align-content:

Utilice las utilidades de alineación de contenido en contenedores de caja flexible para alinear elementos flexibles en el eje transversal.

Elija entre inicio (start) (predeterminado), final (end), centro (center), entre (between), alrededor (around) o estirar (stretch).

• Podemos utilizar la mayoría de los diferentes valores de display (de css) por medio de las clases:

• .d-{value} para xs

• .d-{breakpoint}-{value} para sm, md, lg, xl y xxl.

• Agregue o elimine sombras a los elementos con las utilidades de sombra de cuadro.

• Podemos realizar sombras pequeñas, normales y largas.

Apuntes a la sección 8

¿Algo para mejorar en esta sección?

¿Algún comentario o aporte?

Tus comentario son muy importantes y seguiré trabajando para que puedas calificar este curso con 5 estrellas.

• El sistema de cuadrícula de Bootstrap permite hasta 12 columnas en la página.

• Si no desea utilizar todas las 12 columnas individualmente, puede agrupar las columnas para crear columnas más amplias.

• El sistema de cuadrícula de Bootstrap permite hasta 12 columnas en la página.

• Si no desea utilizar todas las 12 columnas individualmente, puede agrupar las columnas para crear columnas más amplias.

El sistema de cuadrícula Bootstrap tiene cinco clases:

• .col- (extra small) menores a 576 pixeles

• .col-sm (small) mayores o igual a 576 pixeles

• .col-md (medianos) mayores a 768 píxeles

• .col-lg (large) mayores a 992 pixeles

• .col-xl (extra large) mayores a 1200 pixeles

• .col-xxl (x xlarge) ≥1400px

El sistema de cuadrícula Bootstrap tiene cinco clases:

• .col- (extra small) menores a 576 pixeles

• .col-sm (small) mayores o igual a 576 pixeles

• .col-md (medianos) mayores a 768 píxeles

• .col-lg (large) mayores a 992 pixeles

• .col-xl (extra large) mayores a 1200 pixeles

• .col-xxl (x xlarge) ≥1400px

El sistema de cuadrícula Bootstrap tiene cinco clases:

• .col- (extra small) menores a 576 pixeles

• .col-sm (small) mayores o igual a 576 pixeles

• .col-md (medianos) mayores a 768 píxeles

• .col-lg (large) mayores a 992 pixeles

• .col-xl (extra large) mayores a 1200 pixeles

• .col-xxl (x xlarge) ≥1400px

• .col- (extra small) menores a 576 pixeles

• .col-sm (small) mayores o igual a 576 pixeles

• .col-md (medianos) mayores a 768 píxeles

• .col-lg (large) mayores a 992 pixeles

• .col-xl (extra large) mayores a 1200 pixeles

• .col-xxl (x xlarge) ≥1400px

• .col- (extra small) menores a 576 pixeles

• .col-sm (small) mayores o igual a 576 pixeles

• .col-md (medianos) mayores a 768 píxeles

• .col-lg (large) mayores a 992 pixeles

• .col-xl (extra large) mayores a 1200 pixeles

• .col-xxl (x xlarge) ≥1400px

• Utilice las clases responsivas .row-cols- * para establecer rápidamente el número de columnas que mejor representen su contenido y diseño.

• Mientras que las clases .col- * normales se aplican a las columnas individuales (por ejemplo, .col-md-4), las clases de columnas de fila se establecen en el .row principal como un atajo.

• Podemos utilizar las clases propias de los flex-box dentro de nuestro GridSystem, como:

• Alineación vertical: align-items-*, align-self-*

• Alineación horizontal: justify-content-*

• Column wrapping: Si se colocan más de 12 columnas dentro de una sola fila, cada grupo de columnas adicionales, como una unidad, se ajustará a una nueva línea.

• Column breaks: Saltar a una nueva línea en flexbox requiere un pequeño truco: agregue un elemento con ancho: 100% donde quiera ajustar sus columnas a una nueva línea.

• Utilice las clases .order- para controlar el orden visual de su contenido. Estas clases responden, por lo que puede establecer el orden por punto de interrupción (por ejemplo, .order-1.order-md-2).

• Incluye soporte para 1 a 5 en los seis niveles de cuadrícula.

• Puede compensar las columnas de la cuadrícula de dos formas: nuestras clases .offset-grid sensibles y nuestras utilidades de margen.

• Las clases de cuadrícula se dimensionan para coincidir con las columnas, mientras que los márgenes son más útiles para diseños rápidos donde el ancho del desplazamiento es variable.

• Las clases .col- * también se pueden usar fuera de una clase .row para darle a un elemento un ancho específico.

• Siempre que las clases de columna se utilizan como hijos no directos de una fila, se omiten los rellenos.

• Los gutters son los espacios entre columnas.

• Gutters inicia en 1.5rem (24px).

• La clase .gx-* se utiliza para el control horizontal.

• La clase .gy-* se utiliza para el control vertical.

• La clase .g-* se utiliza para el control horizontal.

• Las clases gutter se pueden aplicar a las clases row-column.

• Con la clase .g-0 eliminamos el gutter o espacio entre columnas.

• Se recomienda utilizar la clase .overflow-hidden.

Aplicaremos lo visto hasta este punto para crear un formato de página responsiva con columnas embebidas.

Crearemos los contenidos y flotaremos la página.

Apuntes a la sección 9

• Un elemento clearfix elimina las flotaciones de los elementos.

• Podemos crear links de diferentes colores por medio de la clase link-*.

• Tenga en consideración el color del fondo para su contraste.

Tenemos clases para manejar los ratios más utilizados, como son 1x1, 4x3, 16x9, 21x9.

• Tenemos clases para fijar un elemento fijo: fixed-top, fixed-bottom y sticky-top.

• También tenemos las clases para sticky-top con los puntos de control o breakpoints: sm, lg, md, xl y xxl.

Podemos “extender” el link a su contenedor por medio de la clase stretched-link.

Por medio de la clase .text-truncate podemos recortar el texto y añadir los tres puntos finales (elipsis).