Bootstrap 4

BOOTSTRAP 4
Generalidades
Descripción breve
Bootstrap es un framework que facilita la creación de sitios Web de una forma más rápida, sencilla y
con una mejor apariencia. En este documento se presenta una rápida y breve descripción sobre los
elementos para diseño web que nos provee Bootstrap en su versión 4.
Contenido
Unidad I: Introducción a Bootstrap
Introducción a Bootstrap 4.................................................................................................................1
Descargando Bootstrap..................................................................................................................1
Utilize el CDN de Bootstrap............................................................................................................2
Contenido de Bootstrap.................................................................................................................2
Contenidos del código fuente de Bootstrap...................................................................................3
La Primera plantilla con Bootstrap.................................................................................................4
Compatibilidad con los navegadores..............................................................................................4
Navegadores en dispositivos móviles.........................................................................................5
Visión general.....................................................................................................................................8
Contenedores.................................................................................................................................8
Migrando a v4..................................................................................................................................10
Cambios estables..........................................................................................................................10
Impresión.................................................................................................................................10
Resumen......................................................................................................................................10
Soporte del navegador.............................................................................................................10
Cambios globales......................................................................................................................10
Sistema de rejilla......................................................................................................................11
Componentes...............................................................................................................................12
Por componente...........................................................................................................................12
Reiniciar....................................................................................................................................12
Tipografía.................................................................................................................................12
Imágenes..................................................................................................................................13
Tablas.......................................................................................................................................13
Formas......................................................................................................................................13
Botones....................................................................................................................................14
Grupo de botones....................................................................................................................14
Listas desplegables...................................................................................................................14
Sistema de red..........................................................................................................................15
Lista de grupos.........................................................................................................................15
Modal.......................................................................................................................................15
Navs..........................................................................................................................................15
Barra de navegación.................................................................................................................16
Paginación................................................................................................................................16
Migas de pan............................................................................................................................16
Etiquetas e insignias.................................................................................................................17
Paneles, miniaturas y pozos.....................................................................................................17
Paneles.....................................................................................................................................17
Progreso...................................................................................................................................17
Carrusel....................................................................................................................................17
Mesas.......................................................................................................................................18
Utilidades.................................................................................................................................18
Mixins de prefijo de proveedor................................................................................................19
Documentación............................................................................................................................19
Utilidades receptivas................................................................................................................19
Diseñando con rejilla........................................................................................................................21
Elemento contenedor..................................................................................................................21
Funcionamiento del sistema de rejilla..........................................................................................21
Columnas de ancho especifico.....................................................................................................23
Selección de tamaño de las columnas solo para pantallas medianas.......................................23
Selección de dos tamaños de columna: pequeño y mediano...................................................24
Selección de tres tamaños: extra pequeño, pequeño y mediano.............................................25
Columnas de ancho automático...................................................................................................27
Modo mixto..................................................................................................................................28
Ancho de columna variable..........................................................................................................28
Forzar el cambio de fila................................................................................................................29
Anidamiento de columnas...........................................................................................................30
Espaciado entre columnas............................................................................................................30
Márgenes.....................................................................................................................................31
Ordenación de columnas.............................................................................................................32
Alineación.....................................................................................................................................33
Alineación vertical....................................................................................................................33
Alineación horizontal................................................................................................................34
Alineación responsive...............................................................................................................35
Utilidades.........................................................................................................................................37
Bordes..........................................................................................................................................37
Color del borde.........................................................................................................................37
Radio de borde.........................................................................................................................38
Tamaños...................................................................................................................................38
Clearfix.........................................................................................................................................38
Icono de cierre.............................................................................................................................38
Colores.........................................................................................................................................39
Propiedades del Monitor.............................................................................................................40
Embebidos....................................................................................................................................42
Flexionar...................................................................................................................................44
Dirección..................................................................................................................................45
Flotador....................................................................................................................................46
Interacciones............................................................................................................................47
Desbordamiento..........................................................................................................................47
Lectores de pantalla.....................................................................................................................47
Sombreado...................................................................................................................................48
Dimensionamiento.......................................................................................................................48
Espaciado.....................................................................................................................................49
Texto............................................................................................................................................51
Alineamiento vertical...............................................................................................................55
Visibilidad.................................................................................................................................56
Componentes...................................................................................................................................57
Alertas..........................................................................................................................................57
Insignias........................................................................................................................................61
Variaciones contextuales..........................................................................................................62
Insignias de pastillas.................................................................................................................62
Enlaces.....................................................................................................................................63
Migas de pan................................................................................................................................63
Botones........................................................................................................................................64
Etiquetas de botones................................................................................................................65
Botones de esquema................................................................................................................65
Tamaños...................................................................................................................................65
Estados: Activos / Desactivado.................................................................................................66
Casilla de verificación y botones de radio................................................................................66
Grupo de botones........................................................................................................................67
Barra de herramientas de botones...........................................................................................68
Dimensionamiento...................................................................................................................68
Anidamiento.............................................................................................................................69
Variación vertical......................................................................................................................69
Tarjetas........................................................................................................................................70
Tipos de contenido...................................................................................................................71
Lista de grupos.........................................................................................................................73
Encabezado y pie de página.....................................................................................................73
Estilos de tarjeta.......................................................................................................................75
Bordes......................................................................................................................................76
Menú o listas desplegables..........................................................................................................77
Botón de división......................................................................................................................78
Direcciones...............................................................................................................................79
Contenido del menú.................................................................................................................81
Formularios..................................................................................................................................84
Controles de formulario...........................................................................................................85
Grupo de entrada.........................................................................................................................88
Casillas de verificación y radios................................................................................................89
Entradas múltiples....................................................................................................................90
Complementos múltiples.........................................................................................................90
Botones con menús desplegables............................................................................................91
Botones segmentados..............................................................................................................91
Formularios personalizados.....................................................................................................92
Jumbotron....................................................................................................................................93
Lista de grupo...............................................................................................................................95
Artículos activos.......................................................................................................................95
Artículos deshabilitados...........................................................................................................96
Enlaces y botones.....................................................................................................................96
Rubor........................................................................................................................................97
Horizontal.................................................................................................................................97
Clases contextuales..................................................................................................................97
Con insignias.............................................................................................................................99
Contenido personalizado..........................................................................................................99
Objetos multimedia....................................................................................................................100
Anidamiento...........................................................................................................................101
Alineación...............................................................................................................................102
Orden.....................................................................................................................................103
Lista de medios.......................................................................................................................103
Modal.........................................................................................................................................104
Componentes modales...........................................................................................................104
Navs............................................................................................................................................105
Estilos disponibles..................................................................................................................106
Pestañas.................................................................................................................................107
Pastillas..................................................................................................................................108
Llenar y justificar....................................................................................................................108
Sobre accesibilidad.................................................................................................................109
Contenido soportado.............................................................................................................111
Elemento Brand......................................................................................................................113
Nav.........................................................................................................................................114
Formas....................................................................................................................................114
Texto......................................................................................................................................115
Esquemas de color.................................................................................................................116
Contenedores.............................................................................................................................117
Colocación:.............................................................................................................................117
Contenido externo.................................................................................................................117
Paginación..................................................................................................................................118
Trabajando con iconos...........................................................................................................119
Estados desactivados y activos...............................................................................................119
Dimensionamiento.................................................................................................................120
Alineación...............................................................................................................................120
Popovers....................................................................................................................................121
Visión general.........................................................................................................................121
Scrollspy.....................................................................................................................................123
Cómo funciona.......................................................................................................................123
Navegación anidada...............................................................................................................127
list-group................................................................................................................................128
Hiladores....................................................................................................................................128
Colores...................................................................................................................................129
Spinner creciente...................................................................................................................129
Alineación...............................................................................................................................130
Tamaño..................................................................................................................................131
Botones..................................................................................................................................132
Toasts (Tostadas)........................................................................................................................132
Información sobre herramientas................................................................................................134
Introducción a Bootstrap 4
Bootstrap es un kit de herramientas de código abierto para desarrollar con HTML, CSS y JS.
Nos permite crear sitios web responsivos y con prioridad para
dispositivos móviles. Actualmente se encuentra disponible la versión
4.4.1 (cuya versión base es la 4.0.0) en el sitio web oficial de
Bootstrap.
Descargando Bootstrap
Existen diferentes formas de enlazar los archivos de Bootstrap y empezar a trabajar con
este en nuestro proyecto web, cada una orientada a un tipo de público en función de su
nivel técnico. A continuación, se presentan las diferentes formas de integrar Bootstrap
ofrecidas por BootstrapCDN:
1. Descargar el código CSS y JavaScript compilado en este se incluyen: el paquete CSS

y complemento JavaScript compilados y minificados, pero no incluyen la
documentación, ni código fuente, ni las dependencias de JavaScript como JQuery y
Popper.js. Para descargar esta versión accede a https://getbootstrap.com/ y pulsa el
botón Download.
2. Descargar el código fuente: contiene los archivos CSS y JavaScript originales de
Bootstrap, así como la documentación del mismo. Para integrar esos archivos es
necesario herramientas adicionales como un compilador sass, la librería
Autoprefixer, etc. Descarga la versión más reciente en el sitio:
https://github.com/twbs/bootstrap/archive/v4.4.1.zip
3. Gestor de paquetes: otra alternativa es añadir Bootstrap como dependencias de tu
proyecto usando cualquiera de los siguientes gestores de paquetes:
3.1. Npm
Aplicaciones con tecnología Node.js con el paquete npm
$ npm install bootstrap
3.2. RubyGems
Aplicaciones Ruby usando Bundler y RubyGems agregando la siguiente línea a
su Gemfile:
gem 'bootstrap', '~> 4.4.1'
alternativamente, puedes instakar la gema con el comando:
$ gem install bootstrap –v 4.4.1
3.3. Composer
En proyectos PHP mediante composer
$ composer require twbs/bootstrap:4.4.1
3.4. NuGet
En proyectos .NET mediante NuGet
1
# instala la versión CSS de Bootstrap
PM> Install-Package Bootstrap
# instala la versión Sass de Bootstrap

PM> Install-Package bootstrap.sass
Utilize el CDN de Bootstrap

La empresa BootstrapCDN aloja de forma gratuita en su CDN una copia de los
archivos CSS y JavaScript de Bootstrap. Para utilizar estos archivos, modifica los
siguientes dos enlaces en tus páginas (cambia el valor 4.0.0 por la versión específica
de Bootstrap que quieras):
Solo CSS:
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifj
h" crossorigin="anonymous">
JavaScript:
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB
6" crossorigin="anonymous"></script>
Bootstrap JavaScript requiere las librerias JQuery y Popper.js para funcionar correctamente
(use primero JQuery, luego Popper y por ultimo Bootstrap para que funcione
correctamente):
JQuery:
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+
n" crossorigin="anonymous"></script>
Popper.js
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooA
o" crossorigin="anonymous"></script>
Contenido de Bootstrap
Dependiendo de la forma que hayas elegido para descargar Bootstrap, verás una
estructura de directorios u otra. En esta sección se muestran los detalles de cada una de
ellas.
Nota: Como ya se ha mencionado previamente los plugins JavaScript de Bootstrap
requieren de las librerías JQuery y Popper para funcionar correctamente, por lo tanto,
deben agregarse a tu proyecto (con los enlaces proporcionados en el apartado anterior).
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map
Esta es la forma más básica de Bootstrap: archivos precompilados para un uso rápido en
casi cualquier proyecto web. Proporcionamos CSS y JS compilados ( bootstrap.*), así como
CSS y JS compilados y minificados ( bootstrap.min.*). los mapas fuente ( bootstrap.*.map)
están disponibles para usar con las herramientas de desarrollo de ciertos navegadores. Los
archivos JS bootstrap.bundle.jsincluidos ( y minificados bootstrap.bundle.min.js) incluyen
Popper , pero no jQuery .
Contenidos del código fuente de Bootstrap

El código fuente de Bootstrap incluye los archivos CSS y JavaScript compilados, los archivos Sass y
JavaScript originales y la documentación:
bootstrap/
├── dist/
│ ├── css/
│ └── js/
├── site/
│ └──docs/
│ └── 4.4/
│ └── examples/
├── js/
└── scss/
El scss/y js/son el código fuente del CSS y JavaScript. La dist/carpeta incluye todo lo
que figura en la sección de descarga precompilada. La site/docs/carpeta incluye el
código fuente de la documentación y examples/del uso de Bootstrap. Más allá de eso,
cualquier otro archivo incluido proporciona soporte para paquetes, información de licencia
y desarrollo.
La Primera plantilla con Bootstrap

Antes de utilizar Bootstrap, asegúrate de que tus páginas están preparadas para los
estándares más recientes de HTML. Entre otras cosas, eso significa que deben utilizar el
doctype de HTML5 e incluir una etiqueta <meta> para definir el viewport. En definitiva, la
estructura básica de tus páginas debería ser:
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shri
nk-to-fit=no">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstra
p/4.4.1/css/bootstrap.min.css" integrity="sha384-
Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigi
n="anonymous">
<title>¡Hola Mundo!</title>
</head>
<body>
<h1>¡Hola Mundo!</h1>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrit
y="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.m
in.js" integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigi
n="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap
.min.js" integrity="sha384-
wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigi
n="anonymous"></script>
</body>
</html>
Compatibilidad con los navegadores
Bootstrap es compatible con las versiones estables más recientes de todos los
navegadores y sistemas operativos más populares. De hecho, Bootstrap soporta hasta
Internet Explorer 10-11 y Microsoft Edge en Windows.
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30
Navegadores en dispositivos móviles

Firefo Android Browser y Microsoft
Chrome Safari
x WebView Edge
Solo Android 5.0 o

Android ✔ ✔ N/E ✔
+
iOS ✔ ✔ ✔ N/E ✔
Windows 10
N/E N/E N/E N/E ✔
Mobile
Internet Explorer
Internet Explorer 10 o superior tiene soporte oficial, pero Internet Explorer 9 no. Además,
algunas propiedades de CSS3 y algunos elementos de HTML5 no funcionan bien en IE10,
por lo que es posible que necesites añadir prefijos especiales para ese navegador.
Si necesitas un buen soporte de IE 8 y 9, usa Bootstrap 3 en vez de la versión 4. Aunque la

versión 3 ya no recibe nuevas funcionalidades, sigue corrigiendo los errores que se
descubren.
Modalidades y menús desplegables en dispositivos

móviles
Desbordamiento y desplazamiento
La compatibilidad overflow: hidden; con el <body> elemento es bastante limitada en
iOS y Android. Para ese fin, cuando se desplaza más allá de la parte superior o inferior de
un modal en cualquiera de los navegadores de esos dispositivos, el <body> contenido
comenzará a desplazarse
iOS campos de texto y desplazamiento

A partir de iOS 9.2, mientras un modal está abierto, si el toque inicial de un gesto de
desplazamiento está dentro del límite de un texto <input>o un <textarea>,
el <body>contenido debajo del modal se desplazará en lugar del modal en sí.
Desplegables de la barra de navegación
El .dropdown-backdrop elemento no se usa en iOS en la navegación debido a la

complejidad de la indexación z. Por lo tanto, para cerrar los menús desplegables en las
barras de navegación, debe hacer clic directamente en el elemento desplegable (o
en cualquier otro elemento que active un evento de clic en iOS).
Zoom del navegado

El zoom de página inevitablemente presenta artefactos de renderizado en algunos
componentes, tanto en Bootstrap como en el resto de la web. Dependiendo del problema,
es posible que podamos solucionarlo (busque primero y luego abra un problema si es
necesario). Sin embargo, tendemos a ignorarlos, ya que a menudo no tienen una solución
directa más que soluciones alternativas extravagantes.
Sticky :hover/ :focusen iOS
Si bien :hover no es posible en la mayoría de los dispositivos táctiles, iOS emula este

comportamiento, lo que resulta en estilos de desplazamiento "persistentes" que persisten
después de tocar un elemento. Estos estilos de desplazamiento solo se eliminan cuando
los usuarios tocan otro elemento. Este comportamiento se considera en gran medida
indeseable y parece no ser un problema en dispositivos Android o Windows.
Navegador de acciones de Android

Fuera de la caja, Android 4.1 (e incluso algunas versiones más recientes aparentemente) se
entregan con la aplicación del navegador como el navegador web predeterminado de
elección (a diferencia de Chrome). Desafortunadamente, la aplicación del navegador tiene
muchos errores e inconsistencias con CSS en general.
En los <select> elementos, el navegador de acciones de Android no mostrará los

controles laterales si hay un border-radius y / o border aplicado. (Consulte esta
pregunta de StackOverflow para obtener más detalles). Use el fragmento de código a
continuación para eliminar el CSS infractor y representarlo <select> como un elemento
sin estilo en el navegador de acciones de Android. El rastreo del agente de usuario evita la
interferencia con los navegadores Chrome, Safari y Mozilla.
<script>
$(function () {
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') >
-1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
$('select.form-control').removeClass('form-control').css('width', '100%')
}
})
</script>
Validadores
Con el fin de proporcionar la mejor experiencia posible a los navegadores antiguos y con
errores, Bootstrap utiliza hacks del navegador CSS en varios lugares para apuntar CSS
especial a ciertas versiones del navegador para evitar errores en los mismos
navegadores. Es comprensible que estos hacks hagan que los validadores de CSS se
quejen de que no son válidos. En un par de lugares, también utilizamos funciones CSS de
vanguardia que aún no están completamente estandarizadas, pero se utilizan únicamente
para una mejora progresiva.
Estas advertencias de validación no importan en la práctica, ya que la parte no hacky de

nuestro CSS sí valida por completo y las porciones hacky no interfieren con el
funcionamiento adecuado de la parte no hacky, por lo tanto, ignoramos deliberadamente
estas advertencias particulares.
Accesibilidad
La accesibilidad de un proyecto diseñado con Bootstrap depende fundamentalmente del
código HTML y los estilos/plugins que añadas tú mismo. Aun así, Bootstrap hace todo lo
posible para ayudarte a conseguir que tus sitios sean accesibles.
Elementos HTML
La documentación de Bootstrap siempre muestra en sus ejemplos los elementos y
atributos HTML recomendados para hacer tus aplicaciones accesibles.
Componentes interactivos
Los componentes interactivos, como las ventanas modales y los menús desplegables han
sido diseñados para que funcionen con el ratón, el teclado y también las pantallas táctiles
de los móviles. Gracias al uso de los atributos WAI-ARIA, estos componentes también son
accesibles mediante dispositivos como lectores de pantalla
Contraste de colores
Desafortunadamente, la mayoría de colores de las paletas generadas por Bootstrap no
tienen un nivel de contraste suficiente según el estándar WCAG 2.0, que requiere un ratio
de 4.5:1 cuando se utiliza un color de fondo claro. Así que tendrás que definir tus propios
colores si quieres lograr ese objetivo.
Ocultando contenidos
Los contenidos que no se muestran por pantalla pero que se incluyen para que sean
accedidos por dispositivos como los lectores de pantalla, se pueden ocultar aplicando la
clase CSS .sr-only (el nombre viene de las siglas en inglés de "screen reader" o lector de
pantalla):
<p class="text-danger">
<span class="sr-only">Advertencia: </span>
Esta acción es irreversible.
</p>
Para los elementos ocultos de tipo "Ir directamente al contenido", puedes combinar

la clase .sr-only con la clase .sr-only-focusable. Esto hace que el contenido sea
visible cuando se selecciona (útil para los usuarios que utilizan el teclado):
<a class="sr-only sr-only-focusable" href="#content">Ir al contenido</a>
Reduciendo el movimiento
Bootstrap también soporta el uso de la opción prefers-reduced-motion mediante la
cual los navegadores indican que el usuario prefiere reducir el movimiento de los
elementos de la página. Si está activada, las ventanas modales por ejemplo no muestran
ninguna animación ni al abrirse ni al cerrarse.
Visión general
Contenedores
Los contenedores son el elemento de diseño más básico en Bootstrap y son necesarios
cuando se utiliza el sistema de cuadrícula predeterminado. Los contenedores se usan
para contener, rellenar y (a veces) centrar el contenido dentro de ellos. Si bien los
contenedores se pueden anidar, la mayoría de los diseños no requieren un contenedor
anidado.
Bootstrap viene con tres contenedores diferentes:
 .container, que establece un max-width en cada punto de interrupción sensible

 .container-fluid, que está width: 100% en todos los puntos de interrupción
 .container-{breakpoint}, que es width: 100% hasta el punto de interrupción
especificado
La siguiente tabla ilustra cómo se compara cada contenedor con el original .container

y .container-fluid en cada punto de interrupción.
Extra pequeño Pequeño Mediano Grande Extra grande

<576px ≥576px ≥768px ≥992px ≥1200px
.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
Extra pequeño Pequeño Mediano Grande Extra grande
<576px ≥576px ≥768px ≥992px ≥1200px
.container-xl 100% 100% 100% 100% 1140px
.container-fluid 100% 100% 100% 100% 100%
.container clase predeterminada es un contenedor receptivo de ancho fijo, lo que

significa sus max-width cambios en cada punto de interrupción.
<div class="container">

</div>
Migrando a v4
Cambios estables
Pasando de Beta 3 a nuestra versión estable v4.x, no hay cambios importantes, pero hay
algunos cambios notables.
Impresión
 Se repararon las utilidades de impresión rotas. Anteriormente, el uso de una clase
.d-print-* anularía inesperadamente cualquier otra clase .d-*.
 Utilidades de visualización de impresión disponibles ampliadas para que coincidan

con otras utilidades. Beta 3 años o más sólo tenían block, inline-block, inline,
y none. V4 estable añadido flex, inline-flex, table, table-row, y table-cell.
 Se corrigió la representación de vista previa de impresión en los navegadores con

nuevos estilos de impresión que especifican @page size.
Resumen
Estos son los artículos importantes que querrá tener en cuenta al pasar de v3 a v4.
Soporte del navegador
 Se eliminó la compatibilidad con IE8, IE9 e iOS 6. v4 ahora solo es IE10 + e iOS
7+. Para los sitios que necesitan cualquiera de esos, use v3.
 Se agregó soporte oficial para Android v5.0 Lollipop's Browser y WebView. Las
versiones anteriores del navegador Android y WebView siguen siendo compatibles
de forma no oficial.
Cambios globales
 Flexbox está habilitado por defecto. En general, esto significa alejarse de los
flotadores y más a través de los componentes Bootstrap.
 Cambió de Less a Sass para nuestros archivos CSS de origen.
 Cambió de px a rem como nuestra unidad CSS principal, aunque los píxeles
todavía se usan para consultas de medios y el comportamiento de la cuadrícula ya
que las vistas de los dispositivos no se ven afectadas por el tamaño de letra.
 El tamaño de fuente global aumentó de 14px a 16px.
 Se renovaron los niveles de la cuadrícula para agregar una quinta opción (abordar
dispositivos más pequeños en 576px y debajo) y se eliminó el infijo –xs de esas
clases. Ejemplo: .col-6 .col-sm-4 .col-md-3.
 Se reemplazó el tema opcional por separado con opciones configurables a través
de variables SCSS (por ejemplo, $enable-gradients: true).
 Sistema de construcción revisado para usar una serie de scripts npm en lugar de
Grunt. Consulte package.json todos los scripts o el archivo Léame de nuestro
proyecto para las necesidades de desarrollo local.
 El uso no receptivo de Bootstrap ya no es compatible.
 Descartó el Personalizador en línea a favor de una documentación de configuración
más extensa y compilaciones personalizadas.
 Se agregaron docenas de nuevas clases de utilidades para pares de valores de
propiedad CSS comunes y atajos de espacio de margen/relleno.
Sistema de rejilla
 Movido a flexbox.
o Se agregó soporte para flexbox en los mixins de cuadrícula y clases
predefinidas.
o Como parte de flexbox, se incluye soporte para las clases de alineación
vertical y horizontal.
 Nombres de clase de cuadrícula actualizados y un nuevo nivel de cuadrícula.
o Se agregó un nuevo nivel sm de cuadrícula a continuación 768px para un
control más granular. Ahora tenemos xs, sm, md, lg, y xl. Esto también
significa que cada nivel ha aumentado un nivel (por lo que .col-md-6 en
v3 ahora está .col-lg-6 en v4).
o Las clases xs de cuadrícula se han modificado para que no requieran que el
infijo represente con mayor precisión que comienzan a aplicar estilos min-
width: 0 y no un valor de píxel establecido. En lugar de .col-xs-6, es
ahora .col-6. Todos los demás niveles de cuadrícula requieren el infijo (por
ejemplo, sm).
 Tamaños de cuadrícula, mixins y variables actualizados.
o Las canaletas de cuadrícula ahora tienen un mapa Sass para que pueda
especificar anchos de canaleta específicos en cada punto de interrupción.
o Mixins rejilla Actualizado utilizar un make-col-ready mixin prep y
una make-col para establecer el flex y max-width para el
dimensionamiento columna individual.
o Se cambiaron los puntos de corte de consulta de medios del sistema de
cuadrícula y los anchos de contenedor para tener en cuenta el nuevo nivel
de cuadrícula y garantizar que las columnas sean divisibles por 12 su ancho
máximo.
o Los puntos de corte de la cuadrícula y los anchos de contenedor ahora se
manejan a través de mapas Sass ( $grid-breakpoints y $container-max-
widths) en lugar de un puñado de variables separadas. Estos reemplazan
las @screen-*variables por completo y le permiten personalizar
completamente los niveles de la cuadrícula.
o Las consultas de medios también han cambiado. En lugar de repetir
nuestras declaraciones de consulta de medios con el mismo valor cada vez,
ahora tenemos @include media-breakpoint-up/down/only . Ahora, en
lugar de escribir @media (min-width: @screen-sm-min) {...} , puedes
escribir @include media-breakpoint-up(sm) {...} .
Componentes
 Paneles caídos, miniaturas y pozos para un nuevo componente que lo abarca
todo, tarjetas .
 Soltó la fuente del icono Glyphicons. Si necesita iconos, algunas opciones son:
o la versión aguas arriba de Glyphicons
o Octicones
o Font Awesome
o Consulte la página Extender para obtener una lista de alternativas. ¿Tienes
sugerencias adicionales? Abra un problema o PR.
 Soltó el plugin Affix jQuery.
o Recomendamos usar en su lugar position: sticky. Consulte la entrada
HTML5 por favor para obtener detalles y recomendaciones específicas de
polyfill. Una sugerencia es usar una @supportsregla para implementarlo
(por ejemplo, @supports (position: sticky) { ... })
o Si estaba utilizando Affix para aplicar position estilos adicionales, los
polyfills podrían no ser compatibles con su caso de uso. Una opción para
tales usos es la biblioteca de ScrollPos-Styler de terceros .
 Soltó el componente de buscapersonas, ya que era esencialmente botones
ligeramente personalizados.
 Se refactorizaron casi todos los componentes para usar más selectores de clase
no anidados en lugar de selectores secundarios sobre específicos.
Por componente
Esta lista destaca los cambios clave por componente entre v3.xx y v4.0.0.
Reiniciar
Nuevo en Bootstrap 4 es el reinicio , una nueva hoja de estilo que se basa en Normalizar
con nuestros propios estilos de reinicio algo obstinados. Los selectores que aparecen en
este archivo solo usan elementos; aquí no hay clases. Esto aísla nuestros estilos de reinicio
de nuestros estilos de componentes para un enfoque más modular. Algunos de los más
importantes se destacan box-sizing: border-box, pasando de em a rem unidades de
muchos elementos, estilos de enlaces, y muchos se restablece la forma de los elementos.
Tipografía
 Se movieron todas las .text-utilidades al archivo _utilities.scss.

 Eliminado .page-header ya que sus estilos se pueden aplicar a través de
utilidades.
 .dl-horizontalha sido rechazado. En su lugar, el uso .rowde <dl>y clases de
columna uso de la red (o mixins) en sus <dt>e <dd>hijos.
 Blockquotes rediseñado, moviendo sus estilos desde el <blockquote> elemento a
una única clase, .blockquote. Descartó el .blockquote-reverse modificador para
las utilidades de texto.
 Ahora .list-inline requiere que los elementos de la lista secundaria
tengan .list-inline-item aplicada la nueva clase.
Imágenes
 Renombrado .img-responsive a .img-fluid.
 Renombrado .img-rounded a .rounded
 Renombrado .img-circle a .rounded-circle
Tablas
 Casi todas las instancias del > selector se han eliminado, lo que significa que las
tablas anidadas heredarán automáticamente los estilos de sus padres. Esto
simplifica enormemente nuestros selectores y personalizaciones potenciales.
 Renombrado .table-condensed a la consistencia .table-sm.
 Se agregó una nueva opción .table-inverse.
 Modificadores de encabezado de tabla agregados: .thead-default y .thead-
inverse.
 Renombradas las clases contextuales para tener un .table-*. Por lo
tanto .active, .success, .warning, .danger e .info a .table-active, .table-
success, .table-warning, .table-danger y .table-info.
Formas
 El elemento movido se restablece al archivo _reboot.scss.

 Renombrado .control-label a .col-form-label.
 Renombrado .input-lg y .input-sm a .form-control-lg y .form-control-sm,
respectivamente.
 Clases .form-group-* abandonadas por simplicidad. Use clases .form-control-*
en su lugar ahora.
 Abandonada la clase .help-block y reemplazada por texto .form-text de ayuda
a nivel de bloque. Para texto de ayuda en línea y otras opciones flexibles, use clases
de utilidad como .text-muted.
 Caído .radio-inline y .checkbox-inline.
 Consolidado .checkbox y .radio en .form-check y las diversas clases .form-
check-*.
 Formas horizontales revisadas:
o Se eliminó el requisito de clase .form-horizontal.
o .form-group ya no aplica estilos de .row via mixin, por .row lo que ahora
se requiere para diseños de cuadrícula horizontal (por ejemplo, <div
class="form-group row">).
o Se agregó una nueva .col-form-label clase a las etiquetas de centro
vertical con .form-control.
o Se agregó nuevo .form-row para diseños de formularios compactos con
las clases de cuadrícula (cambie su .row por .form-row).
 Se agregó compatibilidad con formularios personalizados (para casillas de
verificación, radios, selecciones y entradas de archivos).
 Reemplazado .has-error, .has-warning y .has-success clases con validación
de formulario HTML5 a través de CSS :invalid y pseudo-clases :valid.
 Renombrado .form-control-static a .form-control-plaintext.
Botones
 Renombrado .btn-default a .btn-secondary.
 Se eliminó la clase .btn-xs por completo, ya que .btn-sm es proporcionalmente
mucho más pequeña que la de v3.
 La función de botón con estado del button.js complemento jQuery se ha
eliminado. Esto incluye los métodos $().button(string) y $
().button('reset'). En su lugar, recomendamos utilizar un poco de JavaScript
personalizado, que tendrá el beneficio de comportarse exactamente como usted lo
desea.
o Tenga en cuenta que las otras características del complemento (casillas de
verificación de botones, radios de botones, botones de alternancia única) se
han conservado en v4.
 Cambiar botones [disabled] a :disabled como IE9 + admite :disabled. Sin
embargo, fieldset[disabled] todavía es necesario porque los conjuntos de
campos deshabilitados nativos todavía tienen errores en IE11 .
Grupo de botones
 Componente reescrito con flexbox.

 Eliminado .btn-group-justified. Como reemplazo, puede usarlo <div
class="btn-group d-flex" role="group"></div> como envoltorio alrededor de
elementos con .w-100.
 Se eliminó la clase.btn-group-xs por completo dada la eliminación de .btn-xs.
 Se eliminó el espacio explícito entre los grupos de botones en las barras de
herramientas de botones; use las utilidades de margen ahora.
 Documentación mejorada para usar con otros componentes.
Listas desplegables
 Cambió de selectores primarios a clases singulares para todos los componentes,

modificadores, etc.
 Los estilos desplegables simplificados ya no se envían con flechas hacia arriba o
hacia abajo adjuntas al menú desplegable.
 Los menús desplegables se pueden construir con <div> o <ul> ahora.
 Reconstruida desplegable estilos y marcadores para proporcionar un fácil, una
función de apoyo a los <a> y elementos <button> desplegables base.
 Renombrado .divider a .dropdown-divider.
 Los elementos desplegables ahora requieren .dropdown-item.
 Las opciones desplegables ya no requieren un explícito <span
class="caret"></span>; esto ahora se proporciona automáticamente a través de
CSS del ::after sobre .dropdown-toggle.
Sistema de red
 Se ha añadido 576px un nuevo punto de interrupción de rejilla como sm, lo que

significa que ahora hay cinco niveles totales ( xs, sm, md, lg, y xl).
 Cambió el nombre de las clases de modificador de cuadrícula receptiva de .col-
{breakpoint}-{modifier}-{size} a .{modifier}-{breakpoint}-{size} por
clases de cuadrícula más simples
 Se eliminaron las clases de modificador push y pull para las nuevas clases con
tecnología flexbox order. Por ejemplo, en lugar de .col-8.push-4 y .col-
4.pull-8, usaría .col-8.order-2 y .col-4.order-1.
 Se agregaron clases de utilidad flexbox para el sistema de cuadrícula y
componentes.
Lista de grupos

 Reemplazado a.list-group-itemcon una clase explícita .list-group-item-
action, para estilos de enlaces y versiones de botones de elementos de grupo de
lista.
 Se agregó .list-group-flush clase para usar con tarjetas.
Modal

 Dado el movimiento a flexbox, es probable que la alineación de los iconos de
descarte en el encabezado se rompa ya que ya no usamos flotantes. El contenido
flotante es lo primero, pero con flexbox ya no es el caso. Actualice sus iconos de
descarte para que vengan después de los títulos modales para corregir.
 La opción remote (que podría usarse para cargar e inyectar automáticamente
contenido externo en un modal) y el evento loaded.bs.modal correspondiente se
eliminaron. En su lugar, recomendamos utilizar plantillas del lado del cliente o un
marco de enlace de datos, o llamar a jQuery.load usted mismo.
Navs

 Se eliminaron casi todos los >selectores para un estilo más simple a través de clases
no anidadas.
 En lugar de selectores específicos de HTML como .nav > li > a, usamos clases
separadas para .nav, .nav-item y .nav-link. Esto hace que su HTML sea más
flexible al tiempo que aumenta la extensibilidad.
Barra de navegación
La barra de navegación se ha reescrito por completo en flexbox con compatibilidad
mejorada para alineación, capacidad de respuesta y personalización .
 Los comportamientos receptivos de la barra de navegación ahora se aplican a

la clase .navbar a través del lugar obligatorio .navbar-expand-
{breakpoint} donde elige dónde contraer la barra de navegación. Anteriormente,
se trataba de una modificación menos variable y requería una nueva compilación.
 .navbar-default es ahora .navbar-light, aunque .navbar-dark sigue siendo el
mismo. Se requiere uno de estos en cada barra de navegación. Sin embargo,
estas clases ya no establecen background-color; en cambio, esencialmente solo
afectan color.
 Las barras de navegación ahora requieren una declaración de fondo de algún
tipo. Elija entre nuestras utilidades de fondo ( .bg-*) o establezca las suyas con las
clases de luz / inversa anteriores para una personalización loca .
 Dados los estilos de flexbox, las barras de navegación ahora pueden usar las
utilidades de flexbox para opciones de alineación fáciles.
 .navbar-toggle es ahora .navbar-toggler y tiene diferentes estilos y marcas
internas (no más de tres <span>).
 Abandonó de la clase .navbar-form por completo. Ya no es necesario; en su lugar,
solo use .form-inline y aplique utilidades de margen según sea necesario.
 Las barras de navegación ya no incluyen margin-bottomo border-radiuspor
defecto. Use las utilidades según sea necesario.
 Todos los ejemplos con barras de navegación se han actualizado para incluir un
nuevo marcado.
Paginación

 Ahora se requieren clases explícitas ( .page-item, .page-link) en los
descendientes de .pagination.
 Abandono del .pager componente por completo, ya que era poco más que
botones de esquema personalizados.
Migas de pan
 Ahora se requiere una clase explícita .breadcrumb-item, en los descendientes

de .breadcrumb.
Etiquetas e insignias
 Consolidado .label y .badge desambiguación del elemento <label> y

simplificación de componentes relacionados.
 Agregado .badge-pill como modificador para el aspecto redondeado de
"píldora".
 Las insignias ya no se flotan automáticamente en los grupos de listas y otros
componentes. Ahora se requieren clases de utilidad para eso.
 Se ha eliminado .badge-default y agregado .badge-secondary para que
coincida con las clases de modificador de componentes utilizadas en otros lugares
Paneles, miniaturas y pozos

Se abandonó por completo para el nuevo componente de la tarjeta.
Paneles
 .panel a .card, ahora construido con flexbox.

 .panel-default eliminado y sin reemplazo.
 .panel-group eliminado y sin reemplazo. .card-group No es un reemplazo, es
diferente.
 Se ha renombrado .panel-heading a .card-header
 .panel-title a .card-title. Dependiendo de la apariencia deseada, es posible
que también desee utilizar elementos o clases de partida (por ejemplo <h3>, .h3) o
elementos llamativos o clases (por ejemplo <strong>, <b>, .font-weight-
bold). Tenga en cuenta que .card-title, aunque tiene un nombre similar,
produce un aspecto diferente que .panel-title.
 Se ha renombrado .panel-body a .card-body
 Se ha renombrado .panel-footer a .card-footer
 Se ha renombrado .panel-primary, .panel-success, .panel-info, .panel-
warning, Y .panel-danger se han abandonado por .bg-, .text-y .borderlas
utilidades generadas a partir de nuestro $theme-colorsmapa Sass.
Progreso
 Se reemplazaron las .progress-bar-* clases contextuales con .bg-*

utilidades. Por ejemplo, class="progress-bar progress-bar-danger" se
convierte class="progress-bar bg-danger" .
 Reemplazado .activepor barras de progreso animadas con .progress-bar-
animated.
Carrusel
 Se revisó todo el componente para simplificar el diseño y el estilo. Tenemos menos

estilos para anular, nuevos indicadores y nuevos íconos.
 Todo CSS ha sido anidado y renombrado, asegurando que cada clase tenga el
prefijo .carousel-.
o Para los elementos de carrusel, .next, .prev, .left, y .right ahora
son .carousel-item-next, .carousel-item-prev, .carousel-item-left,
y .carousel-item-right.
o También .item es ahora .carousel-item.
o Para controles prev/next, .carousel-control.right y .carousel-
control.left son ahora .carousel-control-next y .carousel-
control-prev, lo que significa que ya no requieren una clase base
específica.
 Se eliminó todo el estilo receptivo, difiriendo a las utilidades (por ejemplo,
mostrando subtítulos en ciertas ventanas gráficas) y estilos personalizados según
sea necesario.
 Las anulaciones de imagen eliminadas para imágenes en elementos de carrusel,
difiriendo a utilidades.
 Ajustó el ejemplo de carrusel para incluir el nuevo marcado y estilos.
Mesas
 Se eliminó el soporte para tablas anidadas con estilo. Todos los estilos de tabla
ahora se heredan en v4 para selectores más simples.
 Variante de tabla inversa añadida.
Utilidades
 Pantalla, oculta y más:

o Las utilidades de pantalla respondieron (p. Ej. .d-none y d-{sm,md,lg,xl}-
none).
o Se eliminó la mayor parte de las .hidden-* utilidades para
nuevas utilidades de visualización . Por ejemplo, en lugar de .hidden-sm-
upusar .d-sm-none. Cambió el nombre de las utilidades .hidden-print
para usar el esquema de nombres de la utilidad de visualización. Más
información en la sección de utilidades responsivas de esta página.
o Añadido .float-{sm,md,lg,xl}-{left,right,none} clases de flotadores
respuesta y eliminado .pull-left y .pull-right ya que son redundantes
con .float-left y .float-right.
 Tipo:
o Se agregaron variaciones receptivas a nuestras clases de alineación de
texto .text-{sm,md,lg,xl}-{left,center,right}.
 Alineamiento y espaciado:
o Se agregaron nuevas utilidades de margen receptivo y relleno para todos los
lados, más shorthands verticales y horizontales.
o Se agregó una gran cantidad de utilidades de flexbox .
o Se dejó caer .center-blockpara la nueva .mx-autoclase.
 Clearfix se actualizó para dejar de admitir versiones anteriores del navegador.
Mixins de prefijo de proveedor

Los mixins de prefijo de proveedor de Bootstrap 3 , que quedaron obsoletos en v3.2.0, se
han eliminado en Bootstrap 4. Dado que usamos Autoprefixer , ya no son necesarios.
Eliminados los siguientes mixins : animation, animation-delay, animation-

direction, animation-duration, animation-fill-mode, animation-iteration-count, a
nimation-name, animation-timing-function, backface-visibility, box-sizing, conte
nt-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rot
ateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-
duration, transition-property, transition-timing-function, transition-transform,
translate, translate3d,user-select
Documentación
Nuestra documentación también recibió una actualización general. Aquí está el
punto bajo:
 Todavía estamos usando Jekyll, pero tenemos complementos en la mezcla:

o bugify.rbse utiliza para enumerar eficientemente las entradas en
nuestra página de errores del navegador .
o example.rbes una bifurcación personalizada
del highlight.rbcomplemento predeterminado , lo que permite un
manejo más sencillo del código de ejemplo.
o callout.rb es una bifurcación personalizada similar, pero diseñada para
nuestros documentos especiales.
o jekyll-toc se usa para generar nuestra tabla de contenido.
 Todo el contenido de los documentos se ha reescrito en Markdown (en lugar de
HTML) para facilitar la edición.
 Las páginas se han reorganizado para un contenido más simple y una jerarquía más
accesible.
 Pasamos de CSS regular a SCSS para aprovechar al máximo las variables, mixins y
más de Bootstrap.
Utilidades receptivas
Todas las @screen-variables se han eliminado en v4.0.0. Utilice el media-breakpoint-
up(), media-breakpoint-down(), o media-breakpoint-only()mixins Sass o el $grid-
breakpointsSass mapa en su lugar.
Nuestras clases de utilidad receptiva se han eliminado en gran medida a favor de

las displayutilidades explícitas .
 Las clases .hiddeny .showse han eliminado porque entraban en conflicto con

jQuery $(...).hide()y los $(...).show()métodos. En su lugar, intente alternar
el [hidden]atributo o use estilos en línea como style="display:
none;"y style="display: block;".
 .hidden-Se han eliminado todas las clases, excepto las utilidades de impresión que
se han renombrado.
o Eliminado de v3: .hidden-xs .hidden-sm .hidden-md .hidden-
lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block
.visible-sm-block .visible-sm-inline .visible-sm-inline-block .vi
sible-md-block .visible-md-inline .visible-md-inline-block .visib
le-lg-block .visible-lg-inline .visible-lg-inline-block
o Eliminado de v4 alphas: .hidden-xs-up .hidden-xs-down .hidden-sm-
up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hi
dden-lg-down
 Las utilidades de impresión ya no comienzan con .hidden-o .visible-, sino
con .d-print-.
o Nombres antiguos: .visible-print-block, .visible-print-
inline, .visible-print-inline-block ,.hidden-print
o Nuevas clases: .d-print-block, .d-print-inline, .d-print-inline-
block,.d-print-none
En lugar de utilizar clases explícitas .visible-*, hace que un elemento sea visible

simplemente no ocultándolo en ese tamaño de pantalla. Puede combinar una clase
.d-*-none con una .d-*-block clase para mostrar un elemento solo en un intervalo
determinado de tamaños de pantalla (por ejemplo, .d-none.d-md-block.d-xl-none
muestra el elemento solo en dispositivos medianos y grandes).
Tenga en cuenta que los cambios en los puntos de interrupción de la cuadrícula en

v4 significa que tendrá que ir un punto de interrupción más grande para lograr los
mismos resultados. Las nuevas clases de utilidad receptiva no intentan acomodar
casos menos comunes en los que la visibilidad de un elemento no puede
expresarse como un único rango contiguo de tamaños de ventana gráfica; en su
lugar, necesitará usar CSS personalizado en tales casos.
Diseñando con rejilla
El sistema de rejilla de Bootstrap se basa en la creación o disposición del contenido de
nuestra web dentro de rejillas flexibles, las cuales se escalarán al tamaño y posición
adecuada de forma automática dependiendo del tamaño de la pantalla en la que se
rendericen.
Elemento contenedor
El sistema de rejilla tiene que ser utilizado dentro de uno de los dos elementos
contenedores que provee Bootstrap: .container ó .container-fluid. Es importante tener
en cuenta que estos elementos se utilizan como raíz de la rejilla y no se podrán anidar
unos dentro de otros.
Si lo que queremos es que el contenido de nuestra web aparezca centrado y con un ancho
fijo entonces podemos utilizar la etiqueta .container, de la forma:

</div>
Por el contrario, si queremos que el contenido de nuestra web pueda ocupar todo el ancho
disponible (hay que tener en mente todos los tamaños de pantalla, incluso las muy
grandes), podemos usar la etiqueta .container-fluid:
<div class="container-fluid">
...
</div>
En las siguientes imágenes se ejemplifica el resultado obtenido para un mismo ancho al

aplicar los dos tipos de contenedores, container en el primer caso y container-fluid en
el segundo. El comportamiento de estos elementos ante distintos tamaños de pantalla es
el siguiente: el elemento " container-fluid" siempre se adapta al 100% del tamaño de la
pantalla, mientras que el tipo " container" tiene un tamaño máximo, por lo que si el ancho
de la pantalla es superior a este ancho el contenido aparecerá centrado, dejando un
margen a cada lado, y si el ancho de la pantalla es igual o inferior al tamaño máximo del
contenedor, entonces se adaptará al ancho disponible.
Funcionamiento del sistema de rejilla
El sistema de rejilla está pensado para ayudarnos en la disposición de los contenidos de
nuestra web y su adaptación a los diferentes tamaños de pantalla de forma automática.
Para ello tenemos que poner el contenido dentro de celdas o columnas que irán dentro de
filas. Cada fila se puede dividir hasta en 12 columnas, pero seremos nosotros los que
definiremos el número de columnas deseado para cada tamaño de pantalla.
A continuación, se detalla el funcionamiento de este sistema:
 Las columnas (.col) irán agrupadas dentro de filas ( .row ).

 Las filas ( .row ) se deben colocar dentro de una etiqueta contenedora:
.container (para ancho fijo) o .container-fluid (para poder ocupar todo el
ancho), esto permitirá alinear las celdas y asignarles el espaciado correcto.
 El contenido se debe disponer dentro de columnas o celdas, las cuales deben de
ser el único hijo posible de las filas ( .row ), las cuales, a su vez, serán el único hijo
posible del contenedor (container o .container-fluid ).
 Al seguir este orden el sistema de rejilla funcionará correctamente, creando el
espaciado interior y los márgenes apropiados dependiendo de las dimensiones de
la pantalla.
 Cada fila se puede dividir hasta un máximo de 12 columnas, pero somos nosotros
los que tendremos que definir el número de columnas en el que queremos dividir
cada fila y su ancho para cada tamaño de pantalla. Por ejemplo: 3 columnas de
igual ancho.
 Si el tamaño total de las columnas de una fila excede de 12 el tamaño sobrante se
colocará en la siguiente fila.
 El tamaño de las columnas se especificará con clases css que Bootstrap define para
cada tamaño de pantalla, por ejemplo .col-md-XX , donde XX es el tamaño de la
columna, que podrá tomar valores entre 1 y 12.
En la siguiente tabla se muestra un resumen del sistema de rejilla de Bootstrap, su

comportamiento según el tamaño del dispositivo y las clases CSS que nos permiten
controlarlo:
Extra Pequeñ Median Grande Extra

pequeño o o ≥992px grande
<576px ≥576px ≥768px ≥1200px
Ancho máximo del Ninguno 540px 720px 960px 1140px
contenedor (auto)
Prefijo de clase .col- .col- .col- .col- .col-xl-
sm- md- lg-
No. de columnas 12
Ancho de canal 30px (15px a cada lado de una columna)
Anidables si
Ordenamiento de si
columnas
Es importante destacar que al definir estas clases no solo se aplican para ese tamaño de
pantalla sino para los superiores también. Por ejemplo, al indicar el tamaño de las
columnas con las clases para tablets ( .col-sm-* ), también se aplicará para los tamaños
de pantalla medianos y grandes (si no hubieran otras clases para estos tamaños que los
sobrescribieran). Es decir, nos tenemos que fijar que en la tabla anterior el tamaño se
indica con el símbolo de mayor o igual (≥) (o de menor para el caso de xs) a un tamaño
dado, y por lo tanto se aplicará esa disposición a partir de ese tamaño, a no ser que se
indique otra cosa.
Bootstrap está diseñado pensando en los dispositivos móviles primero (o como ellos
indican: siguiendo la estrategia mobile first). Por lo tanto, todos los tamaños y dimensiones
están pensadas para los dispositivos móviles, y para tamaños más grandes lo que hacen es
adaptar o escalar estos tamaños.
Si nos fijamos en la tabla anterior podremos ver que para el tamaño extra pequeño el
prefijo de la clase que se define es ".col-*" (a diferencia de los demás que añaden un
sufijo para el tamaño de pantalla). Cuando indiquemos el tamaño de las columnas usando
esta clase se aplicará para todos los tamaños, a no ser, como ya hemos dicho, que se
indique otra clase para otro tamaño mayor que defina otra disposición.
A continuación, veremos diferentes formas de indicar el número de columnas que

conforman cada fila, usando el sistema automático, especificando el ancho o bien usando
un sistema mixto.
Columnas de ancho especifico

A continuación, se incluyen algunos ejemplos de uso del sistema de rejilla que nos
ayudarán a comprender mejor su funcionamiento.
Selección de tamaño de las columnas solo para pantallas

medianas
En el siguiente ejemplo se han creado 3 filas, la primera dividida en 2 columnas de tamaño

desigual, la segunda en 3 columnas de igual tamaño y la tercera en 2 columnas también de
igual tamaño.
<div class="row">
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
En la siguiente imagen se puede ver el resultado para pantallas de tamaño mediano
(tamaños de md en adelante):
Nota: Se ha añadido código css para poder visualizar los anchos que se asignan a cada columna,
puesto que a los contenedores .div en Bootstrap no se les asigna color.
Dado que las columnas se han especificado únicamente mediante las clases .col-md-* esto
creará estas divisiones solo para las pantallas medianas y grandes, pero no para los tamaños de
pantalla más pequeños. En este último caso las columnas se ampliarán para ocupar todo el ancho
y por lo tanto se mostrarán apiladas de la forma:
Selección de dos tamaños de columna: pequeño y mediano
Si no queremos que las columnas se muestren apiladas para tamaños de pantalla pequeños
podemos indicar también la disposición para esos casos mediante las clases .col-* además de
las que ya teníamos con .col-md-* . Por ejemplo:

<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
</div>

<div class="row">
</div>

<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
En la siguiente imagen se puede ver cómo quedaría el código de ejemplo para pantallas medianas
y grandes (tamaños de md en adelante):
En el caso de pantallas pequeñas las columnas se verían de la forma:
Selección de tres tamaños: extra pequeño, pequeño y mediano

Si queremos tener un mayor control podemos especificar también el tamaño de las
columnas para las pantallas tipo small con las clases .col-sm-* . Por ejemplo:
<div class="row">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
</div>
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
A continuación, se incluye una previsualización de este código de ejemplo para pantallas

medianas y grandes (tamaños md, lg y xl):
El mismo código, pero en pantallas tipo small (tamaño sm) se mostraría como:
Y en el caso de pantallas pequeñas se vería de la forma:
Además de los tres tamaños indicados en este último ejemplo para la primera columna (
.col-12 .col-sm-6 .col-md-8 ) podríamos añadir también, si lo necesitamos, el tamaño para
pantallas grandes y extra grandes con col-lg y col-xl-. Por ejemplo, podríamos haber
definido la siguiente columna:
<div class="col-12 col-sm-6 col-md-8 col-lg-9 col-xl-10">...</div>
En resumen, podemos indicar para cada columna todos los tamaños que queramos de
entre los disponibles (con .col-, .col-sm-, .col-md-, .col-lg- y .col-xl-). Sin
embargo, esto solo lo tendremos que hacer cuando necesitemos establecer un ancho de
columna distinto para cada tamaño de pantalla. Si para todos los tamaños de pantalla
necesitamos el mismo ancho entonces utilizaremos solamente la clase .col-*. Es decir, no
tendría sentido escribir algo como " col-6 col-sm-6 col-md-6 col-lg-6 col-xl-* ", ya
que se conseguiría el mismo efecto que si hubiéramos puesto solamente "col-6".
Por lo tanto, solo añadiremos más de una clase cuando necesitemos establecer anchos
distintos entre esos tamaños, y además si solo vamos a diferenciar entre 2 tamaños solo
será necesario usar 2 etiquetas. Por ejemplo si queremos diferenciar solamente entre móvil
y escritorio solamente tendríamos que añadir la clase .col-* y la clase .col-md-*.
Columnas de ancho automático

A partir de la versión 4 de Bootstrap podemos utilizar las columnas de ancho automático,
es decir, indicar únicamente el número de columnas que queremos y el sistema calculará
automáticamente su anchura. Para esto podremos usar la clase " .col ", sin número de
columnas ni tamaño de pantalla, por ejemplo:
<div class="row">
<div class="col">1 of 2</div>
</div>
<div class="row">
</div>
</div>
Con este código obtendríamos un resultado similar al de la siguiente figura, donde en
primer lugar se crea una fila con dos columnas de igual ancho, y a continuación se añade
una segunda fila con tres columnas de igual ancho:
El número de columnas del ejemplo anterior se mantendrá para todos los tamaños de
pantalla, adaptando el ancho de las columnas para cada uno de ellos.
A esta clase podemos añadir el sufijo para establecer el tamaño de pantalla, por lo que
disponemos de las clases .col, .col-sm, .col-md, .col-lg, .col-xl . En todos los casos
estaremos indicando que queremos una columna de ancho automático desde el tamaño
de pantalla indicado en adelante. Debemos de tener en cuenta que si indicamos algo
como <div class="col col-sm col-md"><div class="col col-sm col-md"> el resultado que
obtendríamos sería el mismo en todos los tamaños, una columna de ancho automático,
equivalente a haber indicado únicamente <div class="col">...</div>. Por lo tanto, el
uso de estos sufijos solo se justificará cuando queramos una columna de ancho
automático solamente de un tamaño en adelante, y que, por lo tanto, para los tamaños
inferiores se cree una columna que ocupe todo el ancho. Por ejemplo, veamos el siguiente
código:
<div class="row">
<div class="col-sm">col-sm</div>
</div>
Estamos indicando que queremos una fila con tres columnas de ancho automático para los
tamaños desde sm en adelante, y, por lo tanto, para el tamaño extra pequeño estas tres
columnas pasarán a ocupar todo el ancho, transformándose en tres filas completas.
Modo mixto
Estas columnas de ancho automático se pueden mezclar en una misma fila con las
columnas de ancho específico que hemos visto antes. La forma de calcular el ancho de
cada columna será el siguiente: En primer lugar, se calculará el tamaño de las columnas de
ancho específico y a continuación se rellenará el espacio restante usando las columnas de
ancho automático. Por ejemplo, a continuación, vamos a definir dos filas mezclando ambos
tipos de columnas:
<div class="row">
<div class="col-6">2 of 3 (wider)</div>
</div>
<div class="row">
<div class="col-5">1 of 3 (wider)</div>
</div>
</div>
Con lo que obtendríamos un resultado similar al de la siguiente figura:
Como podemos ver en este ejemplo, los sistemas para de definir las columnas se pueden
mezclar como queramos, por ejemplo, usando el de ancho fijo entre dos columnas de
ancho automático, o estableciendo una columna de ancho específico al principio y
después dos de ancho automático.
Ancho de columna variable

Con Bootstrap 4 también se introdujeron las columnas de ancho variable, las cuales
ocuparán el ancho justo que se necesite según el contenido de la columna. Para utilizarlas
disponemos de las clases " .col-*-auto ", donde * puede ser cualquiera de los sufijos de
tamaño de pantalla que hemos visto antes sm, md, lg, xl, o ningún sufijo ( .col-auto ) para
indicar todos los tamaños.
Estas etiquetas, igual que las de ancho automático, se pueden mezclar con las de ancho
específico, por ejemplo:
<div class="row justify-content-md-center">
<div class="col col-lg-2">1 of 3</div>
<div class="col-md-auto">Variable width content</div>
</div>
<div class="row">
<div class="col-md-auto">Variable width content</div>
</div>
</div>
Con lo que obtendríamos un resultado similar al de la siguiente figura:
En el código anterior se ha usado la clase " .justify-content-md-center" para alinear el

contenido dentro de una fila, estas etiquetas las veremos en la sección "Alineación". A
continuación, vamos a ver otras utilidades del sistema de rejilla, como el anidamiento de
columnas, o cómo forzar el cambio de fila.
Forzar el cambio de fila

Mediante la clase .w-100 podemos forzar el cambio de fila cuando nosotros queramos:
<div class="row">


<div class="w-100"></div>

</div>
Con lo que obtendríamos dos filas con dos columnas cada una:
Esta clase también nos puede ser útil para forzar el cambio de fila solo para determinados
tamaños de pantalla. Para esto tenemos que combinarla con otras clases de Bootstrap que
nos permiten mostrar u ocultar elementos según el tamaño de pantalla. A continuación, se
incluye un ejemplo:
<div class="row">

<div class="w-100 d-none d-md-block"></div>

</div>
Donde la clase " .d-none " significa que no se muestre ese elemento (para ningún
tamaño), y la clase " .d-md-block " indica que se muestre a partir del tamaño de pantalla
"md" en adelante. Por lo tanto, el campo div marcado con " w-100" permanecerá oculto para
los tamaños extra pequeño y pequeño, y por lo tanto no se activará el cambio de fila para
esos dos tamaños, pero sí para los tamaños desde "md" en adelante.
En la sección "Utilidades Responsive" se explicarán las etiquetas " .d-*" que nos permitirán
controlar la visibilidad de cualquier elemento HTML en función del tamaño de pantalla.
Anidamiento de columnas
Una característica muy potente del sistema de rejilla es que se pueden anidar columnas
dentro de otras columnas. Para esto solamente tenemos que crear una nueva fila dentro
de una columna, y dentro de esta nueva fila podremos subdividirla usando también hasta
12 columnas.
Por ejemplo, en el siguiente código se crea una primera fila con una columna de tamaño 9,
dentro de la cual se añade una segunda fila con dos columnas:
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">Level 2: .col-8 .col-sm-6</div>
<div class="col-4 col-sm-6">Level 2: .col-4 .col-sm-6</div>
</div>
</div>
</div>
Al visualizar este código obtendríamos:
Espaciado entre columnas

Es posible crear un espaciado entre las columnas o dicho de otra forma, mover o desplazar
una columna hacia la derecha, añadiendo un offset inicial mediante las clases: . offset-*.
Por ejemplo. offset-4 creará un espacio a la izquierda de la columna de tamaño 4 (como
si se creara una columna oculta de tipo .col-4 ). En el siguiente código podemos ver un
ejemplo más completo:
<div class="row">
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
El cual se enderezaría de la forma:
Como se puede ver en el ejemplo anterior, también podemos especificar el offset según el
tamaño de pantalla. Si usamos, por ejemplo, la clase " offset-4 " estaremos indicando que
se cree un espacio de 4 para todos los tamaños de pantalla; mientras que con " offset-
md- 4 " se creará este espacio a partir del tamaño de pantalla " md" en adelante. Si en
algún caso necesitamos eliminar el offset podemos utilizar el tamaño cero (0). Por ejemplo,
si especificamos un offset de 2 para tamaños pequeños y no queremos que dicho offset se
aplique para pantallas medianas ni grandes tendríamos que hacer:
<div class="col-sm-5 offset-sm-2 col-md-7 offset-md-0">...</div>
Márgenes
Además de la clase offset también disponemos de las clases para crear márgenes de
espacio variable tanto al lado izquierdo (con " .ml-auto ") como al lado derecho (con .mr-
auto ) de una columna. A continuación, se incluye un ejemplo:
<div class="row">
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
Con lo que obtendríamos el siguiente resultado:
Como se puede ver, en la primera fila se crea un margen automático por la izquierda (y
para todos los tamaños) de la segunda columna, lo que provoca el desplazamiento de esta
hasta alinearla a la derecha. En la segunda fila se añade margen por la izquierda a las dos
columnas para tamaños de pantalla de " md" en adelante. Y en la última fila se crea un
margen automático por la derecha de la primera columna (para todos los tamaños), esto
provoca un efecto similar al obtenido en la primera fila.
Ordenación de columnas
También podemos modificar el orden visual de las columnas mediante la clase .order-*.
Esta clase permite indicar la posición a la cual queremos desplazar la columna (del 1 al 12,
por ejemplo: .order-1 , .order-2 , etc.). También podemos especificar el tamaño de
pantalla para el que queremos que se aplique (por ejemplo: .order-md-12 ). A
continuación, se incluye un ejemplo:
<div class="row">
<div class="col">First, but unordered</div>
<div class="col order-12">Second, but last</div>
<div class="col order-1">Third, but first</div> 
</div>
</div>
</div>
Obteniendo como resultado:
Si nos fijamos en el resultado obtenido podemos ver que no se obtiene el resultado

esperado, la tercera columna (en color violeta) aparece en la segunda posición en lugar de
en la primera como se había indicado con " order-1 ". Esto es debido a un pequeño error
al cambiar el orden de derecha izquierda. En los casos en los que simplemente queramos
mover una columna hacia la derecha no se producirá este error, pero si queremos mover
hacia la izquierda será necesario que establezcamos el orden de todas las columnas.
Por lo tanto, para que funcione correctamente el ejemplo anterior tendríamos que escribir
el siguiente código:
<div class="row">
<div class="col order-2">First, but unordered</div> 
<div class="col order-12">Second, but last</div>
<div class="col order-1">Third, but first</div>
</div>
</div>
Obteniendo ahora sí el resultado esperado:
Como se puede ver también en este ejemplo, no es necesario que los números de columna
para la ordenación sean consecutivos, simplemente se ordenarán de mayor a menor. Hay
que tener cuidado con estas clases si hay un salto de línea dentro de una misma fila
(debido a que el número de columnas ocupe más de 12), ya que en estos casos los
órdenes no funcionarán correctamente.
También disponemos de la clase " .order-first ", la cual nos permitirá situar cualquier
elemento en primer lugar. Además, esta clase sí que funciona, aunque haya un salto de
línea.
Alineación
Con la nueva versión de Bootstrap también han aparecido nuevas clases que nos permiten
especificar la alineación de las columnas tanto en horizontal como en vertical.
Alineación vertical
Para indicar la alineación en vertical tenemos dos opciones: indicar la misma alineación
para todos los elementos de una fila o indicar la alineación a nivel de columna, lo que nos
permitirá establecer distintas alineaciones para cada columna.
En el primer caso la clase CSS para la alineación la tendremos que añadir a la fila usando la
etiqueta " .align-items-* ", donde "*" podrá ser " start " (al principio o pegada a la
parte superior de la fila), " center " (alineación centrada en vertical) o " end " (alineación
pegada al final o a la parte inferior de la fila). A continuación, se incluye un ejemplo de los
tres tipos de alineación:
<div class="row align-items-start">
<div class="col">One of three columns</div>
</div>
<div class="row align-items-center">
</div>
<div class="row align-items-end">
</div>
</div>
Con lo que obtendríamos un resultado como el de la siguiente figura:
En el segundo caso, si queremos indicar por separado la alineación vertical de cada una de
las columnas de una fila, tendremos que usar la clase CSS .align-self-* , donde "*"
podrá adoptar los mismos valores: start , center o end . A continuación, se incluye un
ejemplo en el que se indican los tres tipos de alineaciones dentro de una misma fila:
<div class="row">
<div class="col align-self-start">One of three columns</div>
<div class="col align-self-center">One of three columns</div>
<div class="col align-self-end">One of three columns</div>
</div>
</div>
Con lo que obtendremos el siguiente resultado:
Alineación horizontal
También podemos especificar la alineación horizontal de los elementos de una fila. Para
esto disponemos de la clase " .justify-content-* ", donde "*" podrá ser " start "
(izquierda), " center " (centrado), " end " (derecha), " around " (añadirá el mismo espacio a
ambos lados de la columna) y " between " (añade espacio entre las columnas). A
continuación, se incluye un ejemplo de cada uno de estos tipos de alineación horizontal:
<div class="row justify-content-start">
<div class="col-4">One of two columns</div>
</div>
<div class="row justify-content-center">
</div>
<div class="row justify-content-end">
</div>
<div class="row justify-content-around">
</div>
<div class="row justify-content-between">
</div>
</div>
Con lo que obtendríamos un resultado similar al de la siguiente figura, con la fila alineada
a la izquierda, la segunda centrada, la tercera alineada a la derecha, la cuarta con el
espaciado "al rededor" (o a ambos lados) de las columnas, y la última con el espaciado
entre las columnas.
Alineación responsive
En caso de que lo necesitemos podremos añadir también el tamaño de pantalla a las
distintas clases de alineación que hemos visto: align-items-* , align-self-* y
justify-content-* . Para esto tendremos que añadir primero el tamaño de pantalla ( sm,
md, lg o xl), a continuación un guión (-), y después el tipo de alineación deseado (de entre
los que hemos visto), por ejemplo: align-items-md-center , align-self-sm-end ,
justify-content-lg-end , etc.
Al indicar el tamaño de pantalla dicha alineación se aplicará solamente a partir de dicho

tamaño en adelante, aunque también podemos indicar distintas alineaciones para un
mismo campo según el tamaño de la pantalla, por ejemplo:
<div class="row justify-content-center justify-content-md-start">
</div>
En el ejemplo anterior el contenido se alinearía de forma centrada para los tamaños de

pantalla extra pequeños y pequeños, y cambiará a alineación izquierda a partir del tamaño
de pantalla "md".
Utilidades
Bordes
Use las utilidades de borde para agregar o quitar los bordes de un elemento. Elija entre
todos los bordes o uno a la vez. Por ejemplo:
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
El resultado es el siguiente:
Color del borde
Cambie el color del borde utilizando las utilidades creadas en los colores de tema que
provee Bootstrap 4.
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
Radio de borde
Agregue clases a un elemento para redondear fácilmente sus esquinas.
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-pill">
<img src="..." alt="..." class="rounded-0">
Tamaños
Se .rounded-lg o .rounded-sm para un radio de borde mayor o menor.
<img src="..." alt="..." class="rounded-sm">
<img src="..." alt="..." class="rounded-lg">
Clearfix
Borre rápida y fácilmente el contenido flotante dentro de un contenedor agregando una
utilidad .clearfix.
Icono de cierre
Use un ícono de cierre genérico para descartar contenido como modales y alertas.
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
El resultado en el navegador:
Colores
Transmita significado a través del color con un puñado de clases de utilidad de color.
También incluye soporte para enlaces de estilo con estados de desplazamiento.
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
Resultados en el navegador:
Color de fondo
Similar a las clases de color de texto contextual, establezca fácilmente el fondo de un

elemento en cualquier clase contextual. Los componentes de ancla se oscurecerán al pasar
el mouse, al igual que las clases de texto. Las utilidades en segundo plano no configura
color, por lo que en algunos casos querrás usar .text-* utilidades.
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
El resultado en el navegador es el siguiente:
Propiedades del Monitor

Bootstrap también incluye una serie de clases para ayudarnos a mostrar u ocultar
contenidos según el tamaño del dispositivo. En primer lugar, vamos a ver las clases base
que utilizaremos para estas acciones:
 .d-none : Oculta el elemento sobre el que se aplique.

 .d-inline : Muestra el elemento de forma "inline", es decir, permitiendo otros
elementos por los lados y ocupando el ancho justo.
 .d-block : Muestra el elemento en forma de bloque, ocupando todo el ancho
disponible y sin permitir otros elementos por los lados.
 .d-inline-block: Muestra el elemento en forma de bloque, pero ocupando el
ancho justo y permitiendo otros elementos por los lados.
A continuación, podemos ver un ejemplo del efecto obtenido al aplicar las distintas
etiquetas de las que disponemos para mostrar elementos:
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>
La diferencia entre las etiquetas " d-inline" y " d-inline-block " es el comportamiento
de bloque que adopta el elemento, el cual respetará todos los márgenes y algunas que le
indiquemos.
Al aplicar estas etiquetas sobre un elemento lo mostraremos u ocultaremos para todos los
tamaños, sin embargo, si queremos podemos añadirles modificadores para indicar el
tamaño a partir del cual queremos que se muestren u oculten. En este último caso
tendremos que añadir el tamaño de pantalla entre el prefijo " d- " y el sufijo none , inline ,
block o inline-block , es decir, siguiendo el patrón " d-*-* ". Por ejemplo, podremos
indicar d-sm-none para que se oculte a partir del tamaño pequeño de pantalla, d-xl-none
para que se oculte para las pantallas extra granes, o d-md-block para que se muestre en
forma de bloque a partir del tamaño md.
Es importante que nos fijemos que estas utilidades responsive se aplicarán a partir del
tamaño indicado en adelante, sin embargo, ¿cómo podríamos hacer para que solamente
se oculte o se muestre para un tamaño de pantalla? Para esto podemos combinar varias
clases, por ejemplo, para que solo se oculte para el tamaño extra pequeño tendríamos que
poner " d-none d-sm-block ", o para que solo se muestre para el tamaño pequeño
usaríamos " d-none d-sm-block d-md-none ".
A continuación, se incluye una tabla resumen de las etiquetas que tendríamos que aplicar
para mostrar u ocultar solamente para un tamaño de pantalla:
Tamaño de pantalla Clase

Escondido en todos .d-none
Oculto solo en xs .d-none .d-sm-block
Oculto solo en sm .d-sm-none .d-md-block
Oculto solo en md .d-md-none .d-lg-block
Oculto solo en lg .d-lg-none .d-xl-block
Oculto solo en xl .d-xl-none
Visible en todos .d-block
Visible solo en xs .d-block .d-sm-none
Visible solo en sm .d-none .d-sm-block .d-md-none
Visible solo en md .d-none .d-md-block .d-lg-none
Visible solo en lg .d-none .d-lg-block .d-xl-none
Visible solo en xl .d-none .d-xl-block
<div class="d-print-none bg-success">Solo pantalla (Ocultar solo en impresión)</div>

<div class="d-none d-print-block bg-primary">Solo Imprimir (Solo ocultar en
pantalla)</div>
<div class="d-none d-lg-block d-print-block bg-primary">Ocultar hasta pantalla grande,
pero siempre mostrar en la impresiónt</div>
Embebidos
Cree incrustaciones de video o presentación de diapositivas receptivas basadas en el ancho
del padre creando una relación intrínseca que se escala en cualquier dispositivo.
Las reglas se aplican directamente a <iframe>, <embed>, <video>, y <object>

elementos; opcionalmente, use una clase descendiente explícita .embed-responsive-item
cuando desee hacer coincidir el estilo con otros atributos.
Ejemplo:
Envuelva cualquier incrustación como un <iframe>elemento primario con .embed-

responsiveuna relación de aspecto. El .embed-responsive-item no es estrictamente
necesario, pero lo apoyamos.
<div class="embed-responsive embed-responsive-16by9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/nLnp0tpZ0ok"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-
picture" allowfullscreen></iframe>
</div>
Resultado:
Relaciones de aspecto
Las relaciones de aspecto se pueden personalizar con clases modificadoras. Por defecto, se
proporcionan las siguientes clases de relación:
<div class="row">
<div class="col-3">

<span>Ratio 21:9</span>
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/nLnp0tpZ0ok"></iframe>
</div>
</div>
<div class="col-3">

</div>
</div>
</div>
<div class="row">
<div class="col-3">

</div>
</div>
<div class="col-3">

</div>
</div>
</div>
Resultado
Flexionar
Administre rápidamente el diseño, la alineación y el tamaño de las columnas de la rejilla, la
navegación, los componentes y más con un conjunto completo de utilidades flexibles de
respuesta. Para implementaciones más complejas, puede ser necesario un CSS
personalizado.
Aplique display utilidades para crear un contenedor de flexbox y

transformar elementos secundarios directos en elementos flexibles.
<div class="d-flex p-2 bd-highlight">¡Soy un contenedor Flexbox!</div>
<div class="d-inline-flex p-2 bd-highlight">¡Soy un contenedor flexbox en línea!</div>
Resultado:
También existen variaciones receptivas para .d-flexy .d-inline-flex.
 .d-flex  .d-md-inline-flex
 .d-inline-flex  .d-lg-flex
 .d-sm-flex  .d-lg-inline-flex
 .d-sm-inline-flex  .d-xl-flex
 .d-md-flex  .d-xl-inline-flex
Dirección
En la mayoría de los casos, puede omitir la clase horizontal, ya que el valor predeterminado
del navegador es row. Sin embargo, puede encontrar situaciones en las que necesita
establecer explícitamente este valor (como diseños receptivos).
<div class="d-flex flex-row bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
</div>
Resultado:
Use .flex-column para establecer una dirección vertical, o .flex-column-reverse para

iniciar la dirección vertical desde el lado opuesto.
<div class="d-flex flex-column bd-highlight mb-3">
</div>
<div class="d-flex flex-column-reverse bd-highlight">
</div>
Resultado:
También existen variaciones receptivas para flex-direction:
 .flex-row  .flex-md-column
 .flex-row-reverse  .flex-md-column-reverse
 .flex-column  .flex-lg-row
 .flex-column-reverse  .flex-lg-row-reverse
 .flex-sm-row  .flex-lg-column
 .flex-sm-row-reverse  .flex-lg-column-reverse
 .flex-sm-column  .flex-xl-row
 .flex-sm-column-reverse  .flex-xl-row-reverse
 .flex-md-row  .flex-xl-column
 .flex-md-row-reverse  .flex-xl-column-reverse
Flotador
Alternar flotar en cualquier elemento, a través de cualquier punto de interrupción,
utilizando las utilidades de flotación receptiva.
Clases
Estas clases de utilidades flotan un elemento a la izquierda o derecha, o

deshabilitan la flotación, en función del tamaño de la ventana gráfica actual
utilizando la propiedad CSSfloat . !important está incluido para evitar
problemas de especificidad. Estos usan los mismos puntos de corte de la ventana
gráfica que el sistema de cuadrícula. Tenga en cuenta que las utilidades flotantes
no tienen efecto en los artículos flexibles.
<div class="row">
<div class="col-8">
<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>
<div class="row">
</div>
</div>
Resultado:
Aquí están todas las clases de soporte:
 .float-left  .float-md-none
 .float-right  .float-lg-left
 .float-none  .float-lg-right
 .float-sm-left  .float-lg-none
 .float-sm-right  .float-xl-left
 .float-sm-none  .float-xl-right
 .float-md-left  .float-xl-none
 .float-md-right
Interacciones
Clases de utilidad que cambian la forma en que los usuarios interactúan con los
contenidos de un sitio web.
Cambie cómo se selecciona el contenido cuando el usuario interactúa con él.
La clase .user-select-all selecciona por completo todo el texto dentro del contenedor
cuando el usuario da click sobre él.
La clase .user-select-aut tiene el comportamiento de selección predeterminado.
La clase .user-select-none indica que el texto dentro del contenedor no será

seleccionable cuando se haga click sobre el mismo.
Desbordamiento
Use estas utilidades abreviadas para configurar rápidamente cómo el contenido desborda
un elemento.
La overflow funcionalidad Barebones se proporciona para dos valores de manera

predeterminada, y no son responsivas.
<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
Lectores de pantalla
Utilice las utilidades del lector de pantalla para ocultar elementos en todos los
dispositivos, excepto los lectores de pantalla.
Ocultar un elemento a todos los dispositivos, excepto los lectores de

pantalla con .sr-only. Combine .sr-only con .sr-only-focusable para mostrar el
elemento nuevamente cuando está enfocado (por ejemplo, por un usuario que
solo usa el teclado). También se puede usar como mixins.
Ejemplo:
<a class="sr-only sr-only-focusable" href="#content">Este texto aparecerá
solamente en los lectores de pantalla</a>
Sombreado
Agregue o elimine sombras a elementos con utilidades de sombra de cuadro
Si bien las sombras en los componentes están deshabilitadas de manera predeterminada

en Bootstrap y se pueden habilitar a través de $enable-shadows, también puede agregar o
quitar rápidamente una sombra con nuestras box-shadow clases de utilidad. Incluye
soporte para .shadow-none y tres tamaños predeterminados (que tienen variables
asociadas para coincidir).
<div class="shadow-none p-3 mb-5 bg-light rounded">Sin sombra</div></br>
<div class="shadow-sm p-3 mb-5 bg-white rounded">Pequeña sombra</div></br>
<div class="shadow p-3 mb-5 bg-white rounded">Sombra regular</div></br>
<div class="shadow-lg p-3 mb-5 bg-white rounded">Sombra más grande</div></br>
Resultados:
Dimensionamiento
Haga fácilmente un elemento tan ancho o tan alto con las utilidades de ancho y alto.
Las utilidades de ancho y alto se generan a partir del $sizes mapa Sass

en _variables.scss. Incluye soporte para 25%, 50%, 75%, 100%, y auto por
defecto. Modifique esos valores según lo necesite para generar diferentes utilidades aquí.
<div class="w-25 p-3" style="background-color: #eee;">Ancho 25%</div>

<div class="w-auto p-3" style="background-color: #eee;">Ancho auto</div>
<div class="h-25 d-inline-block" style="width: 120px; background-color:

rgba(0,0,255,.1)">Alto 25%</div>
rgba(0,0,255,.1)">Alto 50%</div>
rgba(0,0,255,.1)">Alto 75%</div>
rgba(0,0,255,.1)">Alto 100%</div>
<div class="h-auto d-inline-block" style="width: 120px; background-color:
rgba(0,0,255,.1)">Alto auto</div>
Resultados:
También puede usar las utilidades max-width: 100% y max-height: 100% según sea
necesario.
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="mh-100" style="width: 100px; height: 200px; background-color:
rgba(0,0,255,0.1);">Ancho máximo 100%</div>
</div>
Espaciado
Bootstrap incluye una amplia gama de márgenes de respuesta abreviada y clases
de utilidad de relleno para modificar la apariencia de un elemento.
Asigne valores responsivos margin o padding a un elemento o un subconjunto de

sus lados con clases abreviadas. Incluye soporte para propiedades individuales,
todas las propiedades verticales y horizontales. Las clases se crean a partir de un
mapa Sass predeterminado que va de .25rem a 3rem.
Las utilidades de espaciado que se aplican a todos los puntos de interrupción,

desde xs hasta xl, no tienen abreviatura de punto de interrupción en ellas. Esto se
debe a que esas clases se aplican desde min-width: 0 arriba y, por lo tanto, no
están vinculadas por una consulta de medios. Sin embargo, los puntos de
interrupción restantes incluyen una abreviatura de punto de interrupción.
Las clases se denominan utilizando el formato {property}{sides}-{size} para xs

y {property}{sides}-{breakpoint}-{size} para sm, md, lg, y xl.
Donde la propiedad es uno de:
 m - para clases que establecen margin

 p - para clases que establecen padding
Donde lados es uno de:
 t- para clases que establecen margin-top o padding-top

 b- para clases que establecen margin-bottom o padding-bottom
 l- para clases que establecen margin-left o padding-left
 r- para clases que establecen margin-right o padding-right
 x- para clases que establecen ambos *-lefty*-right
 y- para clases que establecen ambos *-topy*-bottom
 en blanco: para las clases que establecen un margin o padding en los 4 lados
del elemento
Donde el tamaño es uno de:
 0- para clases que eliminan el margin o padding configurándolo e n0

 1- (por defecto) para las clases que establecer la margin o padding de
$spacer * .25
$spacer * .5
$spacer
$spacer * 1.5
$spacer * 3
 auto- para clases que configuran el margin auto
Centrado horizontal
Además, Bootstrap también incluye una .mx-auto clase para centrar

horizontalmente el contenido de nivel de bloque de ancho fijo, es decir, el
contenido que tiene display: block y un width conjunto, al establecer los
márgenes horizontales en auto.
Ejemplo:
<div class="mx-auto" style="width: 200px;">

Elemento Centrado
</div>
Resultado:
Margen negativo
La sintaxis es casi la misma que las utilidades predeterminadas de margen positivo, pero
con la adición de n antes del tamaño solicitado. Aquí hay una clase de ejemplo que es lo
opuesto a .mt-1:
<div class="row mx-md-n5">
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column
padding</div></div>
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column
padding</div></div>
</div>
Resultado:
Texto
Realinee fácilmente el texto a componentes con clases de alineación de texto.
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium
purus sit amet fermentum.
Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res
quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis
iudicium purus sit amet fermentum.</p>
Para la alineación a la izquierda, a la derecha y al centro, hay disponibles clases responsivas

que utilizan los mismos puntos de interrupción de ancho de ventana que el sistema de
cuadrícula.
Por ejemplo:
<p class="text-left">Texto alineado a la izquierda en todos los tamaños de ventana
gráfica.</p>
<p class="text-center">Texto alineado al centro en todos los tamaños de ventana
gráfica.</p>
<p class="text-right">Texto alineado a la derecha en todos los tamaños de ventana
gráfica.</p>
<hr>
<p class="text-sm-left">Texto alineado a la izquierda en las vistas de tamaño SM
(pequeño) o más ancho.</p>
<p class="text-md-left">Texto alineado a la izquierda en viewports tamaño MD (medio) o
más ancho.</p>
<p class="text-lg-left">Texto alineado a la izquierda en las ventanas gráficas de tamaño
LG (grande) o más ancho.</p>
<p class="text-xl-left">Texto alineado a la izquierda en las ventanas gráficas tamaño XL
(extragrande) o más ancho.</p>
Resultado:
Ajuste de texto y desbordamiento
Ajustar texto con una clase .text-wrap.
Por ejempo:
<div class="badge badge-primary text-wrap" style="width: 6rem;">
Este texto debe ser envuelto
</div>
Resultado:
Para contenido más largo, puede agregar una .text-truncate clase para truncar el texto
con puntos suspensivos. Requiere display: inline-block o display: block.

<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>

<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>
Salto de palabra
Evite que largas cadenas de texto rompan el diseño de sus componentes

utilizando .text-break para establecer word-wrap: break-word. Por ejemplo:
<p class="text-
break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
mmmmmmmmmmmmmmmmmm</p>
Resultado:
Transformación de texto
Transformar texto en componentes con clases de capitalización de texto. Por ejemplo:
<p class="text-lowercase">TEXTO EN MINúSCULAS</p>
<p class="text-uppercase">texto en mayúsculas</p>
<p class="text-capitalize">texto con letra capital</p>
Resultado:
Peso de fuente y cursiva
Cambie el peso (negrita) del texto o escriba en cursiva.
<p class="font-weight-bold">Texto en Negrita.</p>

<p class="font-weight-bolder">Texto en Negrita (relativo al elemento padre).</p>
<p class="font-weight-normal">Texto Normal</p>
<p class="font-weight-light">Texto ligero.</p>
<p class="font-weight-lighter">Texto de peso más ligero (relativo al elemento padre).</p>
<p class="font-italic">Texto en Cursiva</p>
Resultado:
Monoespacio
Cambie una selección a nuestra pila de fuentes monoespaciales con .text-
monospace.
<p class="text-monospace">Este es un texto en monospace</p>
Restablecer color
Restablezca el color de un texto o enlace con .text-reset, para que herede el color

de su padre.
<p class="text-muted">
Texto silenciado con un <a href="#" class="text-reset">enlace de reinicio</a>.
</p>
Resultados:
Decoración de texto
Eliminar una decoración de texto con una .text-decoration-none clase
<a href="#" class="text-decoration-none">Enlace no subrayado</a>
Resultado:
Alineamiento vertical
Cambie fácilmente la alineación vertical de los elementos en línea, bloque en línea,
tabla en línea y celda de tabla.
Cambiar la alineación de elementos con las utilidades vertical-alignment. Tenga en

cuenta que la alineación vertical solo afecta a los elementos en línea, bloque en línea, tabla
en línea y celda de tabla.
Elegir .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-
bottom, y .align-text-top, según sea necesario.
Ejemplos con elementos en línea:
<span class="align-baseline">En linea</span>
<span class="align-top">Arriba</span>
<span class="align-middle">En medio</span>
<span class="align-bottom">Abajo</span>
<span class="align-text-top">Texto arriba</span>
<span class="align-text-bottom">Texto abajo</span>
Resultado:
Con celdas de tabla:

<table style="height: 100px;">
<tbody>
<tr>
<td class="align-baseline">En linea</td>
<td class="align-top">Arriba</td>
<td class="align-middle">En medio</td>
<td class="align-bottom">Abajo</td>
<td class="align-text-top">Texto-arriba</td>
<td class="align-text-bottom">Texto abajo</td>
</tr>
</tbody>
</table>
Resultado:
Visibilidad
Controle la visibilidad, sin modificar la visualización, de elementos con utilidades de
visibilidad.
Establezca los visibility elementos con nuestras utilidades de visibilidad. Estas

clases de utilidad no modifican display en absoluto el valor y no afectan el diseño;
los .invisible elementos aún ocupan espacio en la página. El contenido estará
oculto tanto visualmente como para usuarios de tecnología de asistencia / lectores
de pantalla.
Aplicar .visible o .invisible según sea necesario.
<div class="visible">
<div class="jumbotron text-center">
<h1>Texto visible</h1>
</div>
</div>
<div class="invisible">
<div class="jumbotron text-center">
<h1>Texto no sera visible en el navegador</h1>
</div>
</div>
Resultados:
Componentes
Alertas
Las alertas están disponibles para cualquier longitud de texto, así como un botón opcional
para descartar. Para un estilo adecuado, use una de las ocho clases
contextuales requeridas (por ejemplo: .alert-success). Para el despido en línea, use
el complemento jQuery de alertas.
<div class="alert alert-primary" role="alert">
Alerta Primaria
</div>
<div class="alert alert-secondary" role="alert">
Alerta Secundaria
</div>
<div class="alert alert-success" role="alert">
Alerta Exito
</div>
<div class="alert alert-danger" role="alert">
Alerta de Peligro
</div>
<div class="alert alert-warning" role="alert">
Alerta de Advertencia
</div>
<div class="alert alert-info" role="alert">
Alerta de Informacion
</div>
<div class="alert alert-light" role="alert">
Alerta de luz
</div>
<div class="alert alert-dark" role="alert">
Alerta oscura
</div>
Resultado:
Transmitir significado a las tecnologías de asistencia
El uso del color para agregar significado solo proporciona una indicación visual, que no se
transmitirá a los usuarios de tecnologías de asistencia, como los lectores de
pantalla. Asegúrese de que la información denotada por el color sea obvia del contenido
en sí (por ejemplo, el texto visible) o se incluya a través de medios alternativos, como texto
adicional oculto con la clase .sr-only.
Color de enlace
Use la clase .alert-link de utilidad para proporcionar rápidamente enlaces de

colores coincidentes dentro de cualquier alerta.
<div class="alert alert-primary" role="alert">

Alerta Primaria con <a href="#" class="alert-link">un ejemplo de enlace </a>
</div>
<div class="alert alert-secondary" role="alert">
Alerta Secundaria con <a href="#" class="alert-link">un ejemplo de enlace </a>
</div>
Alerta Exito con <a href="#" class="alert-link">un ejemplo de enlace </a>
</div>
<div class="alert alert-danger" role="alert">
Alerta de Peligro con <a href="#" class="alert-link">un ejemplo de enlace </a>
</div>
<div class="alert alert-warning" role="alert">
Alerta de Advertencia con <a href="#" class="alert-link">un ejemplo de enlace </a>
</div>
<div class="alert alert-info" role="alert">
Alerta de Informacion con <a href="#" class="alert-link">un ejemplo de enlace </a>
</div>
<div class="alert alert-light" role="alert">
Alerta de luz con <a href="#" class="alert-link">un ejemplo de enlace </a>
</div>
<div class="alert alert-dark" role="alert">
Alerta oscura con <a href="#" class="alert-link">un ejemplo de enlace </a>
</div>
Resultado:
Adicional
Las alertas también pueden contener elementos HTML adicionales como

encabezados, párrafos y divisores.
Por ejemplo:

<h4 class="alert-heading">¡Bien hecho!</h4>
<p>Ohhh sí, has leído con éxito este importante mensaje de alerta.
Este texto de ejemplo se ejecutará un poco más para que pueda
ver cómo funciona el espaciado dentro de una alerta con este
tipo de contenido.</p>
<hr>
<p class="mb-0">Siempre que lo necesite, asegúrese de utilizar
utilidades de margen
para mantener las cosas agradables y ordenadas.</p>
</div>
Despido de una alerta
Con el complemento JavaScript de alerta, es posible descartar cualquier alerta en
línea. Así es cómo:
 Asegúrese de haber cargado el complemento de alerta o el JavaScript Bootstrap
compilado.
 Si está construyendo nuestro JavaScript desde la fuente, lo requiereutil.js . La
versión compilada incluye esto.
 Agregue un botón de descarte y la .alert-dismissible clase, que agrega relleno
adicional a la derecha de la alerta y coloca el .close botón.
 En el botón de descartar, agregue el data-dismiss="alert" atributo, que activa la
funcionalidad de JavaScript. Asegúrese de usar el <button>elemento con él para un
comportamiento adecuado en todos los dispositivos.
 Para animar las alertas al descartarlas, asegúrese de agregar las clases .fade
y .show.
Por ejemplo:
<div class="alert alert-warning alert-dismissible fade show" role="alert">

<strong>Santo guacamole!</strong> Haga click en el símbolo "x" a la derecha para
cerrarme.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
</button>
</div>
Resultado:
Insignias
Documentación y ejemplos de insignias, un pequeño conteo y componente de etiquetado.
Las insignias se escalan para coincidir con el tamaño del elemento primario inmediato
mediante el uso de tamaños y em unidades de fuente relativos.
Por ejemplo:
<h1>Ejemplo de encabezado <span class="badge badge-secondary">Nuevo</span></h1>

Resultado:
Las
insignias se pueden usar como parte de enlaces o botones para proporcionar un contador.
<button type="button" class="btn btn-primary">

Notificaciones <span class="badge badge-light">4</span>
</button>
Variaciones contextuales
Agregue cualquiera de las clases de modificador mencionadas a continuación para
cambiar la apariencia de una insignia.
Por ejemplo:
<span class="badge badge-primary">Primaria</span>
<span class="badge badge-secondary">Secundaria</span>
<span class="badge badge-success">Exitoso</span>
<span class="badge badge-danger">Peligro</span>
<span class="badge badge-warning">Advertencia</span>
<span class="badge badge-info">Informacion</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Oscuro</span>
Resultado:
Insignias de pastillas
Use la clase modificadora .badge-pill para hacer que las insignias sean más
redondeadas (con un border-radius horizontal más grande y padding adicional ). Útil si
te pierdes las insignias de v3.
Ejemplo:
<span class="badge badge-pill badge-primary">Primario</span>

<span class="badge badge-pill badge-secondary">Secondario</span>
<span class="badge badge-pill badge-success">Exitoso</span>
<span class="badge badge-pill badge-danger">Peligro</span>
<span class="badge badge-pill badge-warning">Advertencia</span>
<span class="badge badge-pill badge-info">Información</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Oscuro</span>
Resultado:
Enlaces
El uso de las clases contextuales .badge-* en un elemento <a> proporciona
rápidamente insignias accionables con estados de desplazamiento y enfoque. Por ejemplo:
<a href="#" class="badge badge-primary">Primario</a>

<a href="#" class="badge badge-secondary">Secondario</a>
<a href="#" class="badge badge-success">Exitoso</a>
<a href="#" class="badge badge-danger">Peligro</a>
<a href="#" class="badge badge-warning">Advertencia</a>
<a href="#" class="badge badge-info">Información</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Oscuro</a>
Resultado:
Migas de pan
Indique la ubicación de la página actual dentro de una jerarquía de navegación que agrega
separadores automáticamente mediante CSS.
Se muestra a continuación 3 diferentes ejemplos:

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Inicio</li>
</ol>
</nav>
<li class="breadcrumb-item"><a href="#">Inicio</a></li>
<li class="breadcrumb-item active" aria-current="page">Biblioteca</li>
</ol>
</nav>
<li class="breadcrumb-item"><a href="#">Inicio</a></li>
<li class="breadcrumb-item"><a href="#">Biblioteca</a></li>
<li class="breadcrumb-item active" aria-current="page">Datos</li>
</ol>
</nav>
Resultado:
Dado que las migas de pan proporcionan una navegación, es una buena idea agregar una
etiqueta significativa como aria-label="breadcrumb" para describir el tipo de
navegación proporcionada en el elemento <nav>, así como aplicar un aria-
current="page" al último elemento del conjunto para indicar que representa la página
actual.
Botones
Bootstrap incluye varios estilos de botones predefinidos, cada uno con su propio propósito
semántico, con algunos extras para mayor control.
Mediante la clase .btn podemos aplicar estilo a los elementos tipo button . Esta clase la
podemos combinar con .btn-primary , .btn-secondary , .btn-success , .btn-danger,
.btn-warning , .btn-info , .btn-light , .btn-dark o .btn-link para crear
botones para diferentes estados o acciones en nuestros formularios:
<button type="button" class="btn btn-primary">Primario</button>
<button type="button" class="btn btn-secondary">Secundario</button>
<button type="button" class="btn btn-success">Exitoso</button>
<button type="button" class="btn btn-danger">Peligro</button>
<button type="button" class="btn btn-warning">Advertencia</button>
<button type="button" class="btn btn-info">Información</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Oscuro</button>
<button type="button" class="btn btn-link">Link</button>
Resultado:
Etiquetas de botones
Las clases .btn están diseñadas para ser utilizadas con el elemento <button>. Sin
embargo, también puede usar estas clases en elementos <a> o <input> (aunque algunos
navegadores pueden aplicar una representación ligeramente diferente).
Cuando se utilizan clases de botones en <a> elementos que se utilizan para activar la
funcionalidad en la página (como el colapso del contenido), en lugar de vincular a nuevas
páginas o secciones dentro de la página actual, estos enlaces se deben dar role="button"
para transmitir adecuadamente su propósito a las tecnologías de asistencia como lectores
de pantalla:
<a class="btn btn-primary" href="#" role="button">Enlace</a>

<button class="btn btn-primary" type="submit">Botón</button>
<input class="btn btn-primary" type="button" value="Botón">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
Resultados:
Botones de esquema
Reemplace las clases modificadoras predeterminadas por las clases .btn-outline-*
que eliminan todas las imágenes y colores de fondo en cualquier botón.
<button type="button" class="btn btn-outline-primary">Primario</button>

<button type="button" class="btn btn-outline-secondary">Secundario</button>
<button type="button" class="btn btn-outline-success">Exitoso</button>
<button type="button" class="btn btn-outline-danger">Peligro</button>
<button type="button" class="btn btn-outline-warning">Advertencia</button>
<button type="button" class="btn btn-outline-info">Información</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Oscuro</button>
Resultado:
Tamaños
Agrega .btn-lg o .btn-sm para tamaños adicionales:
<button type="button" class="btn btn-primary btn-lg">Botón grande</button>
<button type="button" class="btn btn-secondary btn-sm">Botón pequeño</button>
Resultado:
<button type="button" class="btn btn-primary btn-lg btn-block">Botón a nivel de

bloque</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Botón a nivel de
bloque</button>
Estados: Activos / Desactivado
Un botón se puede establecer en un estado activo (aparece presionado) o deshabilitado
(no se puede hacer clic).
La clase .active hace que un botón aparezca presionado, y el atributo disabled hace que
un botón no se pueda hacer clic. Tenga en cuenta que los elementos <a> no admiten el
atributo deshabilitado y, por lo tanto, deben usar la clase .disabled para que aparezca
visualmente desactivado.
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-
pressed="true">Enlace Primario</a>
<button type="button" class="btn btn-lg btn-primary" disabled>Boton primario
deshabilitado</button>
Resultado:
Agregar data-toggle="button" para alternar el activeestado de un botón. Si está

preactivando un botón, debe agregar manualmente la clase .active y aria-
pressed="true" al <button>
Casilla de verificación y botones de radio

Los estilos de Bootstrap .button se pueden aplicar a otros elementos, como <label>,
para proporcionar una casilla de verificación o alternar botones de estilo de
radio. Agregue data-toggle="buttons" a un que .btn-group contenga esos botones
modificados para permitir su comportamiento de alternancia a través de JavaScript y
agregue .btn-group-toggle para dar estilo a los <input>s dentro de sus botones. Tenga
en cuenta que puede crear botones de entrada única o grupos de ellos. Por ejemplo:
<span>Ejemplo con input de tipo checkbox</span>
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked> Checked
</label>
</div>
<span>Ejemplo con input de tipo radio</span></br>
<div class="btn-group btn-group-toggle" data-toggle="buttons">

<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" checked> Activo
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2"> Radio 1
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3"> Radio 2
</label>
</div>
Resultado:
Grupo de botones
Envuelve una serie de botones con .btn en .btn-group. Agregue un
comportamiento de estilo de casilla de verificación y radio JavaScript opcional
con nuestro complemento de botones. Por ejemplo:
<div class="btn-group" role="group" aria-label="Basic example">

<button type="button" class="btn btn-success">Izquierda</button>
<button type="button" class="btn btn-success">Centro</button>
<button type="button" class="btn btn-success">Derecha</button>
</div>
Resultado:
Barra de herramientas de botones

Combine conjuntos de grupos de botones en barras de herramientas de botones para
obtener componentes más complejos. Use las clases de utilidad según sea necesario para
espaciar grupos, botones y más.
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">

<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
</div>
</div>
Resultado:
Dimensionamiento
En lugar de aplicar clases de tamaño de botón a cada botón en un grupo, simplemente
agregue .btn-group-* a cada uno .btn-group, incluido cada uno al anidar varios grupos.
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-primary">Izquierda</button>
<button type="button" class="btn btn-primary">Centro</button>
<button type="button" class="btn btn-primary">Derecha</button>
</div>
</br>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-secondary">Izquierda</button>
<button type="button" class="btn btn-secondary">Centro</button>
<button type="button" class="btn btn-secondary">Derecha</button>
</div> </br>
<div class="btn-group btn-group-sm" role="group" aria-label="...">
<button type="button" class="btn btn-primary">Izquierda</button>
<button type="button" class="btn btn-primary">Centro</button>
<button type="button" class="btn btn-primary">Derecha</button>
</div> </br>
Resultado:
Anidamiento
Coloque un .btn-group dentro de otro .btn-group cuando desee menús desplegables
mezclados con una serie de botones.
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<div class="btn-group" role="group">

<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-
toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Desplegable
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Enlace desplegable</a>
<a class="dropdown-item" href="#">Enlace desplegable</a>
</div>
</div>
</div>
Resultado:
Variación
vertical
Haga que un conjunto de botones aparezca apilado verticalmente en lugar de
horizontalmente con la clase btn-group-vertical (También puede agregarse botones
desplegables para que sean mostrados verticalmente). Los botones desplegables de
división no son compatibles aquí.
<div class="btn-group-vertical">
<button type="button" class="btn btn-secondary">Botón 1</button>
</div>
Resultado:
Tarjetas
Una tarjeta es un contenedor de contenido flexible y extensible. Incluye opciones para
encabezados y pies de página, una amplia variedad de contenido, colores de fondo
contextuales y potentes opciones de visualización. Si está familiarizado con Bootstrap 3, las
tarjetas reemplazan los viejos paneles, pozos y miniaturas. Funcionalidad similar a esos
componentes está disponible como clases modificadoras para tarjetas.
Las tarjetas están construidas con el menor marcado y estilo posible, pero aún así logran
mucho control y personalización. Construidos con flexbox, ofrecen una fácil alineación y se
mezclan bien con otros componentes Bootstrap. No tienen margin por defecto, así que
use las utilidades de espaciado según sea necesario.
A continuación, se muestra un ejemplo de una tarjeta básica con contenido mixto y un

ancho fijo. Las tarjetas no tienen un ancho fijo para comenzar, por lo que, naturalmente,
ocuparán todo el ancho de su elemento padre. Esto se personaliza fácilmente con las
diversas opciones de tamaño que ofrece Bootstrap 4.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Título de la tarjeta</h5>
<p class="card-text">Algún texto de ejemplo rápido para construir
sobre el título de la tarjeta y conformar la mayor parte del
contenido de la tarjeta.</p>
<a href="#" class="btn btn-primary">Ve a aulgún lugar</a>
</div>
</div>
Resultado:
Tipos de contenido
Las tarjetas admiten una amplia variedad de contenido, incluidas imágenes, texto, grupos
de listas, enlaces y más. A continuación, hay ejemplos de lo que se admite.
Cuerpo
El bloque de construcción de una tarjeta es el .card-body. Úselo siempre que
necesite una sección acolchada dentro de una tarjeta.
<div class="card">
Este es un texto dentro del cuerpo de una tarjeta.
</div>
</div>
Resultado:
Títulos, texto y enlaces.

Los títulos de las tarjetas se usan agregando .card-title a una <h*> etiqueta. Del
mismo modo, los enlaces se agregan y se colocan uno al lado del otro al
agregarlos .card-link a una etiqueta <a>.
Los subtítulos se usan agregando un .card-subtitle a una <h*> etiqueta. Si

las .card-title y los .card-subtitle elementos se colocan en un .card-body
artículo, el título de la tarjeta y los subtítulos están alineados muy bien.

<h5 class="card-title">Título de la tarjeta</h5>
<h6 class="card-subtitle mb-2 text-muted"> Subtítulo de tarjeta</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Animi cum dignissimos et impedit nobis, omnis</p>
<a href="#" class="card-link">Enlace de Tarjeta</a>
<a href="#" class="card-link">Otro enlace</a>
</div>
</div>
Resultado:
Imágenes
La clase .card-img-top coloca una imagen en la parte superior de la
tarjeta. Con .card-text, se puede agregar texto a la tarjeta. El texto dentro .card-
text también se puede diseñar con las etiquetas HTML estándar.
Ejemplo:
<img src="..." class="card-img-top" alt="...">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Animi cum dignissimos et impedit nobis,
omnis.</p>
</div>
</div>
Resultado:
Lista de grupos
Cree listas de contenido en una tarjeta con un grupo de lista de descarga, para ello es
necesario crear una lista sin orden <ul> con clase .list-group y agregar dentro de la
misma los ítem que se requieran con la clase .list-group-item
<div class="card-header">
Destacados
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Resultado:
Encabezado y pie de
página
Agregue un encabezado y / o pie de página opcional dentro de una tarjeta. Para ello se
debe agregar un contenenedor div con la clase .card-header.
<div class="card">

Este es un encabezado
</div>
<h5 class="card-title">Titulo</h5>
<p class="card-text">Este es un ejemplo de parrafo</p>
<a href="#" class="btn btn-primary">Enlace</a>
</div>
</div>
Resultado:
Ejemplo de .footer-card y de .card-footer

<div class="card text-center">
Destacados
</div>
<h5 class="card-title">Titulo</h5>
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
<footer class="blockquote-footer">Alguien famoso <cite title="Source
Title">Titulo de la fuente</cite></footer>
</blockquote>
<a href="#" class="btn btn-primary">Enlace</a>
</div>
<div class="card-footer text-muted">
hace 2 años
</div>
</div>
Resultado:
Estilos de tarjeta
Las tarjetas incluyen varias opciones para personalizar sus fondos, bordes y color.
Utilice las utilidades de texto y fondo para cambiar la apariencia de una tarjeta, para ello
deberá agregar la clase: bg-* donde * puede ser: primary, secundary, success,
danger, warning, info, light, dark.
El código HTML para las tarjetas anteriores se ha resumido a las dos primeras, puesto que
es muy similar en todos los casos.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Encabezado</div>
<h5 class="card-title">Tarjeta primaria con titulo </h5>
<p class="card-text">Some quick example text to build on the card title and make
up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Encabezado</div>
<h5 class="card-title">Tarjeta secundaria con titulo </h5>
<p class="card-text">Some quick example text to build on the card title and make
up the bulk of the card's content.</p>
</div>
</div>
…
Bordes
Use las utilidades de borde para cambiar solo el border-color de una tarjeta. Tenga en
cuenta que puede poner .text-{color} clases en el padre .card o en un subconjunto
del contenido de la tarjeta como se muestra a continuación.
Debido a que la documentación sobre las tarjetas de Bootstrap es demasiado extensa en
este documento no se abordara en su totalidad, pero el lector puede consultar la
documentación que povee Botstrap a través del siguientes enlace
https://getbootstrap.com/docs/4.5/components/card/.
Menú o listas desplegables

Los menús desplegables son superposiciones contextuales conmutables para mostrar listas
de enlaces y más. Se hacen interactivos con el complemento de JavaScript desplegable
Bootstrap incluido. Se activan al hacer click, no al desplazarse. Esta es una decisión de
diseño intencional .
Los menús desplegables se basan en una biblioteca de terceros, Popper.js , que
proporciona un posicionamiento dinámico y detección de viewport. Asegúrese de
incluir popper.min.js antes del JavaScript de Bootstrap o
use bootstrap.bundle.min.js/ bootstrap.bundle.js que contiene Popper.js. Popper.js
no se usa para colocar menús desplegables en las barras de navegación, ya que no se
requiere un posicionamiento dinámico.
Envuelva el botón desplegable (su botón o enlace) y el menú desplegable

dentro .dropdown, u otro elemento que declare position: relative. Se pueden
activar menús desplegables <a> o <button>elementos para adaptarse mejor a sus
necesidades potenciales.
Ejemplo:
Cualquier single .btn se puede convertir en un menú desplegable con algunos cambios

de marcado. Así es como puede ponerlos a trabajar con cualquiera de los <button>
elementos:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Botton desplegable
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">

<a class="dropdown-item" href="#">Acción</a>
<a class="dropdown-item" href="#">Otra acción</a>
<a class="dropdown-item" href="#">Enlace a allgún lugar</a>
</div>
</div>
Resultado:
La mejor parte es que también puedes hacer esto con cualquier variante de botón:
Para ello solo se debe agregar una clase al tipo de botón que se utilizará, de los que
provee Bootstrap y de los cuales ya se ha hablado con anterioridad.
Clases disponibles:
 .btn-primary  .btn-danger
 .btn-seconday  .btn-light
 .btn-warning  .btn-dark
 .btn-info
Botón de división
Del mismo modo, cree menús desplegables de botones divididos con prácticamente el
mismo marcado que los botones desplegables de un solo botón, pero con la adición
de .dropdown-toggle-split un espacio adecuado alrededor del cursor desplegable.
Usamos esta clase adicional para reducir la horizontal padding a cada lado del cursor en
un 25% y eliminar la margin-left que se agrega para desplegar botones
regularmente. Esos cambios adicionales mantienen el cursor centrado en el botón de
división y proporcionan un área de impacto más apropiada al lado del botón principal. Por
ejemplo:


<div class="btn-group">
<button type="button" class="btn btn-danger">Accion</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split"
<span class="sr-only">Desplegable</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Acción 1</a>
<a class="dropdown-item" href="#">Algún enlace</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Enlace Separado</a>
</div>
</div>
Resultado:
Los demás ejemplos han sido agregados en el código HTML cambiando la clase del tipo
de botón, de las mencionados anteriormente.
Dimensionamiento
Los menús desplegables de botones funcionan con botones de todos los tamaños,
incluidos los botones desplegables predeterminados y divididos.
Agregando las clases necesarias para visualizar el tamaño, estas clases pueden ser:
.btn-lg
btn-sm .btn-sm
Obteniendo los posibles siguientes resultados:
Direcciones
Desplegar hacia arriba
Desencadenar menús desplegables sobre los elementos agregándolos .dropup al

elemento padre. Por ejemplo:
<div class="btn-group dropup">

<button type="button" class="btn btn-secondary">
Desplegable hacia arriba
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
<span class="sr-only">Desplegable</span>
</button>
<a class="dropdown-item" href="#">Enlace</a>
</div>
</div>
Resultado:
Desplegar hacia la derecha
Active menús desplegables a la derecha de los elementos agregándolos .dropright al

elemento principal. Por ejemplo:
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Desplegar a la derecha
</button>
<a class="dropdown-item" href="#">Acción </a>
</div>
</div>
Resultado:
Desplegable a la izquierda
Active menús desplegables a la izquierda de los elementos agregándolos .dropleft
al elemento principal. Por ejemplo:
<div class="btn-group dropleft">

<button type="button" class="btn btn-secondary dropdown-toggle" data-
Desplegar a la izquierda
</button>
<a class="dropdown-item" href="#">Acción </a>
</div>
</div>
Resultado:
Contenido del menú
Encabezados
Agregue un encabezado para etiquetar secciones de acciones en cualquier menú
desplegable. Tan solo hay que agregar una etiqueta de encabezado <h*> con la clase
.dropdown-header.
<h6 class="dropdown-header">Encabezado del desplegable</h6>
</div>
Resultado:
Divisores
Grupos separados de elementos de menú relacionados con un divisor. Basta con
agregar un contenedor <div></div> con la clase .dropdown-divider
<a class="dropdown-item" href="#">Enlace separadok</a>
</div>
Resultado:
Texto
Coloque cualquier texto de forma libre dentro de un menú desplegable con texto y
use utilidades de espaciado . Tenga en cuenta que probablemente necesitará estilos de
tamaño adicionales para restringir el ancho del menú. Por ejemplo:
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
<p>
Este es un ejemplo de texto dentro del menú despleguable.
</p>
</div>
Resultados:
Formulario
Coloque un formulario dentro de un menú desplegable, o conviértalo en un menú
desplegable, y use las utilidades de margen o relleno para darle el espacio negativo que
necesita. Por ejemplo:
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-
Desplegar formulario
</button>

<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Correo
electrónico</label>
<input type="email" class="form-control"
id="exampleDropdownFormEmail1" placeholder="micorreo@mail.com">
</div>
<label for="exampleDropdownFormPassword1">Contraseña</label>
<input type="password" class="form-control"
id="exampleDropdownFormPassword1" placeholder="contraseña">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input"
id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Recordarme
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Acceder</button>
</form>
<a class="dropdown-item" href="#">Eres nuevo? Regístrate</a>
<a class="dropdown-item" href="#">Olvidaste tu contraseña?</a>
</div>
</div>
Resultado:
Puesto que no se han abordado los formularios no se presentan más ejemplos sobre
formularios dentro de menús desplegables, sin embargo, se profundizará sobre ellos en la
siguiente sección.
Formularios
Los controles de formulario de Bootstrap se expanden en estilos de formulario
Reiniciados con clases. Use estas clases para optar por sus pantallas personalizadas para
una representación más consistente en navegadores y dispositivos.
Asegúrese de utilizar un atributo type apropiado en todas las entradas (por Ej., email

Para la dirección de correo electrónico o number la información numérica) para aprovechar
los controles de entrada más nuevos, como la verificación de correo electrónico, la
selección de números y más. Un ejemplo básico de formulario con Bootstrap:
<form >
<label for="exampleInputEmail1">Correo electrónico</label>
<input type="email" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">
Nunca compartiremos su correo electrónico con nadie más.</small>
</div>
<label for="exampleInputPassword1">Contraseña</label>
<input type="Contraseña" class="form-control"
id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Echame un
vistazo</label>
</div>
<button type="submit" class="btn btn-primary">Acceder</button>
</form>
Resultado:
Controles de formulario
Los controles de forma textual, como <input>, <select> y <textarea>, están diseñados
con la clase .form-control. Se incluyen estilos para apariencia general, estado de
enfoque, tamaño y más.
Asegúrese de explorar nuestros formularios personalizados para ampliar el

estilo <select>. Por ejemplo:
<form>

<label for="exampleFormControlInput1">Correo electrónico</label>
<input type="email" class="form-control" id="exampleFormControlInput1"
placeholder="name@example.com">
</div>

<label for="exampleFormControlSelect1">Seleccionar ejemplo</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>

<label for="exampleFormControlTextarea1">Ejemplo textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1"
rows="3">
</textarea>
</div>
</form>
Resultado:
Cabe resaltar y destacar que para aplicar los estilos de Bootstrap a los formularios es
recomendable encerrar todos los elementos relativos a un control dentro de un
contenedor (puede ser <div>) con la clase .form-group. Un ejemplo de ello se encuentra
en el caso anterior en el que para un input de tipo mail, se encerraban todos los elementos
en un contenedor div:
<label for="exampleFormControlInput1">Correo electrónico</label>
<input type="email" class="form-control" id="exampleFormControlInput1"
placeholder="name@example.com">
</div>
Obteniendo el resultado dentro del formulario:
Se observa que los estilos de Bootstrap se aplican correctamente.
Para entradas de archivo, intercambie el .form-control por .form-control-file.

<form>
<label for="exampleFormControlFile1">Ejemplo de Input File</label>
<input type="file" class="form-control-file"
id="exampleFormControlFile1">
</div>
</form>
Resultado:
Formulario inline
Mediante la utilización de la clase .form-inline sobre la etiqueta <form> podemos crear
formularios que se dispondrán en una sola línea. A continuación, se incluye un ejemplo de
este tipo de formularios:
<form class="form-inline">
<div class="form-group mx-sm-3">
<label for="inputUser" class="sr-only">User</label>
<input type="password" class="form-control" id="inputUser"
placeholder="User">
</div>
<div class="form-group mx-sm-3">
<label for="inputPass" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPass"
placeholder="Passwor">
</div>
<button type="submit" class="btn btn-primary">Confirm</button>
</form>
Resultado:
Aunque los campos del formulario no contengan etiquetas (labels) es necesario incluirlas
por cuestiones de accesibilidad, para dar soporte a los lectores de pantalla. Por este
motivo se han incluido en el ejemplo anterior con la clase .sr-only (screen readers only).
Agrupar inputs con otros elementos

Podemos añadir texto o botones al principio, final o a ambos lados de campo tipo
<input>. Para esto tenemos que agrupar dicho input dentro de un .input-group y añadir
dentro del grupo el elemento que queremos agrupar con la etiqueta .input-group-addon.
A continuación, se incluye un ejemplo:
<label class="sr-only" for="inlineFormInputName2">Nombre</label>
<input type="text" class="form-control mb-2 mr-sm-2"
id="inlineFormInputName2" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Usuario</label>

<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control"
id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<div class="form-check mb-2 mr-sm-2">

<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Recordarme
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Acceder</button>
</form>
Resultado:
Se puede visualizar con más detalles la documentación de formularios en Bootstrap a
través del siguiente enlace: https://getbootstrap.com/docs/4.5/components/forms/.
Donde también se puede encontrar más ejemplos sobre formularios.
Grupo de entrada
Extienda fácilmente los controles de formulario agregando texto, botones o grupos de
botones a cada lado de las entradas de texto, selecciones personalizadas y entradas de
archivo personalizadas. Ejemplo básico:
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Usuario" aria-
label="Usuario" aria-describedby="basic-addon1">
</div>

<input type="text" class="form-control" placeholder="Usuario del
destinatario" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@ejemplo.com</span>
</div>
</div>
Resultado:
Dimensionamiento
Agregue las clases .input-group de tamaño de formulario relativas a sí mismo y el

contenido dentro se redimensionará automáticamente, sin necesidad de repetir las clases
de tamaño de control de formulario en cada elemento: input-group-sm input-group,
input-group-lg. Al aplicar las clases anteriores a grupos de entradas se observarían de la
siguiente forma:
Casillas de verificación y radios
Coloque cualquier casilla de verificación u opción de radio dentro del complemento de un
grupo de entrada en lugar de texto.

<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text
input">
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with
checkbox">
</div>

<div class="input-group">
<div class="input-group-text">
<input type="radio" aria-label="Radio button for following text
input">
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with radio
button">
</div>
Resultado:
Entradas múltiples
Si bien <input>se admiten visualmente varios mensajes de correo electrónico, los estilos
de validación solo están disponibles para grupos de entrada con uno solo <input>.
Ejemplo:
<span class="input-group-text">Primer Nombre y Apellido</span>
</div>
<input type="text" aria-label="First name" class="form-control">
<input type="text" aria-label="Last name" class="form-control">
</div>
Resultado:
Complementos múltiples
Se admiten varios complementos y se pueden mezclar con las casillas de verificación y las
versiones de entrada de radio.
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
<input type="text" class="form-control" aria-label="Dollar amount (with dot
and two decimal places)">
</div>
Resultado:
Alternando y/o modificando los completos para ser visualizados antes o después del input,
para ello se utilizan las clases: input-group-prepend e input-group-append.
Con ello se puede obtener resultados como los siguientes:
Botones con menús desplegables

<input type="text" class="form-control" aria-label="Text input with dropdown
button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button"
data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">Dropdown</button>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
Resultado:
Botones segmentados

<button type="button" class="btn btn-outline-secondary">Accio</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle
dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<a class="dropdown-item" href="#">Accion</a>
<a class="dropdown-item" href="#">Otra accion</a>
<a class="dropdown-item" href="#">Enlace separado</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with
segmented dropdown button">
</div>
Resultado:
Formularios personalizados
Los grupos de entrada incluyen soporte para selecciones personalizadas y entradas de
archivos personalizados. Las versiones predeterminadas del navegador de estos no son
compatibles.
Selección personalizada
<label class="input-group-text"
for="inputGroupSelect01">Opciones</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected>Escoger</option>
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select>
</div>
Resultado:
Entrada de archivo personalizada

<span class="input-group-text" id="inputGroupFileAddon01">Subir</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01" aria-
describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Elige el
archivo</label>
</div>
</div>
Resultado:
Jumbotron
Componente ligero y flexible para exhibir contenido de estilo de unidad héroe.
Un componente ligero y flexible que opcionalmente puede extender toda la ventana

gráfica para mostrar mensajes clave de marketing en su sitio. Por ejemplo:
<div class="jumbotron">
<h1 class="display-4">Hola, mundo!</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusantium autem doloribus esse est eveniet.</p>
<hr class="my-4">
<p>Accusantium autem doloribus esse est eveniet, exercitationem incidunt
ipsam magni obcaecati quae quo.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Leer más</a>
</div>
Resultado:
Para hacer que el jumbotron sea de ancho completo y sin esquinas redondeadas, agregue
la .jumbotron-fluid clase de modificador y agregue .container o .container-fluid
inside.
<div class="jumbotron jumbotron-fluid">

<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">Este es un jumbotron modificado que ocupa todo el
espacio horizontal de su padre.</p>
</div>
</div>
Resultado:
Lista de
grupo
Los grupos de listas son un componente flexible y poderoso para mostrar una serie de
contenido. El grupo de lista más básico es una lista desordenada con elementos de lista y
las clases adecuadas. Desarrolle sobre él con las opciones que siguen, o con su propio CSS
según sea necesario. Por ejemplo:
<ul class="list-group">
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Resultado:
Artículos activos
Agregar .active a .list-group-item para indicar la selección activa actual.
<li class="list-group-item active">Cras justo odio</li>
</ul>
Resultado:
Artículos deshabilitados
Agregar .disabled a .list-group-item para que parezca deshabilitado. Tenga en
cuenta que algunos elementos con .disabled también requerirán JavaScript
personalizado para deshabilitar completamente sus eventos de clic (por ejemplo, enlaces).
<li class="list-group-item disabled" aria-disabled="true">Cras justo
odio</li>
</ul>
Resultado:
Enlaces y botones
Use <a> o <button> para crear elementos de grupo de lista accionables con estado activo,
deshabilitado y activo agregando .list-group-item-action. Separamos estas
pseudoclases para asegurar que los grupos de listas hechos de elementos no interactivos
(como <li> o <div>) no proporcionen un clic. Asegúrese de no usar las clases
.btn estándar aquí.
Por ejemplo:
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">Cras justo
odio</a>
<a href="#" class="list-group-item list-group-item-action disable">Dapibus
ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo
risus</a>
</div>
Resultado:
Rubor
Agregue .list-group-flush para eliminar algunos bordes y esquinas redondeadas para
representar elementos de grupo de lista de borde a borde en un contenedor principal (por
ejemplo, tarjetas).
<ul class="list-group list-group-flush">

<li class="list-group-item active">Morbi leo risus</li>
</ul>
Resultados:
Horizontal
Agregar la clase .list-group-horizontal para cambiar el diseño de los elementos del
grupo de listas de vertical a horizontal en todos los puntos de
interrupción. Alternativamente, elija una variante responsiva .list-group-horizontal-
{sm|md|lg|xl} para hacer un grupo de lista horizontal comenzando en ese punto de
interrupción min-width. Por ejemplo:
<ul class="list-group list-group-horizontal">
<li class="list-group-item">Elemento a la izquierda</li>
<li class="list-group-item">Elemento a la medio</li>
<li class="list-group-item">Elemento a la derecha</li>
</ul>
Resultado:
También pueden ser mezclados con las clases anteriores activado, deshabilitado, etc.
Clases contextuales
Use clases contextuales para diseñar elementos de la lista con un fondo y color con estado.
Las clases disponibles son:
list-group-item-primary list-group-item-warning
list-group-item-secondary list-group-item-info
list-group-item-success list-group-item-light
list-group-item-danger list-group-item-dark
El resultado al aplicar todas las clases anteriores es el siguiente:

<li class="list-group-item list-group-item-primary">Un elemento de grupo de
lista primaria</li>
<li class="list-group-item list-group-item-secondary">Un elemento de grupo
de lista secundaria</li>
<li class="list-group-item list-group-item-success">Un elemento de grupo de
lista éxito</li>
<li class="list-group-item list-group-item-danger">Un elemento de grupo de
lista peligro</li>
<li class="list-group-item list-group-item-warning">Un elemento de grupo de
lista advertencia</li>
<li class="list-group-item list-group-item-info">Un elemento de grupo de
lista información</li>
<li class="list-group-item list-group-item-light">Un elemento de grupo de
lista light</li>
<li class="list-group-item list-group-item-dark">Un elemento de grupo de
lista oscuro</li>
</ul>
Resultado:
Las clases contextuales también funcionan con .list-group-item-action.
Con insignias
Agregue insignias a cualquier elemento del grupo de la lista para mostrar recuentos no
leídos, actividad y más con la ayuda de algunas utilidades.
Con las clases anteriormente vistas: .badge, .badge-primary, .badge-secondary,

.badge-success, .badge-info, .badge-danger, .badge-light, .badge-dark. A estas
clases se anexa la clase .badge-phill.
<li class="list-group-item d-flex justify-content-between align-items-
center">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-
center">
Dapibus ac facilisis in
<span class="badge badge-secondary badge-pill">2</span>
</li>
</ul>
Obtenemos el siguiente resultado:

Contenido personalizado
Agregue casi cualquier HTML dentro, incluso para grupos de listas vinculadas como el
siguiente, con la ayuda de las utilidades de flexbox.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Encabezado de item de grupo de lista</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus.
Maecenas sed diam eget risus varius blandit.</p>
<small>Donec id elit non mi porta.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Encabezado de item de grupo de lista</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus.
Maecenas sed diam eget risus varius blandit.</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</a>
</div>
Resultado:
Objetos multimedia
Documentación y ejemplos para el objeto multimedia de Bootstrap para construir
componentes altamente repetitivos como comentarios de blog, tweets y similares.
El objeto de medios ayuda a construir componentes complejos y repetitivos donde

algunos medios se colocan junto con contenido que no se ajusta a dichos
medios. Además, hace esto con solo dos clases requeridas gracias a flexbox.
A continuación, se muestra un ejemplo de un único objeto multimedia. Solo se requieren

dos clases: la envoltura .media y el .media-body contenido. El relleno y el margen
opcionales se pueden controlar a través de las utilidades de espaciado. Por
ejemplo:
<div class="media">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Encabezado de media</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
scelerisque ante sollicitudin. Cras purus odio, vestibulum in
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div
Resultado:
Anidamiento
Los objetos multimedia pueden estar anidados infinitamente, aunque le sugerimos que se
detenga en algún momento. Lugar anidado .media dentro .media-body de un objeto
multimedia principal.
<div class="media">
<h5 class="mt-0">Encabezado de la media</h5>
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac.

<div class="media mt-3">
<a class="mr-3" href="#">
</a>
<h5 class="mt-0">Encabezado de la media anidada</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel
metus scelerisque ante sollicitudin. Cras purus odio,
vestibulum in vulputate at, tempus viverra turpis.
</div>
</div>
</div>
</div>
Resultado:
Alineación
Los medios en un objeto de medios se pueden alinear con las utilidades de flexbox en la
parte superior (predeterminado), en el medio o al final de su .media-body. contenido. Tan
solo debe agregarse la clase al elemento <img class=“align-self-*”>
Superior: align-self-start
Medio: align-self-center
Inferior: align-self-end
Orden
Cambie el orden del contenido en los objetos multimedia modificando el propio HTML o
agregando algunos CSS personalizados de flexbox para establecer la order propiedad (a
un entero de su elección). Basta con cambiar el orden del <img> y del <div
class=”media-body”></div> a <div class=”media-body”></div> y luego el <img>.
Nos daría un resultado como el siguiente:
Lista de medios
Debido a que el objeto multimedia tiene muy pocos requisitos estructurales, también
puede usar estas clases en los elementos HTML de la lista. En su <ul> o <ol>,
agregue .list-unstyled para eliminar los estilos de lista predeterminados del navegador
y luego aplique .media a sus <li>. Como siempre, use las utilidades de espaciado donde
sea necesario para ajustar. Por ejemplo:
<ul class="list-unstyled">
<li class="media">
<h5 class="mt-0 mb-1">Lista basada en bjeto media</h5>
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media my-4">
vestibulum in vulputate at, tempus viverra turpis. Fusce
condimentum nunc ac nisi vulputate fringilla. Donec lacinia.
</div>
</li>
<li class="media">
vestibulum in vulputate at, tempus viverra turpis.
Fusce condimentum nunc ac nisi vulputate fringilla.
</div>
</li>
</ul>
Resultado:
Modal
Antes de comenzar con el componente modal de Bootstrap, asegúrese de leer lo siguiente
ya que nuestras opciones de menú han cambiado recientemente.
 Los modos se crean con HTML, CSS y JavaScript. Se colocan sobre todo lo demás
en el documento y eliminan el desplazamiento del <body>para que el contenido
modal se desplace en su lugar.
 Al hacer clic en el "fondo" modal, se cerrará automáticamente el modal.
 Bootstrap solo admite una ventana modal a la vez. Los modales anidados no son
compatibles, ya que creemos que son malas experiencias de usuario.
 Uso de modalidades position: fixed, que a veces puede ser un poco particular
sobre su representación. Siempre que sea posible, coloque su HTML modal en una
posición de nivel superior para evitar posibles interferencias de otros elementos. Es
probable que tenga problemas al anidar un .modal dentro de otro elemento fijo.
 Una vez más, debido a que position: fixed hay algunas advertencias sobre el
uso de modales en dispositivos móviles.
Componentes modales
A continuación, se muestra un ejemplo de modal estática (es decir, su position y display
se han anulado). Se incluyen el encabezado modal, el cuerpo modal (requerido
para padding) y el pie de página modal (opcional).
<div class="modal" tabindex="-1" role="dialog">

<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Titulo del modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
</button>
</div>
<div class="modal-body">
<p>El cuerpo del modal va aquí</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary">Guardar
cambios</button>
</div>
</div>
</div>
</div>
Resultado:
Debido a que los modales de bootstrap hacen uso de los eventos definidos el código
Bootstrap.js, solo pueden ser visualizados en el navegador web, por lo tanto el
comportamiento no puede ser representado en este documento se recomienda acceder al
sitio de Bootstrap: https://getbootstrap.com/docs/4.5/components/modal/ para observar
el comportamiento de los elementos modales.
Navs
Documentación y ejemplos sobre cómo usar los componentes de navegación incluidos de
Bootstrap.
La navegación disponible en Bootstrap comparte marcas y estilos generales, desde

la clase .nav base hasta los estados activo y deshabilitado. El componente .nav
base está construido con flexbox y proporciona una base sólida para construir todo tipo de
componentes de navegación.
Ejemplo simple:
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Activo</a>
</li>
<a class="nav-link" href="#">Enlace</a>
</li>
</li>
<a class="nav-link disabled" href="#" tabindex="-1" aria-
disabled="true">Inhabilitado</a>
</li>
</ul>
Resultado:
Estilos
disponibles
Alineación horizontal
De forma predeterminada, los navegadores están alineados a la izquierda, pero puede

cambiarlos fácilmente al centro o a la derecha.
Centrado en .justify-content-center:
<ul class="nav justify-content-center">...</ul>
Alineado a la derecha con .justify-content-end:
<ul class="nav justify-content-end">...</ul>
Vertical
Apila tu navegación cambiando la dirección del elemento flexible con la utilidad .flex-
column. ¿Necesita apilarlos en algunas ventanas gráficas, pero no en otras? Use las
versiones receptivas (por ejemplo, .flex-sm-column).
<ul class="nav flex-column">

</li>
</li>
</li>
</li>
</ul>
Resultado:
Como siempre, la navegación vertical también es posible sin <ul>.
Pestañas
Toma la navegación básica desde arriba y agrega la clase .nav-tabs para generar una
interfaz con pestañas. Úselos para crear regiones tabulables con complemento JavaScript
de pestañas.
<ul class="nav nav-tabs">

</li>
…
</ul>
Resultado:
Pastillas
Tome ese mismo HTML, pero use en su lugar .nav-pills:
<ul class="nav nav-pills">

<a class="nav-link " href="#">Activo</a>
</li>
<a class="nav-link active" href="#">Enlace</a>
</li>
…
</ul>
Resultado:
Llenar y justificar
Fuerce el contenido .nav para ampliar el ancho completo disponible en una de las dos
clases de modificadores. Para llenar proporcionalmente todo el espacio disponible con
su .nav-item, use .nav-fill. Observe que todo el espacio horizontal está ocupado, pero
no todos los elementos de navegación tienen el mismo ancho.
<ul class="nav nav-pills nav-fill">

</li>
<a class="nav-link" href="#">Enlace largo</a>
</li>
…
</li>
</ul>
Resultado:
Como siempre, la navegación vertical también es posible sin <ul>.
Sobre accesibilidad
Usando menús desplegables
Agregue menús desplegables con un poco de HTML adicional y el complemento de
JavaScript desplegable.
<ul class="nav nav-tabs">

</li>
<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" data-toggle="dropdown"
href="#" role="button" aria-haspopup="true"
aria-expanded="false">Desplegable
</a>
<a class="dropdown-item" href="#">otra acción</a>
</div>
</li>
…
</ul>
Resultado:
Pastillas con menús desplegables

…
</li>
<li class="nav-item dropdown active">

<a class="nav-link dropdown-toggle" data-toggle="dropdown"
href="#" role="button" aria-haspopup="true"
aria-expanded="false">Desplegable
</a>
<a class="dropdown-item" href="#">otra acción</a>
</div>
</li>
…
</ul>
Resultado:
De igual forma se pueden utilizar NAVs verticales de pastilla con contenido lateral,
agregando la clase .flex-column:
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab"
role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab"
data-toggle="pill" href="#v-pills-home">Inicio
</a>
<a class="nav-link" id="v-pills-profile-tab"
data-toggle="pill" href="#v-pills-profile">Perfil
</a>
<a class="nav-link" id="v-pills-messages-tab"
data-toggle="pill" href="#v-pills-messages">Mensajes
</a>
<a class="nav-link" id="v-pills-settings-tab"
data-toggle="pill" href="#v-pills-settings">Ajustes
</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
aria-labelledby="v-pills-home-tab">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. A culpa dolor dolores eius.
</div>
</div>
</div>
Resultado:
Esto es lo que necesita saber antes de comenzar con la barra de navegación:
 Navbars requieren un envoltorio .navbar con .navbar-expand{-sm|-md|-lg|-

xl} para plegar.
 Las barras de navegación y sus contenidos son fluidos por
efecto. Use contenedores opcionales para limitar su ancho horizontal.
 Utilice nuestras clases de utilidad de espaciado y flex para controlar el espaciado y
la alineación dentro de las barras de navegación.
 Las barras de navegación responden de manera predeterminada, pero puede
modificarlas fácilmente para cambiar eso. El comportamiento responsive depende
de nuestro complemento Collapse JavaScript.
 Las barras de navegación están ocultas de forma predeterminada al
imprimir. Oblígalos a imprimir agregándolos .d-print a .navbar. Vea la clase de
utilidad de visualización .
 Asegure la accesibilidad mediante el uso de un elemento <nav> o, si utiliza un
elemento más genérico como un <div>, agregue un role="navigation" a cada
barra de navegación para identificarlo explícitamente como una región histórica
para los usuarios de tecnologías de asistencia.
Contenido soportado
Las barras de navegación vienen con soporte incorporado para un puñado de
subcomponentes. Elija entre los siguientes según sea necesario:
 .navbar-brand para nombre del proyecto.

 .navbar-nav para una navegación ligera y de altura completa (incluido soporte
para menús desplegables).
 .navbar-toggler para usar el complemento de colapso y otros comportamientos
de alternancia de navegación .
 .form-inline para cualquier forma de controles y acciones.
 .navbar-text para agregar cadenas de texto centradas verticalmente.
 .collapse.navbar-collapse para agrupar y ocultar el contenido de la barra de
navegación por un punto de corte principal.
Aquí hay un ejemplo de todos los subcomponentes incluidos en una barra de navegación
responsiva tema light que se colapsa automáticamente en el lg punto de interrupción
(grande).
<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Inicio<span class="sr-
only">(current)</span></a>
</li>
</li>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Desplegable
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Accion</a>
</div>
</li>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search"
placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Buscar</button>
</form>
</div>
</nav>
Resultado:
Elemento Brand
.navbar-brand se puede aplicar a la mayoría de los elementos, pero un ancla funciona
mejor ya que algunos elementos pueden requerir clases de utilidad o estilos
personalizados.
<nav class="navbar navbar-light bg-light">
… <!—Aquí se puede incluir un elemento personalizao -->
</nav>
…

…
Resultado:.
…<span class="navbar-brand mb-0 h1">Navbar</span>…
Resultado:
Agregar imágenes a la lista .navbar-brand probablemente siempre requiera estilos

personalizados o utilidades para un tamaño adecuado. Aquí hay algunos ejemplos para
demostrar.

<a class="navbar-brand" href="#">
<img src="…" width="30" height="30" class="d-inline-block align-top"
alt="" loading="lazy">
Bootstrap
</a>
</nav>
Resultado:
Nav
Los enlaces de navegación de la barra de navegación se basan en las opciones .nav con
su propia clase de modificador y requieren el uso de clases de alternador para un estilo
responsive adecuado. La navegación en las barras de navegación también crecerá
hasta ocupar la mayor cantidad de espacio horizontal posible para mantener los
contenidos de la barra de navegación alineados de forma segura.
Estados activos .active —con— para indicar que la página actual se puede aplicar
directamente a .nav-link o a sus padres inmediatos .nav-item. Por ejemplo:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Inicio <span class="sr-
only">(current)</span></a>
</li>
…
</ul>
</div>
</nav>
Resultado:
Formas
Coloque varios controles de formulario y componentes dentro de una barra de navegación

con .form-inline. Por ejemplo:
<input class="form-control mr-sm-2" type="search" placeholder="Buscar" aria-
label="Buscar">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Buscar</button>
</form>
Resultado:
Grupos de entrada

<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Usuario" aria-
label="Username" aria-describedby="basic-addon1">
</div>
</form>
</nav>
Resultado:
Botones

<button class="btn btn-outline-success" type="button">Bontón</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Botón
pequeño</button>
</form>
</nav>
Resultado:
Texto
Las barras de navegación pueden contener fragmentos de texto con la ayuda de .navbar-
text. Esta clase ajusta la alineación vertical y el espaciado horizontal para las cadenas de
texto.

<span class="navbar-text">
Este es un ejemplo de texto en un Navbar
</span>
</nav>
Resultado:
Esquemas de color
Crear una barra de navegación nunca ha sido tan fácil gracias a la combinación de clases
y utilidades temáticas background-color. Elija entre .navbar-light usar con colores de
fondo claros o .navbar-dark colores de fondo oscuros. Luego, personalice con
utilidades .bg-*.
<nav class="navbar navbar-dark bg-dark">


</nav>
Resultado:
Ejemplo con navbar-dark:
<nav class="navbar navbar-dark bg-primary">


</nav>
Ejemplo con color personalizado:
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">


</nav>
Contenedores
Aunque no es obligatorio, puede ajustar una barra de navegación .container para
centrarla en una página o agregar una para centrar solo el contenido de una barra de
navegación superior fija o estática.
</nav>
</div>
Resultado en el navegador:
Cuando el contenedor está dentro de su barra de navegación, su relleno horizontal se

elimina en puntos de interrupción inferiores a la clase especificada .navbar-expand{-sm|-
md|-lg|-xl}. Esto garantiza que no se duplicará el relleno innecesariamente en ventanas
gráficas inferiores cuando su barra de navegación esté colapsada.
Colocación:
Se pueden utilizar las siguientes clases para mantener la barra de la navegación siempre
visible en pantalla:
Parte superior fija: .fixed-top

Parte inferior fija: .fixed-bottom
Contenido externo
A veces, desea utilizar el complemento contraer para activar contenido oculto en otra
parte de la página. Debido a que nuestro complemento funciona en el id y la data-
target.
<div class="fixed-top">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Contenido colapsado</h5>
<span class="text-muted">Alternable a través de la
marca navbar.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarToggleExternalContent"
aria-controls="navbarToggleExternalContent" aria-
expanded="false"
aria-label="Toggle navigation">
</button>
</nav>
</div>
Paginación
Usamos un gran bloque de enlaces conectados para nuestra paginación, lo que hace que
los enlaces sean difíciles de perder y fácilmente escalables, todo al tiempo que
proporciona grandes áreas de impacto. La paginación se crea con elementos HTML de lista
para que los lectores de pantalla puedan anunciar la cantidad de enlaces disponibles. Use
un elemento <nav> de ajuste para identificarlo como una sección de navegación para
examinar lectores y otras tecnologías de asistencia.
Ejemplo básico de paginación con Bootstrap:
<nav aria-label="Page navigation example">

<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Anterior</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">Siguiente</a></li>
</ul>
</nav>
Resultado:
Trabajando con iconos
¿Desea utilizar un icono o símbolo en lugar de texto para algunos enlaces de
paginación? Asegúrese de proporcionar soporte de lector de pantalla adecuado con aria
atributos.

<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
…
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Estados desactivados y activos

Use .disabled para enlaces que no se pueden hacer clic y .active para indicar la página
actual.
<nav aria-label="...">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-
disabled="true">Anterior</a>
</li>
…
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">2 </a>
</li>
…
</ul>
</nav>
Dimensionamiento
¿Te apetece una paginación más grande o más pequeña? Agregar .pagination-lg
o .pagination-sm para tamaños adicionales.
Paginación con la clase: pagination-lg
<ul class="pagination pagination-lg">
…
</ul>
</nav>
Paginación con la clase: .pagination-sm
<ul class="pagination pagination-sm">
…
</ul>
</nav>
Alineación
Cambie la alineación de los componentes de paginación con las utilidades de flexbox.
Paginación alineada en el centro:

<ul class="pagination justify-content-center">
…
</ul>
</nav>
Paginación alineada en la derecha:

<ul class="pagination justify-content-end">
…
</ul>
</nav>
Popovers
Documentación y ejemplos para agregar elementos emergentes de Bootstrap.
Visión general
Cosas que debe saber al usar el complemento popover:
 Popovers confía en la biblioteca de terceros Popper.js para el

posicionamiento. ¡Debe incluir popper.min.js antes de bootstrap.js o
usar bootstrap.bundle.min.js/ bootstrap.bundle.js que contiene Popper.js
 Las ventanas emergentes requieren el complemento de información sobre
herramientas como una dependencia.
 Si está construyendo nuestro JavaScript desde la fuente, lo requiereutil.js .
 Las ventanas emergentes son opcionales por razones de rendimiento, por lo que
debe inicializarlas usted mismo.
 La longitud cero title y los content valores nunca mostrarán un popover.
 Especifique container: 'body' para evitar problemas de representación en
componentes más complejos (como los grupos de entrada, grupos de botones,
etc.).
 La activación de elementos emergentes en elementos ocultos no funcionará.
 Los elementos emergentes para .disabled o disabled elementos
deben activarse en un elemento contenedor.
 Cuando se activa desde anclas que se envuelven en varias líneas, los popovers se
centrarán entre el ancho total de las anclas. Úselo .text-nowrap en su <a> para
evitar este comportamiento.
 Los popovers deben ocultarse antes de que sus elementos correspondientes se
hayan eliminado del DOM.
 Los popovers se pueden activar gracias a un elemento dentro de un DOM de
sombra.
Por ejemplo:
Agregar el siguiente condigo Bootstrap:
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
El código HTML es el siguiente:
<button type="button" class="btn btn-secondary" data-container="body" data-

toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel
augue laoreet rutrum faucibus.">
Popover hacia arriba
</button>

toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel
Popover hacia la derecha
</button>

toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover hacia abajo
</button>

toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel
Popover hacia la izquierda
</button>
Resultado:
Scrollspy
Actualice automáticamente la navegación Bootstrap o los componentes del grupo de listas
según la position de desplazamiento para indicar qué enlace está actualmente activo en la
ventana gráfica.
Cómo funciona
Scrollspy tiene algunos requisitos para funcionar correctamente:
 Si está construyendo con JavaScript de Bootstrap desde la fuente, requiere util.js.

 Debe usarse en un componente de navegación Bootstrap o en un grupo de listas.
 Scrollspy requiere position: relative; el elemento que estás espiando,
generalmente el <body>.
 Cuando espíe elementos que no sean el <body>, asegúrese de tener un height
conjunto y overflow-y: scroll; aplicado.
 Los anclajes (<a>) son obligatorios y deben apuntar a un elemento con eso id.
Cuando se implementa con éxito, su grupo de navegación o lista se actualizará en

consecuencia, moviendo la .active clase de un elemento al siguiente en función de sus
objetivos asociados.
Un ejemplo básico del scrollspy es el siguiente:
Importante: es necesario agregar código css como se indica al inicio del apartado para que
el contenido se adapte a nuestras necesidades.
<nav id="navbar-example2" class="navbar navbar-light bg-light">

<a class="nav-link" href="#fat">@fat</a>
</li>
<a class="nav-link" href="#mdo">@mdo</a>
</li>
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
role="button" aria-haspopup="true" aria-expanded="false">Desplegable</a>
<a class="dropdown-item" href="#one">Uno</a>
<a class="dropdown-item" href="#two">Dos</a>
<a class="dropdown-item" href="#three">Tres</a>
</div>
</li>
</ul>
</nav>

<div data-spy="scroll" data-target="#navbar-example2" data-offset="0"
id="contenido">
<div id="section1">
<h4 id="fat">@fat</h4>
<p>…</p>
</div>
<div id="section2">
<h4 id="mdo">@mdo</h4>
<p>…p>
</div>
<div id="section3">
<h4 id="one">one</h4>
<p>…p>
</div>
<div id="section4">
<h4 id="two">two</h4>
<p>…p>
</div>
<div id="section5">
<h4 id="three">three</h4>
<p>…</p>
</div>
</div>
Codigo css agregado:
#contenido {
position: relative;
overflow-y: scroll;
height: 300px;
}
#section1 {padding-top:50px;height:300px;color: #fff; background-color:
#1E88E5;}
#673ab7;}
#ff9800;}
#00bcd4;}
#009688;}
Resultado:
Navegación anidada
Scrollspy también funciona con .nav anidados . Si un anidado .nav es .active, sus
padres también lo estarán .active.

…
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0"
id="contenido">
<div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
<h4 id="item-1">Item 1</h4>
<p>...</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Item 1-2</h5>
<p>...</p>
<p>...</p>
<p>...</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>...</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>...</p>
</div>
</div>
Resultado:
list-group
Scrollspy también funciona con .list-group.

…
</nav>
<div data-spy="scroll" data-target="#list-example" data-offset="0"
class="scrollspy-example">
<h4 id="list-item-1">Item 1</h4>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
Resultado:
Hiladores
Indique el estado de carga de un componente o página con hiladores Bootstrap, creados
completamente con HTML, CSS y sin JavaScript.
Los "holadores" de Bootstrap se pueden usar para mostrar el estado de carga en sus
proyectos. Están construidos solo con HTML y CSS, lo que significa que no necesita ningún
JavaScript para crearlos. Sin embargo, necesitará algunos JavaScript personalizados para
alternar su visibilidad. Su apariencia, alineación y tamaño se pueden personalizar
fácilmente con nuestras increíbles clases de utilidad.
Para fines de accesibilidad, cada cargador aquí incluye role="status" un

anidado <span class="sr-only"> Loading...</span> .
Por ejemplo:
<div class="spinner-border" role="status">

<span class="sr-only">Loading...</span>
</div>
Resultado:
Colores
El spinner de borde usa currentColor para su border-color, lo que significa que puede
personalizar el color con las utilidades de color de texto. Puede utilizar cualquiera de
nuestras utilidades de color de texto en la ruleta estándar.
A partir de la base siguiente se puede obtener hiladores de colores
<div class="spinner-border text-{*color} " role="status">

</div>
Donde {*color} puede ser cualquier clase de las siguientes que prove Bootstrap:
text-primary text-warning
text-secondary text-info
text-success text-light
text-danger text-dark
Resultado:
Spinner
creciente
<div class="spinner-grow" role="status">
</div>
Resultado en sus facetas:

Agregando cualquiera de las clases de utilidades de color descritas en la sección anterior
se puede obtener los siguientes resultados:
Alineación
Los hilanderos en Bootstrap están construidos con rem currentColor, y display:
inline-flex. Esto significa que pueden redimensionarse, cambiarse de color y alinearse
fácilmente.
Margen
Use utilidades de margen como .m-5 para un espaciado fácil.
<div class="spinner-border m-5" role="status">

</div>
Colocación
Use las utilidades de flexbox, las utilidades de flotación o las utilidades de alineación de
texto para colocar los hilanderos exactamente donde los necesita en cualquier situación.
Flexionar
Alineación en el centro
<div class="d-flex justify-content-center">
</div>
</div>
Alineación a la derecha:
<div class="d-flex align-items-center">

<strong>Loading...</strong>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
Texto alineado
<div class="text-center">
</div>
</div>
Carrozas
<div class="clearfix">
<div class="spinner-border float-right" role="status">
</div>
</div>
Tamaño
<div class="spinner-border spinner-border-sm" role="status">
</div>
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">

</div>
Botones
Use los controles giratorios dentro de los botones para indicar que una acción se está
procesando o está teniendo lugar actualmente. También puede intercambiar el texto del
elemento giratorio y utilizar el texto del botón según sea necesario.
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-
hidden="true"></span>
<span class="sr-only">Cargando...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-
hidden="true"></span>
Cargando...
</button>
Toasts (Tostadas)
Las tostadas son notificaciones ligeras diseñadas para imitar las notificaciones push que se
han popularizado en los sistemas operativos móviles y de escritorio. Están construidos con
flexbox, por lo que son fáciles de alinear y colocar.
Cosas que debe saber al usar el complemento de tostadas:
 Si está construyendo nuestro JavaScript desde la fuente, lo requiereutil.js .

 Las tostadas son opcionales por razones de rendimiento, por lo que debe
inicializarlas usted mismo.
 Tenga en cuenta que usted es responsable de colocar las tostadas.
 Las tostadas se ocultarán automáticamente si no lo especifica autohide: false.
Ejemplo Basico: Para fomentar tostadas extensibles y predecibles, recomendamos un

encabezado y un cuerpo. El uso de encabezados Toast display: flexb permite una fácil
alineación del contenido gracias a las utilidades de margen y flexbox.
Las tostadas son tan flexibles como sea necesario y tienen muy poco marcado
necesario. Como mínimo, requerimos un solo elemento que contenga su contenido
"tostado" y recomendamos encarecidamente un botón para descartar.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">

<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>hace 11 minutos</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-
label="Close">
</button>
</div>
<div class="toast-body">
Hola mundi! este es un mensaje de tostada
</div>
</div>
Translúcido
Las tostadas también son ligeramente translúcidas, por lo que se mezclan sobre lo que sea
que aparezcan. Para los navegadores que admiten la backdrop-filter propiedad CSS,
también intentaremos desenfocar los elementos bajo un brindis.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">

<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">hace 11 minutos</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-
label="Close">
</button>
</div>
<div class="toast-body">
Hola mundi! este es un mensaje de tostada
</div>
</div>
Información sobre herramientas
Documentación y ejemplos para agregar información sobre herramientas Bootstrap
personalizada con CSS y JavaScript usando CSS3 para animaciones y atributos de datos
para el almacenamiento local de títulos.
Cosas que debe saber al usar el complemento de información sobre herramientas:
 La información sobre herramientas se basa en la biblioteca de

terceros Popper.js para el posicionamiento. ¡Debe incluir popper.min.js antes de
bootstrap.js o usar bootstrap.bundle.min.js/ bootstrap.bundle.js que
contiene Popper.js para que la información sobre herramientas funcione!
 Si está construyendo JavaScript de Bootstrap desde la fuente, lo requiereutil.js.
 La información sobre herramientas es opcional por razones de rendimiento, por
lo que debe inicializarlas usted mismo.
 La información sobre herramientas con títulos de longitud cero nunca se muestra.
 Especifique container: 'body' para evitar problemas de representación en
componentes más complejos (como nuestros grupos de entrada, grupos de
botones, etc.).
 La información sobre herramientas activada en elementos ocultos no funcionará.
 La información sobre herramientas para .disabled o disabled elementos debe
activarse en un elemento contenedor.
 Cuando se activa desde hipervínculos que abarcan varias líneas, la información
sobre herramientas se centrará. Úselo white-space: nowrap; en su <a> para
evitar este comportamiento.
 La información sobre herramientas debe estar oculta antes de que sus elementos
correspondientes se hayan eliminado del DOM.
 La información sobre herramientas se puede activar gracias a un elemento dentro
de un DOM de sombra.
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-

placement="top" title="Tooltip on top">
Information sobre la herramienta en la parte superior
</button>
placement="right" title="Tooltip on right">
Information sobre la herramienta a la derecha
</button>
placement="bottom" title="Tooltip on bottom">
Information sobre la herramienta en la parte inferior
placement="left" title="Tooltip on left">
Information sobre la herramienta a la izquierda
</button>
html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip con HTML
</button>
Resultado:
Puedes profundizar sobre la los Tooltip de Bootstrap a través del enlace siguiente:
Tooltip de Bootstrap : https://getbootstrap.com/docs/4.5/components/tooltips/

Bootstrap 4

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Bootstrap 4

Загружено:

Авторское право:

Доступные форматы

BOOTSTRAP 4

1. Descargar el código CSS y JavaScript compilado en este se incluyen: el paquete CSS

# instala la versión Sass de Bootstrap

Utilize el CDN de Bootstrap

Contenidos del código fuente de Bootstrap

La Primera plantilla con Bootstrap

Navegadores en dispositivos móviles

Solo Android 5.0 o

Si necesitas un buen soporte de IE 8 y 9, usa Bootstrap 3 en vez de la versión 4. Aunque la

Modalidades y menús desplegables en dispositivos

iOS campos de texto y desplazamiento

El .dropdown-backdrop elemento no se usa en iOS en la navegación debido a la

Zoom del navegado

Si bien :hover no es posible en la mayoría de los dispositivos táctiles, iOS emula este

Navegador de acciones de Android

En los <select> elementos, el navegador de acciones de Android no mostrará los

Estas advertencias de validación no importan en la práctica, ya que la parte no hacky de

Para los elementos ocultos de tipo "Ir directamente al contenido", puedes combinar

Bootstrap viene con tres contenedores diferentes:

 .container, que establece un max-width en cada punto de interrupción sensible

La siguiente tabla ilustra cómo se compara cada contenedor con el original .container

Extra pequeño Pequeño Mediano Grande Extra grande

.container clase predeterminada es un contenedor receptivo de ancho fijo, lo que

 Utilidades de visualización de impresión disponibles ampliadas para que coincidan

 Se corrigió la representación de vista previa de impresión en los navegadores con

Soporte del navegador

 Se movieron todas las .text-utilidades al archivo _utilities.scss.

 El elemento movido se restablece al archivo _reboot.scss.

 Componente reescrito con flexbox.

 Cambió de selectores primarios a clases singulares para todos los componentes,

 Se ha añadido 576px un nuevo punto de interrupción de rejilla como sm, lo que

 Componente reescrito con flexbox.

 Componente reescrito con flexbox.

 Componente reescrito con flexbox.

 Los comportamientos receptivos de la barra de navegación ahora se aplican a

 Componente reescrito con flexbox.

 Ahora se requiere una clase explícita .breadcrumb-item, en los descendientes

 Consolidado .label y .badge desambiguación del elemento <label> y

Paneles, miniaturas y pozos

 .panel a .card, ahora construido con flexbox.

 Se reemplazaron las .progress-bar-* clases contextuales con .bg-*

 Se revisó todo el componente para simplificar el diseño y el estilo. Tenemos menos

 Pantalla, oculta y más:

Mixins de prefijo de proveedor

Eliminados los siguientes mixins : animation, animation-delay, animation-

 Todavía estamos usando Jekyll, pero tenemos complementos en la mezcla:

Nuestras clases de utilidad receptiva se han eliminado en gran medida a favor de

 Las clases .hiddeny .showse han eliminado porque entraban en conflicto con

En lugar de utilizar clases explícitas .visible-*, hace que un elemento sea visible

Tenga en cuenta que los cambios en los puntos de interrupción de la cuadrícula en

En las siguientes imágenes se ejemplifica el resultado obtenido para un mismo ancho al

A continuación, se detalla el funcionamiento de este sistema:

 Las columnas (.col) irán agrupadas dentro de filas ( .row ).

En la siguiente tabla se muestra un resumen del sistema de rejilla de Bootstrap, su

Extra Pequeñ Median Grande Extra

A continuación, veremos diferentes formas de indicar el número de columnas que

Columnas de ancho especifico

Selección de tamaño de las columnas solo para pantallas

En el siguiente ejemplo se han creado 3 filas, la primera dividida en 2 columnas de tamaño

Selección de dos tamaños de columna: pequeño y mediano

<!-- En pantallas medianas se indica que cada columna ocupe la mitad

<!-- Como no se indica el tamaño para pantallas grandes las columnas