Tutorial Bootstrap 4

Tutorial
Bootstrap 4
-1-
Índice
Bootstrap 4 Tutorial...................................................................................................................................7
Pruébelo usted mismo Ejemplos...........................................................................................................7
Bootstrap 3 vs. Bootstrap 4.................................................................................................................10
¿Sabías?...............................................................................................................................................10
Bootstrap 4 Comenzar..............................................................................................................................11
¿Qué es Bootstrap?..............................................................................................................................11
Bootstrap 3 vs. Bootstrap 4.................................................................................................................11
¿Por qué usar Bootstrap 4?..................................................................................................................11
Dónde obtener Bootstrap 4?................................................................................................................12
Bootstrap 4 CDN.................................................................................................................................12
Descargando Bootstrap 4.....................................................................................................................13
Cree la primera página web con Bootstrap 4......................................................................................13
Dos páginas básicas de Bootstrap 4....................................................................................................14
Bootstrap 4 Grids.....................................................................................................................................17
Sistema Bootstrap 4 Grid....................................................................................................................17
Clases de cuadrícula............................................................................................................................17
Estructura básica de una cuadrícula Bootstrap 4.................................................................................18
Tres columnas iguales.........................................................................................................................19
Columnas receptivas............................................................................................................................20
Dos columnas desiguales que responden............................................................................................22
Bootstrap 4 Texto / Tipografía.................................................................................................................24
Configuración predeterminada de Bootstrap 4....................................................................................24
<h1> - <h6>.........................................................................................................................................24
h1 Bootstrap heading (2.5rem = 40px)....................................................................................................24
h2 Bootstrap heading (2rem = 32px)...................................................................................................24
Mostrar encabezados...........................................................................................................................25
<small>................................................................................................................................................25
h1 heading secondary text........................................................................................................................26
h2 heading secondary text...................................................................................................................26
<mark>................................................................................................................................................26
<abbr>.................................................................................................................................................26
<blockquote>.......................................................................................................................................27
<dl>.....................................................................................................................................................29
<code>.................................................................................................................................................29
<kbd>..................................................................................................................................................30
<pre>...................................................................................................................................................30
Más clases de tipografía......................................................................................................................30
Bootstrap 4 colores...................................................................................................................................32
Colores de texto...................................................................................................................................32
Colores de fondo.................................................................................................................................33
Bootstrap 4 tablas.....................................................................................................................................34
Bootstrap 4 Tabla básica......................................................................................................................34
Filas rayadas........................................................................................................................................34
Tabla con bordes..................................................................................................................................35
Hover Filas..........................................................................................................................................35
-2-
Tabla negra / oscura.............................................................................................................................35
Tabla de rayas oscuras.........................................................................................................................36
Tabla Oscura Hoverable......................................................................................................................36
Clases contextuales..............................................................................................................................37
Colores de cabezal de tabla.................................................................................................................38
Table pequeña......................................................................................................................................38
Tablas responsiva.................................................................................................................................40
Bootstrap 4 Imágenes...............................................................................................................................42
Bootstrap 4 Formas de imagen............................................................................................................42
Esquinas redondeadas..........................................................................................................................42
Circulo.................................................................................................................................................42
Miniatura.............................................................................................................................................43
Alineación de imágenes.......................................................................................................................43
Imágenes responsivas..........................................................................................................................44
Bootstrap 4 Jumbotron.............................................................................................................................45
Bootstrap 4 Jumbotron........................................................................................................................45
Jumbotron de ancho completo.............................................................................................................45
Bootstrap 4 Alerts....................................................................................................................................47
Bootstrap 4 Alerts................................................................................................................................47
Enlaces de alerta..................................................................................................................................48
Alertas de cierre...................................................................................................................................49
Alertas animadas.................................................................................................................................49
Bootstrap 4 botones..................................................................................................................................50
Estilos de botones................................................................................................................................50
Contorno del botón..............................................................................................................................51
Tamaños de botones............................................................................................................................51
Botones de nivel de bloque.................................................................................................................52
Botones activos / desactivados............................................................................................................52
Grupos de botones...............................................................................................................................53
Grupos de botones verticales...............................................................................................................54
Grupos de botones de anidamiento y menús desplegables..................................................................54
Desplegable de botones divididos.......................................................................................................55
Grupo de botones vertical c / Dropdown.............................................................................................56
Insignias contextuales.........................................................................................................................58
Insignias de píldoras............................................................................................................................58
Insignia dentro de un Elemento...........................................................................................................59
Barra de progreso básico.....................................................................................................................60
Altura de la barra de progreso.............................................................................................................61
Etiquetas de barra de progreso............................................................................................................61
Barras de progreso coloreadas.............................................................................................................62
Barras de progreso a rayas...................................................................................................................63
Barra de progreso animado..................................................................................................................64
Varias barras de progreso....................................................................................................................64
Paginación básica................................................................................................................................66
Estado activo.......................................................................................................................................66
Estado deshabilitado............................................................................................................................67
Tamaño de paginación.........................................................................................................................67
Migas de pan.......................................................................................................................................68
-3-
Grupos de lista básicos........................................................................................................................70
Estado activo.......................................................................................................................................70
Artículo desactivado............................................................................................................................71
Lista de grupos con elementos vinculados..........................................................................................72
Clases contextuales..............................................................................................................................72
Vincular elementos con clases contextuales........................................................................................74
Tarjetas................................................................................................................................................75
Tarjeta básica.......................................................................................................................................84
Encabezado y pié de página................................................................................................................85
Tarjetas contextuales...........................................................................................................................86
Títulos, texto y enlaces........................................................................................................................87
Imágenes de la tarjeta..........................................................................................................................88
Superposiciones de imagen de tarjeta.................................................................................................89
Bootstrap 4 desplegables..........................................................................................................................90
Menú desplegable básico.....................................................................................................................90
Desplegable con divisor......................................................................................................................91
Desplegable con encabezados.............................................................................................................93
Elementos activos e inactivos..............................................................................................................93
Posición del desplegable.....................................................................................................................94
Desplegable hacia arriba.....................................................................................................................95
Desplegable de botones divididos.......................................................................................................95
Bootstrap 4 Collapse................................................................................................................................97
Básico plegable....................................................................................................................................97
Acordeón.............................................................................................................................................98
Bootstrap 4 Navs....................................................................................................................................100
Menús Nav........................................................................................................................................100
Nav alineado......................................................................................................................................100
Navegación vertical...........................................................................................................................102
Pestañas.............................................................................................................................................103
Pastillas..............................................................................................................................................104
Fichas justificadas / pastillas.............................................................................................................105
Pastillas con menú desplegable.........................................................................................................106
Pestañas con menú desplegable.........................................................................................................106
Pestañas Toggleable / Dynamic.........................................................................................................107
Píldoras intercambiables / dinámicas................................................................................................108
Barra de navegación Bootstrap 4...........................................................................................................110
Barras de navegación.........................................................................................................................110
Navbar básico....................................................................................................................................110
Barra de navegación vertical.............................................................................................................111
Navbar de color.................................................................................................................................112
Logotipo............................................................................................................................................113
Contraer la barra de navegación........................................................................................................114
Navbar con menú desplegable...........................................................................................................115
Navbar formularios y botones...........................................................................................................116
Texto de la barra de navegación........................................................................................................117
Barra de navegación fija....................................................................................................................118
Configuración predeterminada de Bootstrap 4..................................................................................123
Bootstrap 4 Diseños de formularios..................................................................................................123
-4-
Bootstrap 4 formulario apilado..........................................................................................................123
Bootstrap Inline Form.......................................................................................................................124
Bootstrap 4 Entradas de Formularios.....................................................................................................126
Controles de formularios compatibles...............................................................................................126
Entrada Bootstrap..............................................................................................................................126
Bootstrap Textarea.............................................................................................................................127
Casillas de verificación Bootstrap.....................................................................................................127
Botones de radio Bootstrap...............................................................................................................129
Lista de selección Bootstrap..............................................................................................................130
Bootstrap 4 Carrusel...............................................................................................................................131
Bootstrap 4 Carrusel..........................................................................................................................131
Cómo crear un carrusel......................................................................................................................131
Agregar leyendas a las diapositivas...................................................................................................132
Bootstrap 4 Modal..................................................................................................................................134
Bootstrap 4 Modal.............................................................................................................................134
Cómo crear un modal........................................................................................................................134
Tamaño modal...................................................................................................................................135
Modal centrado..................................................................................................................................136
Bootstrap 4 Tooltip.................................................................................................................................137
Bootstrap 4 Tooltip............................................................................................................................137
Cómo crear una información sobre herramientas..............................................................................137
Información sobre herramientas de posicionamiento........................................................................138
Bootstrap 4 Popover...............................................................................................................................139
Bootstrap 4 Popover..........................................................................................................................139
Cómo crear un Popover.....................................................................................................................139
Popovers de posicionamiento............................................................................................................140
Cierre de Popovers............................................................................................................................140
Bootstrap 4 Scrollspy (Avanzado).........................................................................................................142
Bootstrap 4 Scrollspy........................................................................................................................142
Cómo crear un Scrollspy...................................................................................................................143
Menú vertical Scrollspy.....................................................................................................................144
Bootstrap 4 Utilities...............................................................................................................................146
Bootstrap 4 Utilities...........................................................................................................................146
Bordes................................................................................................................................................146
Color del borde..................................................................................................................................146
Radio de la borde...............................................................................................................................147
Flotantes............................................................................................................................................149
Flotadores responsivos......................................................................................................................150
Alinear al centro................................................................................................................................150
Anchura.............................................................................................................................................151
Altura.................................................................................................................................................151
Espaciado...........................................................................................................................................152
Alineación vertical............................................................................................................................154
Posición.............................................................................................................................................155
Sistema Bootstrap 4 Grid.......................................................................................................................158
Sistema Bootstrap 4 Grid..................................................................................................................158
Clases de cuadrícula..........................................................................................................................158
Reglas del sistema de cuadrícula.......................................................................................................159
-5-
Estructura básica de una cuadrícula Bootstrap 4...............................................................................160
Opciones de cuadrícula.....................................................................................................................161
Ejemplos............................................................................................................................................161
Red Bootstrap 4 apilada a horizontal.....................................................................................................162
Bootstrap 4 Grid Ejemplo: apilado a horizontal................................................................................162
Columnas de diseño automático........................................................................................................163
Bootstrap 4 Grid Extra Small.................................................................................................................166
Ejemplo de cuadrícula extra pequeña................................................................................................166
Bootstrap 4 Grid Small..........................................................................................................................169
Ejemplo de pequeña rejilla................................................................................................................169
Supongamos que tenemos un diseño simple con dos columnas. Queremos que las columnas se
dividan en un 25% / 75% para dispositivos pequeños......................................................................169
Bootstrap 4 Grid Medium......................................................................................................................173
Ejemplo de media cuadrícula............................................................................................................173
En el capítulo anterior, presentamos un ejemplo de cuadrícula con clases para dispositivos
pequeños. Usamos dos divs (columnas) y les dimos una división de 25% / 75%:...........................173
Usando solo medio............................................................................................................................174
Bootstrap 4 Grid - Large........................................................................................................................176
Ejemplo de Gran Grilla.....................................................................................................................176
En el capítulo anterior, presentamos un ejemplo de cuadrícula con clases para dispositivos pequeños
y medianos. Usamos dos divs (columnas) y les dimos una división del 25% / 75% en dispositivos
pequeños, y una división del 50% / 50% en dispositivos medianos:................................................176
Usando solo grande...........................................................................................................................177
Bootstrap 4 Grid - Extra Large...............................................................................................................179
Ejemplo de cuadrícula grande...........................................................................................................179
En el capítulo anterior, presentamos un ejemplo de cuadrícula con clases para dispositivos pequeños
y medianos. Usamos dos divs (columnas) y les dimos una división de 25% / 75% en dispositivos
pequeños, y una división de 50% / 50% en dispositivos medianos y una división de 33% / 66% en
dispositivos grandes:.........................................................................................................................179
Usando Only XLarge.........................................................................................................................180
Ejemplos de Bootstrap 4 Grid................................................................................................................182
Tres columnas iguales.......................................................................................................................182
Tres columnas iguales que usan números.........................................................................................182
Tres columnas desiguales..................................................................................................................183
Establecer el ancho de una columna..................................................................................................183
Más columnas iguales.......................................................................................................................184
Más columnas desiguales..................................................................................................................185
Altura igual........................................................................................................................................186
Columnas anidadas............................................................................................................................187
Clases receptivas...............................................................................................................................187
Apilado a horizontal..........................................................................................................................188
Mezclar y combinar...........................................................................................................................189
-6-
Bootstrap 4 Tutorial
Bootstrap 4 es la versión más nueva de Bootstrap, que es el marco de HTML, CSS y
JavaScript más popular para desarrollar sitios web responsivos y con prioridad para
dispositivos móviles.
¡Bootstrap 4 se puede descargar y usar completamente gratis!
Pruébelo usted mismo Ejemplos

Este tutorial de Bootstrap 4 contiene cientos de ejemplos de Bootstrap 4.
Con nuestro editor en línea, puede editar el código y hacer clic en un botón para ver el resultado.
-7-
Ejemplo de Bootstrap 4
< div class="jumbotron text-center">

<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor..</p>
<p>Ut enim ad..</p>
</div>
<h3>Column 2</h3>
<p>Ut enim ad..</p>
</div>
<h3>Column 3</h3>
<p>Ut enim ad..</p>
</div>
</div>
</div>
-8-
Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 es la versión más nueva de Bootstrap; con nuevos componentes, hoja de estilo más
rápida y más receptividad.
Bootstrap 4 admite las versiones más recientes y estables de todos los principales navegadores y
plataformas. Sin embargo, Internet Explorer 9 y versiones anteriores no son compatibles.
Si necesita la compatibilidad con IE8-9, use Bootstrap 3. Es la versión más estable

de Bootstrap, y todavía es compatible con el equipo para las correcciones de errores críticas y
los cambios de documentación. Sin embargo, no se agregarán nuevas características.
¿Sabías?
W3.CSS es una alternativa a Bootstrap.
W3.CSS es más pequeño, más rápido y más fácil de usar.
Si desea aprender W3.CSS, vaya a nuestro Tutorial W3.CSS .
-9-
Bootstrap 4 Comenzar
¿Qué es Bootstrap?
•Bootstrap es un framework de front-end gratuito para un desarrollo web más rápido y fácil
•Bootstrap incluye plantillas de diseño basadas en HTML y CSS para tipografías,

formularios, botones, tablas, navegación, modales, carruseles de imágenes y muchos
otros, así como complementos de JavaScript opcionales
•Bootstrap también le brinda la capacidad de crear fácilmente diseños responsivos
¿Qué es el diseño web responsive?
El diseño web responsivo se trata de crear sitios web que se ajustan automáticamente para
verse bien en todos los dispositivos, desde teléfonos pequeños hasta grandes escritorios.
Bootstrap 3 vs. Bootstrap 4

Bootstrap 4 es la versión más nueva de Bootstrap; con nuevos componentes, hoja de estilo más
rápida y más receptividad.
Bootstrap 4 admite las versiones más recientes y estables de todos los principales navegadores y
plataformas. Sin embargo, Internet Explorer 9 y versiones anteriores no son compatibles.
Si necesita la compatibilidad con IE8-9, use Bootstrap 3. Es la versión más estable de

Bootstrap, y todavía es compatible con el equipo para las correcciones de errores críticas y los
cambios de documentación. Sin embargo, no se agregarán nuevas características.
¿Por qué usar Bootstrap 4?

Ventajas de Bootstrap 4:
•Fácil de usar: cualquiera con conocimientos básicos de HTML y CSS puede comenzar a
usar Bootstrap 4
•Funciones de respuesta: el CSS responsivo de Bootstrap se ajusta a teléfonos, tabletas

y computadoras de escritorio
- 10 -
•Enfoque móvil primero: en Bootstrap 4, los estilos primero para dispositivos móviles
son parte del marco central
•Compatibilidad con el navegador: Bootstrap 4 es compatible con todos los

navegadores modernos (Chrome, Firefox, Internet Explorer 10+, Safari y Opera)
Dónde obtener Bootstrap 4?

Hay dos formas de comenzar a utilizar Bootstrap 4 en su propio sitio web.
Usted puede:
•Incluye Bootstrap 4 desde un CDN
•Descargue Bootstrap 4 desde getbootstrap.com
Bootstrap 4 CDN
Si no desea descargar y alojar Bootstrap 4 usted mismo, puede incluirlo desde un CDN (Content
Delivery Network).
MaxCDN proporciona compatibilidad con CDN para CSS y JavaScript de Bootstrap. También debe
incluir jQuery:
MaxCDN:


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0
.0/css/bootstrap.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min
.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/p
opper.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.
min.js"></script>
- 11 -
Una ventaja de usar Bootstrap 4 CDN:
Muchos usuarios ya han descargado Bootstrap 4 de MaxCDN cuando visitan otro sitio. Como
resultado, se cargará desde la memoria caché cuando visiten su sitio, lo que lleva a un tiempo
de carga más rápido. Además, la mayoría de las CDN se asegurarán de que una vez que un
usuario solicite un archivo, se le envíe desde el servidor más cercano a ellas, lo que también
permite acelerar el tiempo de carga.
jQuery y Popper?
Bootstrap 4 usa jQuery y Popper.js para componentes de JavaScript (como modales,
información sobre herramientas, elementos emergentes, etc.). Sin embargo, si solo usa la
parte CSS de Bootstrap, no los necesita.
Descargando Bootstrap 4
Si desea descargar y alojar Bootstrap 4 usted mismo, vaya a https://getbootstrap.com/ , y siga
las instrucciones allí.
Cree la primera página web con Bootstrap 4

1. Agregue el doctype HTML5
Bootstrap 4 usa elementos HTML y propiedades CSS que requieren el doctype HTML5.
Siempre incluya el tipo de documento HTML5 al comienzo de la página, junto con el atributo lang
y el conjunto de caracteres correcto:
< !DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 4 es móvil primero
Bootstrap 4 está diseñado para responder a los dispositivos móviles. Los estilos de primeros
dispositivos móviles son parte del marco central.
Para garantizar una reproducción adecuada y un zoom táctil, agregue la siguiente

etiqueta <meta> dentro del elemento <head> :
< meta name="viewport" content="width=device-width, initial-scale=1">
- 12 -
El width=device-width parte del ancho del width=device-width establece el ancho de la
página para seguir el ancho de pantalla del dispositivo (que variará según el dispositivo).
La initial-scale=1 parte establece el nivel de zoom inicial cuando el navegador carga la página
por primera vez.
3. Contenedores
Bootstrap 4 también requiere un elemento contenedor para envolver el contenido del sitio.
Hay dos clases de contenedor para elegir:
1.La clase .container proporciona un contenedor responsivo de ancho fijo

2.La clase .container-fluid proporciona un contenedor de ancho completo , que
abarca todo el ancho de la ventana gráfica
Dos páginas básicas de Bootstrap 4

El siguiente ejemplo muestra el código de una página básica de Bootstrap 4 (con un contenedor
responsivo de ancho fijo):
Ejemplo de contenedor
< !DOCTYPE html>

<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4
.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.m
in.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd
/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstra
p.min.js"></script>
- 13 -
< /head>
<body>
<p>This is some text.</p>
</div>
</body>
</html>
El siguiente ejemplo muestra el código de una página básica de Bootstrap 4 (con un contenedor
de ancho completo):
Ejemplo de fluido contenedor
< !DOCTYPE html>

<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4
.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.m
in.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd
/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstra
- 14 -
p.min.js">< /script>
</head>
<body>
<div class="container-fluid">
<p>This is some text.</p>
</div>
</body>
</html>
- 15 -
Bootstrap 4 Grids
Sistema Bootstrap 4 Grid

El sistema de grillas de Bootstrap está construido con flexbox y permite hasta 12 columnas en
toda la página.
Si no desea usar las 12 columnas individualmente, puede agrupar las columnas para crear
columnas más amplias:
span span span span span span span span span span span span
1 1 1 1 1 1 1 1 1 1 1 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12
El sistema de cuadrícula responde y las columnas se reorganizarán automáticamente dependiendo

del tamaño de la pantalla.
Asegúrese de que la suma agregue hasta 12 o menos (no es necesario que use las 12 columnas
disponibles).
Clases de cuadrícula
El sistema de cuadrícula Bootstrap 4 tiene cinco clases:
•.col- (dispositivos extra pequeños - ancho de pantalla inferior a 576px)

•.col-sm- (dispositivos pequeños: ancho de pantalla igual o superior a 576 px)
•.col-md- (dispositivos medianos - ancho de pantalla igual o mayor que 768px)
•.col-lg- (dispositivos grandes - ancho de pantalla igual o mayor que 992px)
•.col-xl- (dispositivos .col-xl- : ancho de pantalla igual o superior a .col-xl- )
- 16 -
Las clases anteriores se pueden combinar para crear diseños más dinámicos y flexibles.
Consejo: cada clase aumenta, de modo que si desea establecer los mismos anchos para sm y md ,
solo necesita especificar sm .
Estructura básica de una cuadrícula Bootstrap 4

La siguiente es una estructura básica de una grilla Bootstrap 4:

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


<div class="row">
<div class="col"></div>
</div>
Primer ejemplo: crear una fila ( <div class="row"> ). Luego, agregue el número deseado de
columnas (etiquetas con las .col-*-*apropiadas .col-*-* ). La primera estrella (*) representa
la capacidad de respuesta: sm, md, lg o xl, mientras que la segunda estrella representa un
número, que debe sumar hasta 12 para cada fila.
Segundo ejemplo: en lugar de agregar un número a cada col , deje que bootstrap maneje el
diseño, para crear columnas de igual ancho: dos elementos "col" = 50% de ancho para cada
columna. tres cols = 33.33% de ancho para cada col. cuatro cols = 25% de ancho, etc. También
puede usar .col-sm|md|lg|xl para que las columnas sean receptivas.
A continuación, hemos recopilado algunos ejemplos de diseños de cuadrícula de Bootstrap 4

básicos.
- 17 -
Tres columnas iguales
El siguiente ejemplo muestra cómo crear tres columnas de ancho igual, en todos los dispositivos y
anchos de pantalla:
Ejemplo
< div class="row">

<div class="col">.col</div>
</div>
Columnas receptivas
- 18 -
El siguiente ejemplo muestra cómo crear cuatro columnas de ancho igual comenzando en tabletas
y escalando a escritorios extra grandes. En teléfonos móviles o pantallas que miden menos
de 576px de ancho, las columnas se apilarán automáticamente una encima de la otra :
Ejemplo
< div class="row">

<div class="col-sm-3">.col-sm-3</div>
</div>
Dos columnas desiguales que responden
El siguiente ejemplo muestra cómo obtener dos columnas de ancho variable comenzando en
tabletas y escalando a grandes escritorios extra:
- 19 -
Ejemplo
< div class="row">

</div>
Consejo: más adelante en este tutorial aprenderá más sobre las cuadrículas Bootstrap 4.
- 20 -
Bootstrap 4 Texto / Tipografía
Configuración predeterminada de Bootstrap 4

Bootstrap 4 usa un font-size de font-size predeterminado de 16 px, y su line-height es
1.5.
La font-family predeterminada es "Helvetica Neue", Helvetica, Arial, sans-serif.
Además, todos los elementos <p> tienen margin-top: 0 y margin-bottom: 1rem (16px por
defecto).
<h1> - <h6>
Bootstrap 4 estilos de encabezados HTML ( <h1> a <h6> ) con un font-weight más audaz y un
tamaño de fuente aumentado:
Ejemplo
<h1>h1 Bootstrap heading</h1>
h1 Bootstrap heading (2.5rem = 40px)
h2 Bootstrap heading (2rem = 32px)
h6 Bootstrap heading (1rem = 16px)
- 21 -
Mostrar encabezados
Los encabezados de visualización se utilizan para resaltar más que los encabezados normales
(tamaño de fuente más grande y peso de fuente más ligero), y hay cuatro clases para
elegir: .display-1 , .display-2 , .display-3 , .display-4
Ejemplo
<h1 class="display-1">Display 1</h1>
<small>
En Bootstrap 4, el elemento HTML <small> se usa para crear un texto secundario más claro en
cualquier encabezado:
Ejemplo
<h1>h1 heading <small>secondary text</small></h1>
- 22 -
h1 heading secondary text
<mark>
Bootstrap 4 diseñará el elemento HTML <mark> con un color de fondo amarillo y algo de relleno:
Ejemplo
<p>Use the mark element to <mark style="background-color:#fcf8e3;padding:.2em;">highlight</mark> text.</p>
<abbr>
Bootstrap 4 <abbr> elemento HTML <abbr> con una parte inferior del borde punteado:
Ejemplo
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
- 23 -
<blockquote>
Agregue la clase .blockquote a <blockquote> cuando cotice bloques de contenido desde otra
fuente:
Ejemplo
<blockquote class="blockquote">
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in
100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
<br>
<footer class="blockquote-footer">From WWF's website</footer>
</blockquote>
<dl>
Bootstrap 4 diseñará el elemento HTML <dl> de la siguiente manera:
Ejemplo
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Coffee
- black hot drink
Milk
- white cold drink
- 24 -
<code>
Bootstrap 4 diseñará el elemento HTML <code> de la siguiente manera:
Ejemplo
<code>span</code>
The following HTML elements: span , section , and div defines a section in a docmment.
<kbd>
Bootstrap 4 <kbd> elemento HTML <kbd> de la siguiente manera:
Ejemplo
<kbd>ctrl + p</kbd>
<pre>
Bootstrap 4 diseñará el elemento HTML <pre> de la siguiente manera:
Ejemplo
<pre style="font-family:Consolas,'courier new';">Text in a pre element

is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
- 25 -
Más clases de tipografía
Las siguientes clases de Bootstrap 4 se pueden agregar a los elementos HTML de estilo:
Class Description
.font-weight-bold Negrita
.font-weight-normal Normal
.font-weight-light Fina
.font-italic Italica
.lead Hace un párrafo destacarse
.small Más pequeño (85% del tamaño del padre)
.text-left Aliniado inquierda
.text-center Aliniado centro
.text-right Aliniado derecha
.text-justify Justificado
.text-nowrap Texto nowrap
.text-lowercase Texto en minúsculas
.text-uppercase Texto en mayúsculas
.text-capitalize Indicates capitalized text
Muestra el texto en un elemento <abbr> en un ligeramente más
.initialism
pequeño tamaño de fuente
Quita el list-style y margin-left en elementos de lista (funciona
en <ul> y <ol> ). Esta clase sólo se aplica a elementos de lista de
.list-unstyled
hijos inmediatos (para quitar el estilo de lista en listas anidadas,
aplicarse esta clase a ellas también)
Coloca todos los elementos de una lista en una única línea (usado
.list-inline
junto a .list-inline-item en cada elemento <li>)
.pre-scrollable Hace escrolable un elemento <pre>
- 26 -
Bootstrap 4 colores
Colores de texto
Bootstrap 4 tiene algunas clases contextuales que se pueden usar para proporcionar "significado a
través de los colores".
Las clases para los colores del texto son: .text-muted , .text-primary , .text-
success , .text-info , .text-warning , .text-danger , .text-secondary , .text-white ,
.text-dark y .text-light :
Ejemplo
This text is mmted.
This text is important.
This text indicates smccess.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary text.
Dark grey text.
Light grey text.
Las clases de texto contextual también se pueden usar en enlaces, que agregarán un color más
oscuro al pasar el mouse:
Ejemplo
Mmted link. Primary link. Smccess link. Info link. Warning link. Danger link. Secondary link. Dark
grey link. Light grey link.
- 27 -
Colores de fondo
Las clases de colores de fondo son: .bg-primary , .bg-success , .bg-info , .bg-
warning , .bg-danger , .bg-secondary , .bg-dark y .bg-light .
Tenga en cuenta que los colores de fondo no configuran el color del texto, por lo que en algunos
casos querrá usarlos junto con una clase .text-* .
Ejemplo
This text is important.
This text indicates smccess.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary backgromnd color.
Dark grey backgromnd color.
Light grey backgromnd color.
- 28 -
Bootstrap 4 tablas
Bootstrap 4 Tabla básica

Una tabla básica Bootstrap 4 tiene un relleno ligero y divisores horizontales.
La clase .table agrega estilo básico a una tabla:
Ejemplo
Filas rayadas
La clase .table-striped agrega zebra-stripes a una tabla:
Ejemplo
- 29 -
Tabla con bordes
La clase .table-bordered agrega bordes en todos los lados de la tabla y celdas:
Ejemplo
Hover Filas
La clase .table-hover agrega un efecto de .table-hover (color de fondo gris) en las filas de la
tabla:
Ejemplo
Tabla negra / oscura

La clase .table-dark agrega un fondo negro a la tabla:
- 30 -
Ejemplo
Tabla de rayas oscuras

Combina .table-dark y .table-striped para crear una mesa oscura y rayada:
Ejemplo
Tabla Oscura Hoverable

La clase .table-hover agrega un efecto de .table-hover (color de fondo gris) en las filas de la
tabla:
Ejemplo
- 31 -
Clases contextuales
Las clases contextuales se pueden usar para colorear toda la tabla ( <table> ), las filas de la
tabla ( <tr> ) o las celdas de la tabla ( <td> ).
Ejemplo
Las clases contextuales que se pueden usar son:
Clase Descripción
.table-primary Azul: indica una acción importante
- 32 -
Clase Descripción
.table-success Verde: Indica una acción exitosa o positiva
.table-danger Rojo: indica una acción peligrosa o potencialmente negativa
.table-info Azul claro: indica un cambio informativo neutral o acción
.table-warning Naranja: indica una advertencia que podría necesitar atención
.table-active Gris: aplica el color de desplazamiento a la fila de la tabla o celda de la tabla
.table-secondary Gris: Indica una acción ligeramente menos importante
.table-light Fondo gris claro de la tabla o de la fila de la tabla
.table-dark Mesa gris oscuro o fondo de la fila de la mesa
Colores de cabezal de tabla

La clase .thead-dark agrega un fondo negro a los encabezados de tabla, y la clase .thead-
light agrega un fondo gris a los encabezados de tabla:
Ejemplo
Table pequeña
La clase .table-sm hace que la tabla sea más pequeña al cortar el relleno de celdas por la mitad:
- 33 -
Ejemplo
Tablas responsiva
La clase .table-responsive crea una tabla responsiva: se agrega una barra de desplazamiento
horizontal a la tabla en pantallas que tienen menos de 992px de ancho (si es necesario). Al ver
algo de más de 992px de ancho, no hay diferencia:
Ejemplo
< div class="table-responsive">

<table class="table">
...
</table>
</div>
También puede decidir cuándo la tabla debe tener una barra de desplazamiento, dependiendo del
ancho de la pantalla:
Clase Ancho de la pantalla

.table-responsive-sm <576px
.table-responsive-md <768px
.table-responsive-lg <992px
.table-responsive-xl <1200 px
- 34 -
Ejemplo
< div class="table-responsive-sm">

<table class="table">
...
</table>
</div>
- 35 -
Bootstrap 4 Imágenes
❮ Anterior Siguiente ❯
Bootstrap 4 Formas de imagen
Esquinas redondeadas
La clase .rounded agrega esquinas redondeadas a una imagen:
Ejemplo
< img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Circulo
La .rounded-circle da forma a la imagen en un círculo:
Ejemplo
< img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
- 36 -
Miniatura
La clase .img-thumbnail da forma a la imagen en una miniatura (delimitada):
Ejemplo
< img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Alineación de imágenes
Desplace una imagen hacia la derecha con la clase .float-right o hacia la izquierda
con .float-left :
Ejemplo
< img src="paris.jpg" class="float-left">

<img src="paris.jpg" class="float-right">
- 37 -
Imágenes responsivas
Las imágenes vienen en todos los tamaños. También lo hacen las pantallas. Las imágenes
responsivas se ajustan automáticamente para adaptarse al tamaño de la pantalla.
Cree imágenes responsivas agregando una clase .img-fluid a la etiqueta <img> . La imagen se
escalará muy bien al elemento principal.
La clase .img-fluid aplica max-width: 100%; y height: auto; a la imagen:
Ejemplo
< img class="img-fluid" src="img_chania.jpg" alt="Chania">
- 38 -
Bootstrap 4 Jumbotron
Bootstrap 4 Jumbotron
Un jumbotron indica una gran caja gris para llamar la atención sobre algún contenido o
información especial.
Consejo: Dentro de un jumbotron puedes colocar casi cualquier HTML válido, incluidos otros
elementos / clases de Bootstrap.
Use un elemento <div> con la clase .jumbotron para crear un jumbotron:
Ejemplo
< div class="jumbotron">

<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS...</p>
</div>
Jumbotron de ancho completo

Si desea un jumbotron de ancho completo sin bordes redondeados, agregue la
clase .jumbotron-fluid y un .container o .container-fluid dentro de este:
- 39 -
Ejemplo
< div class="jumbotron jumbotron-fluid">

<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS...</p>
</div>
</div>
- 40 -
Bootstrap 4 Alerts
Bootstrap 4 Alerts
Bootstrap 4 proporciona una manera fácil de crear mensajes de alerta predefinidos:
Las alertas se crean con la clase .alert , seguidas por una de las clases contextuales.alert-
success , .alert-info , .alert-warning , .alert-danger , .alert-primary , .alert-
secondary , .alert-light o .alert-dark :
Ejemplo
< div class="alert alert-success">

<strong>Success!</strong> Indicates a successful or positive action.
</div>
- 41 -
Enlaces de alerta
Agregue la clase de alert-link a cualquier enlace dentro del cuadro de alerta para crear
"enlaces de colores iguales":
Ejemplo
< div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read
this message</a>.
</div>
- 42 -
Alertas de cierre
Para cerrar el mensaje de alerta, agregue una clase .alert-dismissable al contenedor de

alertas. A continuación, agregue class="close" y data-dismiss="alert" a un enlace o a un
elemento de botón (cuando hace clic en este, el cuadro de alerta desaparecerá).
Ejemplo
< div class="alert alert-success alert-dismissable">

<button type="button" class="close" data-
dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Consejo: × (×) es una entidad HTML que es el icono preferido para los botones de
cierre, en lugar de la letra "x".
Alertas animadas
Las clases .fade y .show agregan un efecto de desvanecimiento al cerrar el mensaje de alerta:
Ejemplo
< div class="alert alert-danger alert-dismissable fade show">
- 43 -
Bootstrap 4 botones
Estilos de botones
Bootstrap 4 ofrece diferentes estilos de botones:
Ejemplo
< button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
Inténtalo tú mismo "
Las clases de botón se pueden usar en un elemento <a> , <button> o <input> :
Ejemplo
< a href="#" class="btn btn-info" role="button">Link Button</a>

<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
¿Por qué ponemos un # en el atributo href del enlace?
Como no tenemos ninguna página para vincular, y no queremos obtener un mensaje "404",
- 44 -
ponemos # como el enlace. En la vida real, debería ser una URL real para la página
"Buscar".
Contorno del botón

Bootstrap 4 proporciona ocho botones de contorno / borde:
Ejemplo
< button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-
dark">Light</button>
Tamaños de botones
Bootstrap 4 ofrece diferentes tamaños de botones:
Ejemplo
< button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
- 45 -
Botones de nivel de bloque
Agregue la clase .btn-block para crear un botón de nivel de bloque que abarque todo el ancho
del elemento principal.
Ejemplo
< button type="button" class="btn btn-primary btn-block">Button 1</button>
Botones activos / desactivados

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.
Ejemplo
< button type="button" class="btn btn-primary active">Active

Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled
Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>
- 46 -
Bootstrap 4 grupos de botones
Grupos de botones
Bootstrap 4 le permite agrupar una serie de botones juntos (en una sola línea) en un grupo de
botones:
Use un elemento <div> con la clase .btn-group para crear un grupo de botones:
Ejemplo
< div class="btn-group">

<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Consejo: en lugar de aplicar tamaños de botón a cada botón de un grupo, use la clase .btn-
group-lg|sm|xs para .btn-group-lg|sm|xs tamaño de todos los botones del grupo:
Botones grandes:
Botones predeterminados:
- 47 -
Botones pequeños:
Ejemplo
< div class="btn-group btn-group-lg">
</div>
Grupos de botones verticales

Bootstrap 4 también admite grupos de botones verticales:
Use la clase .btn-group-vertical para crear un grupo de botones verticales:
Ejemplo
< div class="btn-group-vertical">

</div>
- 48 -
Grupos de botones de anidamiento y menús
desplegables
Agrupe grupos de botones para crear menús desplegables (obtendrá más información sobre los
menús desplegables en un capítulo posterior):
Ejemplo

<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle"data-
toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
- 49 -
Desplegable de botones divididos
Ejemplo
<button type="button" class="btn btn-primary dropdown-toggle dropdown-
toggle-split" data-toggle="dropdown">
<span class="caret"></span>
</button>
</div>
</div>
Grupo de botones vertical c / Dropdown
Ejemplo
< div class="btn-group-vertical">
<div class="btn-group">
toggle="dropdown">
Sony
</button>
- 50 -
</div>
</div>
</div>
- 51 -
Bootstrap 4 insignias
Las insignias se usan para agregar información adicional a cualquier contenido. Utilice la
clase .badge junto con una clase contextual (como .badge-secondary ) dentro de los
elementos <span> para crear insignias rectangulares. Tenga en cuenta que las insignias se
escalan para coincidir con el tamaño del elemento principal (si lo hay):
Ejemplo
< h1>Example heading <span class="badge badge-secondary">New</span></h1>

<h2>Example heading <span class="badge badge-secondary">New</span></h2>
- 52 -
Insignias contextuales
Utilice cualquiera de las clases contextuales ( .badge-* ) para cambiar el color de una insignia:
Ejemplo
< span class="badge badge-primary">Primary</span>

<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
Insignias de píldoras
Usa la clase .badge-pill para hacer las insignias más redondas:
Ejemplo
< span class="badge badge-pill badge-default">Default</span>

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-success">Succeess</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-danger">Danger</span>
- 53 -
Insignia dentro de un Elemento
Un ejemplo de uso de una insignia dentro de un botón:
Ejemplo
< button type="button" class="btn btn-primary">

Messages <span class="badge badge-light">4</span>
</button>
- 54 -
Bootstrap 4 Barras de progreso
Barra de progreso básico

Se puede usar una barra de progreso para mostrarle a un usuario qué tan avanzado está en un
proceso.
Para crear una barra de progreso predeterminada, agregue una clase .progress a un elemento
contenedor y agregue la clase progress-bar a su elemento secundario. Use la propiedad
CSS width para establecer el ancho de la barra de progreso:
Ejemplo
< div class="progress">

<div class="progress-bar" style="width:70%"></div>
</div>
- 55 -
Altura de la barra de progreso
La altura de la barra de progreso es 16 píxeles por defecto. Use la propiedad CSS heightpara
cambiarla. Tenga en cuenta que debe establecer la misma altura para el contenedor de progreso y
la barra de progreso:
Ejemplo
< div class="progress" style="height:20px">

<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
Etiquetas de barra de progreso

Agregue texto dentro de la barra de progreso para mostrar el porcentaje visible:
Ejemplo
<div class="progress-bar" style="width:70%">70%</div>
</div>
- 56 -
Barras de progreso coloreadas
Por defecto, la barra de progreso es azul (primaria). Utilice cualquiera de las clases contextuales
de fondo de Bootstrap 4 con su color:
Ejemplo


<div class="progress">
<div class="progress-bar" style="width:10%"></div>
</div>


<div class="progress-bar bg-success" style="width:20%"></div>
</div>


<div class="progress-bar bg-info" style="width:30%"></div>
</div>


<div class="progress-bar bg-warning" style="width:40%"></div>
- 57 -
< /div>


<div class="progress-bar bg-danger" style="width:50%"></div>
</div>


<div class="progress border">
<div class="progress-bar bg-white" style="width:60%"></div>
</div>


<div class="progress-bar bg-secondary" style="width:70%"></div>
</div>


<div class="progress border">
<div class="progress-bar bg-light" style="width:80%"></div>
</div>


<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
Barras de progreso a rayas
Use la .progress-bar-striped para agregar rayas a las barras de progreso:
- 58 -
Ejemplo

<div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>
Barra de progreso animado
Agregue la .progress-bar-animated para animar la barra de progreso:
Ejemplo
< div class="progress-bar progress-bar-striped progress-bar-

animated" style="width: 40%"></div>
Varias barras de progreso

Las barras de progreso también se pueden apilar:
Ejemplo

<div class="progress-bar bg-success" style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
- 59 -
Warning
</div>
<div class="progress-bar bg-danger" style="width:20%">
Danger
</div>
</div>
- 60 -
Bootstrap 4 Pagination
Paginación básica
Si tiene un sitio web con muchas páginas, puede agregar algún tipo de paginación a cada página.
Para crear una paginación básica, agregue la clase .pagination a un elemento <ul> . A
continuación, agregue el .page-item a cada elemento <li> y una clase .page-link a cada
enlace dentro de <li> :
Ejemplo
< ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
Estado activo
La clase .active se usa para "resaltar" la página actual:
- 61 -
Ejemplo
<li class="page-item active"><a class="page-link" href="#">2</a></li>
</ul>
Estado deshabilitado
La clase .disabled se usa para enlaces que parecen no hacer clic:
Ejemplo
<li class="page-item disabled"><a class="page-
link"href="#">Previous</a></li>
</ul>
Tamaño de paginación
Los bloques de paginación también se pueden clasificar en tamaños más grandes o más
pequeños:
- 62 -
Agregue la clase .pagination-lg para bloques más grandes o .pagination-sm para bloques
más pequeños:
Ejemplo
< ul class="pagination pagination-lg">

</ul>
<ul class="pagination pagination-sm">

</ul>
Migas de pan
Otra forma de paginación son las migan de pan:
- 63 -
Las .breadcrumb y .breadcrumb-item indican la ubicación de la página actual dentro de una
jerarquía de navegación:
Ejemplo
< ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Photos</a></li>
<li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item active">Rome</li>
</ul>
- 64 -
Grupos de listas de Bootstrap 4
Grupos de lista básicos

El grupo de lista más básico es una lista desordenada con elementos de lista:
Para crear un grupo de lista básico, utilice un elemento <ul> con clase .list-
group y<li> elementos con clase .list-group-item :
Ejemplo
< ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Estado activo
- 65 -
Use la clase .active para resaltar el elemento actual:
Ejemplo
<li class="list-group-item active">Active item</li>
</ul>
Artículo desactivado
Para deshabilitar un elemento, agregue la clase .disabled :
Ejemplo
<li class="list-group-item disabled">Disabled item</li>
</ul>
- 66 -
Lista de grupos con elementos vinculados
Para crear un grupo de listas con elementos vinculados, utilice <div> lugar de <ul> y<a> lugar
de <li> . También agregue la .list-group-item-action si desea un color de fondo gris en el
vuelo estacionario:
Ejemplo
< div class="list-group">

<a href="#" class="list-group-item list-group-item-action">First
item</a>
<a href="#" class="list-group-item list-group-item-action">Second
item</a>
<a href="#" class="list-group-item list-group-item-action">Third
item</a>
</div>
Clases contextuales
Las clases contextuales se pueden usar para colorear elementos de la lista:
- 67 -
Las clases para los elementos de lista para colorear son: .list-group-item-success ,list-
group-item-secondary , list-group-item-info , list-group-item-warning , .list-
group-item-danger , list-group-item-dark y list-group-item-light ,:
Ejemplo
<li class="list-group-item list-group-item-success">Success item</li>
<li class="list-group-item list-group-item-secondary">Secondary
item</li>
<li class="list-group-item list-group-item-info">Info item</li>
<li class="list-group-item list-group-item-warning">Warning item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
<li class="list-group-item list-group-item-primary">Primary item</li>
<li class="list-group-item list-group-item-dark">Dark item</li>
<li class="list-group-item list-group-item-light">Light item</li>
</ul>
- 68 -
Vincular elementos con clases contextuales
Ejemplo
< div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Action
item</a>
<a href="#" class="list-group-item list-group-item-success">Success
item</a>
<a href="#" class="list-group-item list-group-item-secondary">Secondary
item</a>
<a href="#" class="list-group-item list-group-item-info">Info item</a>
<a href="#" class="list-group-item list-group-item-warning">Warning
item</a>
<a href="#" class="list-group-item list-group-item-danger">Danger
item</a>
<a href="#" class="list-group-item list-group-item-primary">Primary
item</a>
<a href="#" class="list-group-item list-group-item-dark">Dark item</a>
<a href="#" class="list-group-item list-group-item-light">Light item</a>
</div>
- 69 -
Bootstrap 4 Tarjetas
Tarjetas
Una carta en Bootstrap 4 es una caja rodeada con algo de relleno alrededor de su
contenido.Incluye opciones para encabezados, pies de página, contenido, colores, etc.
- 70 -
Tarjeta básica
Se crea una tarjeta básica con la clase .card , y el contenido dentro de la tarjeta tiene una
clase .card-body :
Ejemplo
< div class="card">

<div class="card-body">Basic card</div>
</div>
Si está familiarizado con Bootstrap 3, las tarjetas reemplazan paneles viejos, pocillos y
miniaturas.
Encabezado y pié de página
La clase .card-header agrega un encabezado a la tarjeta y la clase .card-footeragrega un pie

de página a la tarjeta:
Ejemplo
- 71 -
< div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
Tarjetas contextuales
Para agregar un color de fondo a la tarjeta, use clases contextuales ( .bg-primary , .bg-
success , .bg-info , .bg-warning , .bg-danger , .bg-secondary , .bg-dark y .bg-light .
- 72 -
Títulos, texto y enlaces
Utilice .card-title para agregar títulos de tarjeta a cualquier elemento de título. La

clase .card-text se usa para eliminar los márgenes inferiores de un elemento <p> si es el
último elemento secundario del bloque de tarjetas. La clase .card-link agrega un color azul a
cualquier enlace y un efecto de desplazamiento.
Ejemplo
< div class="card">

<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
- 73 -
Imágenes de la tarjeta
Agregue .card-img-top o .card-img-bottom a un <img> para colocarlo en la parte superior o

inferior de la tarjeta. Tenga en cuenta que hemos agregado la imagen fuera del bloque de tarjeta
para abarcar todo el ancho:
Ejemplo
< div class="card" style="width:400px">

<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
- 74 -
Superposiciones de imagen de tarjeta
Convierta una imagen en un fondo de tarjeta y use .card-img-overlay para agregar texto en la
parte superior de la imagen:
Ejemplo
< div class="card" style="width:500px">

<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
- 75 -
- 76 -
Bootstrap 4 desplegables
Menú desplegable básico

Un menú desplegable es un menú que se puede alternar y que permite al usuario elegir un valor
de una lista predefinida:
Ejemplo
< div class="dropdown">

toggle="dropdown">
Dropdown button
</button>
<a class="dropdown-item" href="#">Link 1</a>
</div>
</div>
Ejemplo explicado
La clase .dropdown indica un menú desplegable.
Para abrir el menú desplegable, use un botón o un enlace con una clase de .dropdown-toggle y
el atributo data-toggle="dropdown" .
- 77 -
Agregue la clase .dropdown-menu a un elemento <div> para construir realmente el menú
desplegable. A continuación, agregue la clase .dropdown-item a cada elemento (enlaces o
botones) dentro del menú desplegable.
Desplegable con divisor
La clase .dropdown-divider se usa para separar enlaces dentro del menú desplegable con un
borde horizontal delgado:
Ejemplo
< div class="dropdown-divider"></div>
- 78 -
Desplegable con encabezados
La clase .dropdown-header se usa para agregar encabezados dentro del menú desplegable:
Ejemplo
< div class="dropdown-header">Dropdown header 1</div>
Elementos activos e inactivos
Resalte un elemento desplegable específico con la clase .active (agrega un color de fondo azul).
- 79 -
Para deshabilitar un elemento en el menú desplegable, use la clase .disabled (obtiene un color
de texto gris claro y un ícono de "no estacionamiento con signo" en el aire):
Ejemplo
< a class="dropdown-item active" href="#">Active</a>

<a class="dropdown-item disabled" href="#">Disabled</a>
Posición del desplegable
Para alinear a la derecha el menú desplegable, agregue la .dropdown-menu-right al elemento

con .dropdown-menu:
Ejemplo
< div class="dropdown-menu dropdown-menu-right">
Desplegable hacia arriba
- 80 -
Si desea que el menú desplegable se expanda hacia arriba en lugar de hacia abajo, cambie el
elemento <div> con class = "desplegable" por "dropup" :
Ejemplo
< div class="dropup">
Desplegable de botones divididos
Ejemplo

<button type="button" class="btn btn-primary dropdown-toggle dropdown-
toggle-split" data-toggle="dropdown">
<span class="caret"></span>
</button>
</div>
</div>
- 81 -
Bootstrap 4 Collapse
Básico plegable
Los collapsibles son útiles cuando quiere ocultar y mostrar gran cantidad de contenido:
Ejemplo
< button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">

Lorem ipsum dolor text....
</div>
Ejemplo explicado
La clase .collapse indica un elemento colapsable (a <div> en nuestro ejemplo); este es el
contenido que se mostrará u ocultará con un clic de un botón.
Para controlar (mostrar / ocultar) el contenido colapsable, agregue el atributo data-

toggle="collapse" a un elemento <a> o a un <button>. A continuación, agregue el
atributo data-target="#id" para conectar el botón con el contenido colapsable (<div id =
"demo">).
Nota: Para los elementos <a>, puede usar el atributo href lugar del atributo de data-target :
- 82 -
Ejemplo
< a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">

</div>
Por defecto, el contenido colapsable está oculto. Sin embargo, puede agregar la clase.show para
mostrar el contenido de forma predeterminada:
Ejemplo
< div id="demo" class="collapse show">

</div>
Acordeón
El siguiente ejemplo muestra un acordeón simple al extender el componente de la tarjeta.
Nota: Use el atributo de data-parent para asegurarse de que todos los elementos contraíbles
bajo el padre especificado se cerrarán cuando se muestre uno de los elementos colapsables.
- 83 -
Ejemplo
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show">
Lorem ipsum..
</div>
</div>
</div>
<div class="card">
<a class="collapsed card-link" data-toggle="collapse" data-
parent="#accordion" href="#collapseTwo">
</a>
</div>
<div id="collapseTwo" class="collapse">
Lorem ipsum..
</div>
</div>
</div>
<div class="card">
<a class="collapsed card-link" data-toggle="collapse" data-
parent="#accordion" href="#collapseThree">
</a>
</div>
<div id="collapseThree" class="collapse">
Lorem ipsum..
</div>
</div>
</div>
</div>
- 84 -
Bootstrap 4 Navs
Menús Nav
Si desea crear un menú horizontal simple, agregue la clase .nav a un elemento <ul> , seguido
de .nav-item para cada <li> y agregue la clase .nav-link a sus enlaces:
Ejemplo
< ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</li>
</li>
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Nav alineado
- 85 -
Agregue la .justify-content-center para centrar el .justify-content-end y la.justify-
content-end para alinear a la derecha el navegador.
Ejemplo


<ul class="nav justify-content-center">


<ul class="nav justify-content-end">
Navegación vertical
Agregue la clase .flex-column para crear un .flex-column vertical:
Ejemplo
< ul class="nav flex-column">
- 86 -
Pestañas
Convierta el menú de navegación en pestañas de navegación con la clase .nav-tabs .Agregue la

clase activa al enlace activo / actual. Si desea que las pestañas sean seleccionables, consulte el
último ejemplo en esta página.
Ejemplo
< ul class="nav nav-tabs">

<a class="nav-link active" href="#">Active</a>
</li>
</li>
</li>
</li>
</ul>
Pastillas
- 87 -
Convierta el menú de navegación en píldoras de navegación con la clase .nav-pills . Si desea
que las píldoras sean seleccionables, vea el último ejemplo en esta página.
Ejemplo
< ul class="nav nav-pills">

</li>
</li>
</li>
</li>
</ul>
Fichas justificadas / pastillas

Justifique las pestañas / píldoras con la clase .nav-justified (ancho igual):
Ejemplo
< ul class="nav nav-pills nav-justified">..</ul>

<ul class="nav nav-tabs nav-justified">..</ul>
- 88 -
Pastillas con menú desplegable
Ejemplo
< ul class="nav nav-pills">

</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-
toggle="dropdown"href="#">Dropdown</a>
</div>
</li>
</li>
</li>
</ul>
Pestañas con menú desplegable
- 89 -
Ejemplo
< ul class="nav nav-tabs">

</li>
<a class="nav-link dropdown-toggle" data-
toggle="dropdown"href="#">Dropdown</a>
</div>
</li>
</li>
</li>
</ul>
Pestañas Toggleable / Dynamic
- 90 -
Para hacer que las pestañas se puedan alternar, agregue el atributo data-toggle="tab"a cada
enlace. A continuación, agregue una clase .tab-pane con una ID única para cada pestaña y
envuélvalas dentro de un elemento <div> con clase .tab-content .
Si desea que las pestañas se desvanezcan al hacer clic en ellas, agregue la clase .fade a .tab-
pane :
Ejemplo


<ul class="nav nav-tabs">
<a class="nav-link active" data-toggle="tab"href="#home">Home</a>
</li>
<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>


<div class="tab-content">
<div class="tab-pane active container" id="home">...</div>
<div class="tab-pane container" id="menu1">...</div>
</div>
- 91 -
Píldoras intercambiables / dinámicas
El mismo código se aplica a las píldoras; solo cambie el atributo de alternancia de data-
toggle="pill" a data-toggle="pill" :
Ejemplo


<ul class="nav nav-pills">
<a class="nav-link active" data-toggle="pill"href="#home">Home</a>
</li>
<a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>


<div class="tab-content">
<div class="tab-pane active container" id="home">...</div>
</div>
- 92 -
Barra de navegación Bootstrap 4
Barras de navegación
Una barra de navegación es un encabezado de navegación que se coloca en la parte superior de la
página:
Navbar básico
Con Bootstrap, una barra de navegación puede extenderse o colapsar, dependiendo del tamaño
de la pantalla.
Se crea una barra de navegación estándar con la clase .navbar , seguida de una clase colapsable
receptiva: .navbar-expand-xl|lg|md|sm (apila la barra de navegación verticalmente en
pantallas extra grandes, grandes, medianas o pequeñas).
Para agregar enlaces dentro de la barra de navegación, use un

elemento <ul> con class="navbar-nav" . A continuación, agregue elementos <li> con una
clase .nav-item seguida de un elemento <a> con una clase .nav-link :
Ejemplo

<nav class="navbar navbar-expand-sm bg-light">


<ul class="navbar-nav">
<a class="nav-link" href="#">Link 1</a>
- 93 -
</li>
</li>
</li>
</ul>
</nav>
Barra de navegación vertical

Elimine la .navbar-expand-xl|lg|md|sm para crear una barra de navegación vertical:
Ejemplo


<nav class="navbar bg-light">


</li>
</li>
</li>
</ul>
- 94 -
</nav>
Navbar de color
Utilice cualquiera de las clases de .bg-color para cambiar el color de fondo de la barra de
navegación ( .bg-primary , .bg-success , .bg-info , .bg-warning , .bg-danger , .bg-
secondary , .bg-dark y .bg-light )
Consejo: Agregue un color de texto blanco a todos los enlaces en la barra de navegación con la
clase .navbar-dark , o use la clase .navbar-light para agregar un color detexto negro .
Ejemplo


<nav class="navbar navbar-expand-sm bg-light navbar-light">
<li class="nav-item active">
<a class="nav-link" href="#">Active</a>
</li>
</li>
</li>
- 95 -
</li>
</ul>
</nav>


<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>


<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
Estado activo / deshabilitado : agregue la clase .active a un

elemento <a> para resaltar el enlace actual, o la clase .disabled para indicar que el
enlace no se puede hacer clic.
Logotipo
La .navbar-brand se utiliza para resaltar el nombre de la marca / logotipo / proyecto de su
página:
Ejemplo
< nav class="navbar navbar-expand-sm bg-dark navbar-dark">

<a class="navbar-brand" href="#">Logo</a>
...
</nav>
Al utilizar la .navbar-brand en las imágenes, Bootstrap 4 personalizará automáticamente la

imagen para que se ajuste a la barra de navegación.
- 96 -
Ejemplo

<a class="navbar-brand" href="#">
<img src="bird.jpg" alt="Logo" style="width:40px;">
</a>
...
</nav>
Contraer la barra de navegación
Muy a menudo, especialmente en pantallas pequeñas, desea ocultar los enlaces de navegación y
reemplazarlos con un botón que los revele al hacer clic en ellos.
Para crear una barra de navegación plegable, use un botón con class="navbar-toggle",
data-toggle="collapse" and data-target="# thetarget " . A continuación, ajuste el
contenido de la barra de navegación (enlaces, etc.) dentro de un elemento div
con class="collapse navbar-collapse" , seguido de un id que coincida con el data-
target de data-target del botón: " thetarget ".
Ejemplo
< nav class="navbar navbar-expand-md bg-dark navbar-dark">


<a class="navbar-brand" href="#">Navbar</a>


<button class="navbar-toggler" type="button" data-toggle="collapse" data
-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>


<div class="collapse navbar-collapse" id="collapsibleNavbar">
- 97 -
</li>
</li>
</li>
</ul>
</div>
</nav>
Sugerencia: También puede eliminar la clase .navbar-expand-md para ocultar SIEMPRE

los enlaces de la barra de navegación y mostrar el botón de palanca.
Navbar con menú desplegable
Navbars también puede contener menús desplegables:
Ejemplo


<a class="navbar-brand" href="#">Logo</a>


</li>
</li>
- 98 -

<a class="nav-link dropdown-toggle" href="#" id="navbardrop"data-
toggle="dropdown">
Dropdown link
</a>
</div>
</li>
</ul>
</nav>
Navbar formularios y botones
Agregue un elemento <form> con class="form-inline" para agrupar entradas y botones uno
al lado del otro:
Ejemplo

<form class="form-inline" action="/action_page.php">
<input class="form-control mr-sm-2" type="text"placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
También puede usar otras clases de entrada, como .input-group-prepend .input-group-

append o .input-group-append para adjuntar un icono o texto de ayuda al lado del campo de
entrada. Aprenderá más sobre estas clases en el capítulo Entradas de Bootstrap.
- 99 -
Ejemplo

<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control"placeholder="Username">
</div>
</form>
</nav>
Texto de la barra de navegación
Use la clase .navbar-text para alinear verticalmente cualquier elemento dentro de la barra de
navegación que no sean enlaces (asegura el relleno y el color del texto).
Ejemplo


</li>
- 100 -
</li>
</ul>


<span class="navbar-text">
Navbar text
</span>
</nav>
Barra de navegación fija
La barra de navegación también se puede fijar en la parte superior o inferior de la página.
Una barra de navegación fija permanece visible en una posición fija (superior o inferior)
independientemente del desplazamiento de la página.
La clase .fixed-top hace que la barra de navegación se fije en la parte superior :
Ejemplo
< nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">

...
</nav>
- 101 -
Use la clase .fixed-bottom para hacer que la barra de navegación permanezca en la parte
inferior de la página:
Ejemplo
< nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">

...
</nav>
Use la clase .sticky-top para hacer que la barra de navegación esté fija / permanezca en
la parte superior de la página cuando se desplace. Nota: Esta clase no funciona en IE11 y
versiones anteriores (lo tratará como position:relative ).
- 102 -
Ejemplo
< nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">

...
</nav>
- 103 -
Bootstrap 4 formularios
Configuración predeterminada de Bootstrap 4

Los controles de formulario reciben automáticamente un estilo global con Bootstrap:
Todos los elementos textuales <input> , <textarea> y <select> con clase .form-
control tienen un ancho del 100%.
Bootstrap 4 Diseños de formularios

Bootstrap proporciona dos tipos de diseños de formulario:
•Forma apilada (ancho completo)
•Forma en línea
Bootstrap 4 formulario apilado
- 104 -
El siguiente ejemplo crea una forma apilada con dos campos de entrada, una casilla de
verificación y un botón de enviar:
Ejemplo
< form action="/action_page.php">

<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Bootstrap Inline Form
En una forma en línea, todos los elementos están en línea y alineados a la izquierda.
Nota: Esto solo se aplica a los formularios dentro de las ventanas gráficas que tienen al
menos 576 px de ancho. En pantallas de menos de 576px, se apilará horizontalmente.
Regla adicional para una forma en línea:
•Agregar clase .form-inline al elemento <form>

El siguiente ejemplo crea una forma en línea con dos campos de entrada, una casilla de
verificación y un botón de enviar:
- 105 -
Ejemplo
< form class="form-inline" action="/action_page.php">

<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
- 106 -
Bootstrap 4 Entradas de Formularios
Controles de formularios compatibles

Bootstrap admite los siguientes controles de formulario:
•entrada
•textarea
•caja
•radio
•seleccionar
Entrada Bootstrap
Bootstrap admite todos los tipos de entrada HTML5: texto, contraseña, fecha y hora, hora local,
fecha, mes, hora, semana, número, correo electrónico, url, búsqueda, teléfono y color.
Nota: ¡Las entradas NO se diseñarán completamente si su tipo no se declara correctamente!
El siguiente ejemplo contiene dos elementos de entrada; uno de tipo texto y uno de tipo
contraseña:
Ejemplo
< div class="form-group">

<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
- 107 -
</div>
Bootstrap Textarea
El siguiente ejemplo contiene un área de texto:
Ejemplo

<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
Casillas de verificación Bootstrap
Las casillas de verificación se utilizan si desea que el usuario seleccione cualquier cantidad de
opciones de una lista de opciones predefinidas.
El siguiente ejemplo contiene tres casillas de verificación. La última opción está deshabilitada:
- 108 -
Ejemplo
< div class="form-check">

<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
</label>
</div>
<div class="form-check disabled">
<input type="checkbox" class="form-check-input" valu
e=""disabled>Option 3
</label>
</div>
Utilice la .form-check-inline si desea que las casillas de verificación aparezcan en la misma

línea:
Ejemplo
< div class="form-check form-check-inline">
</label>
</div>
<div class="form-check form-check-inline">
</label>
</div>
<div class="form-check form-check-inline disabled">
<input type="checkbox" class="form-check-input" valu
e=""disabled>Option 3
</label>
</div>
- 109 -
Botones de radio Bootstrap
Los botones de radio se utilizan si desea limitar al usuario a una sola selección de una lista de
opciones preestablecidas.
El siguiente ejemplo contiene tres botones de radio. La última opción está deshabilitada:
Ejemplo
< div class="radio">

<label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
Utilice la clase .radio-inline si desea que los botones de .radio-inline aparezcan en la

misma línea:
Ejemplo
< label class="radio-inline"><input type="radio"name="optradio">Option
1</label>
<label class="radio-inline"><input type="radio"name="optradio">Option
2</label>
<label class="radio-inline"><input type="radio"name="optradio">Option
3</label>
- 110 -
Lista de selección Bootstrap
Lista de selección múltiple (mantenga presionado ctrl o shift (o arrastre con el mouse) para
seleccionar más de uno):
Las listas seleccionadas se utilizan si desea permitir que el usuario elija entre múltiples opciones.
El siguiente ejemplo contiene una lista desplegable (lista de selección):
Ejemplo

<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
- 111 -
Bootstrap 4 Carrusel
Bootstrap 4 Carrusel
El carrusel es una presentación de diapositivas en ciclo a través de elementos.
Cómo crear un carrusel

El siguiente ejemplo muestra cómo crear un carrusel básico con indicadores y controles:
Ejemplo
< div id="demo" class="carousel slide" data-ride="carousel">


<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>

- 112 -
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York">
</div>
</div>


<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
Agregar leyendas a las diapositivas
- 113 -
Agregue elementos dentro de <div class="carousel-caption"> dentro de cada <div
class="carousel-item"> para crear un título para cada diapositiva:
Ejemplo
< div class="carousel-item">

<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
- 114 -
Bootstrap 4 Modal
Bootstrap 4 Modal
El componente modal es un cuadro de diálogo / ventana emergente que se muestra en la parte
superior de la página actual:
Cómo crear un modal

El siguiente ejemplo muestra cómo crear un modal básico:
Ejemplo


<button type="button" class="btn btn-primary" data-toggle="modal"data-
target="#myModal">
Open modal
</button>


<div class="modal fade" id="myModal">
- 115 -
<div class="modal-dialog">
<div class="modal-content">


<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-
dismiss="modal">×</button>
</div>


<div class="modal-body">
Modal body..
</div>


<div class="modal-footer">
<button type="button" class="btn btn-danger" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Tamaño modal
Cambie el tamaño del modal agregando la clase .modal-sm para los pequeños modales o la
clase .modal-lg para los grandes modales.
Agregue la clase de tamaño al elemento <div> con la clase .modal-dialog :
Pequeño Modal
< div class="modal-dialog modal-sm">
- 116 -
Modal grande
< div class="modal-dialog modal-lg">
Por defecto, los modales son de tamaño mediano.
Modal centrado
Centre el modal verticalmente y horizontalmente dentro de la página, con la .modal-dialog-
centered :
Ejemplo
< div class="modal-dialog modal-dialog-centered">
- 117 -
Bootstrap 4 Tooltip
Bootstrap 4 Tooltip
El componente Tooltip es un pequeño cuadro emergente que aparece cuando el usuario mueve el
puntero del mouse sobre un elemento:
Cómo crear una información sobre herramientas

Para crear una información sobre herramientas, agregue el atributo data-toggle="tooltip" a
un elemento.
Use el atributo de title para especificar el texto que se debe mostrar dentro de la información
sobre herramientas:
< a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Nota: La información sobre herramientas debe inicializarse con jQuery: seleccione el elemento
especificado y llame al método tooltip() .
El siguiente código habilitará todas las sugerencias de herramientas en el documento:
Ejemplo
< script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
- 118 -
Información sobre herramientas de posicionamiento
De forma predeterminada, la información sobre herramientas aparecerá en la parte superior del
elemento.
Utilice el atributo de data-placement para establecer la posición de la información sobre

herramientas en la parte superior, inferior, izquierda o derecha del elemento:
Ejemplo
< a href="#" data-toggle="tooltip" data-

placement="top"title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-
placement="bottom"title="Hooray!">Hover</a>
placement="left"title="Hooray!">Hover</a>
placement="right"title="Hooray!">Hover</a>
- 119 -
Bootstrap 4 Popover
Bootstrap 4 Popover
El componente Popover es similar a la información sobre herramientas; es un cuadro emergente
que aparece cuando el usuario hace clic en un elemento. La diferencia es que el popover puede
contener mucho más contenido.
Cómo crear un Popover

Para crear un popover, agregue el atributo data-toggle="popover" a un elemento.
Utilice el atributo de title para especificar el texto del encabezado del popover y use el atributo
de data-content para especificar el texto que se debe mostrar dentro del cuerpo del popover:
< a href="#" data-toggle="popover" title="Popover Header" data-

content="Some content inside the popover">Toggle popover</a>
Nota: Los Popovers se deben inicializar con jQuery: seleccione el elemento especificado y llame
al método popover() .
El siguiente código habilitará todos los popovers en el documento:
Ejemplo
< script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
- 120 -
});
</script>
Popovers de posicionamiento
Por defecto, el popover aparecerá en el lado derecho del elemento.
Use el atributo de data-placement para establecer la posición del popover en la parte superior,
inferior, izquierda o derecha del elemento:
Ejemplo
< a href="#" title="Header" data-toggle="popover" data-placement="top" dat

a-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" d
ata-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" dat
a-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" da
ta-content="Content">Click</a>
Cierre de Popovers
De manera predeterminada, el popover se cierra cuando hace clic en el elemento
nuevamente. Sin embargo, puede usar el atributo data-trigger="focus" que cerrará el
popover cuando haga clic fuera del elemento:
Ejemplo
< a href="#" title="Dismissible popover" data-toggle="popover" data-

trigger="focus" data-content="Click anywhere in the document to close this
popover">Click me</a>
- 121 -
Consejo: Si desea que se muestre el popover cuando mueve el puntero del mouse sobre el
elemento, use el atributo de data-trigger con el valor "hover":
Ejemplo
< a href="#" title="Header" data-toggle="popover" data-trigger="hover" dat

a-content="Some content">Hover over me</a>
- 122 -
Bootstrap 4 Scrollspy (Avanzado)
Bootstrap 4 Scrollspy
Scrollspy se usa para actualizar automáticamente los enlaces en una lista de navegación basada
en la posición de desplazamiento .
- 123 -
Cómo crear un Scrollspy
El siguiente ejemplo muestra cómo crear una scrollspy:
Ejemplo


<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
<li><a href="#section1">Section 1</a></li>
...
</nav>


<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while
scrolling!</p>
</div>
...
</body>
Ejemplo explicado
Agregar data-spy="scroll" al elemento que se debe usar como el área desplazable (a menudo
este es el elemento <body> ).
A continuación, agregue el atributo de data-target con un valor de id o el nombre de clase de la

barra de navegación ( .navbar ). Esto es para asegurarse de que la barra de navegación esté
conectada con el área desplazable.
Tenga en cuenta que los elementos desplazables deben coincidir con la ID de los enlaces dentro
de los elementos de la lista de la barra de navegación ( <div id="section1">coincide con <a
href="#section1"> ).
- 124 -
El atributo de data-offset opcional especifica el número de píxeles para compensar desde la
parte superior cuando se calcula la posición del desplazamiento. Esto es útil cuando sientes que
los enlaces dentro de la barra de navegación cambian el estado activo demasiado pronto o
demasiado pronto al saltar a los elementos desplazables. El valor predeterminado es 10 píxeles.
Requiere posicionamiento relativo: el elemento con data-spy = "scroll" requiere la

propiedad de posición CSS, con un valor de "relativo" para que funcione correctamente.
Menú vertical Scrollspy
En este ejemplo, usamos las píldoras de navegación verticales de Bootstrap como menú:
Ejemplo
< body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<div class="row">
<nav class="col-sm-3 col-4" id="myScrollspy">
<ul class="nav nav-pills flex-column">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
...
</ul>
</nav>
<div class="col-sm-9 col-8">
<div id="section1">
- 125 -
<h1>Section 1</h1>
<p>Try to scroll this page and look at the menu while scrolling!
</p>
</div>
...
</div>
</div>
</div>
</body>
- 126 -
Bootstrap 4 Utilities
Bootstrap 4 Utilities
Bootstrap 4 tiene muchas clases de utilidad / ayuda para diseñar rápidamente elementos sin usar
ningún código CSS.
Bordes
Use las clases de border para agregar o eliminar bordes de un elemento:
Ejemplo
< span class="border"></span>

<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
Color del borde

Agregue un color al borde con cualquiera de las clases de color de borde contextual:
- 127 -
Ejemplo
< 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 la borde
Agregue esquinas redondeadas a un elemento con las clases rounded :
Ejemplo
< span class="rounded"></span>

<span class="rounded-top"></span>
- 128 -
< span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>
Flotantes
Flote un elemento a la derecha con la clase .float-right o hacia la izquierda con .float-
left y clear floats con la clase .clearfix :
Ejemplo
< div class="clearfix">

<span class="float-left">Float left</span>
<span class="float-right">Float right</span>
</div>
Flotadores responsivos
Flote un elemento hacia la izquierda o hacia la derecha según el ancho de la pantalla, con las
clases flotantes receptivas ( .float-*-left|right - donde * es sm (> = 576px), md (> =
768px), lg (> = 992px) o xl (> = 1200px)):
- 129 -
Ejemplo
< div class="float-sm-right">Float right on small screens or

wider</div><br>
<div class="float-md-right">Float right on medium screens or
wider</div><br>
<div class="float-lg-right">Float right on large screens or
wider</div><br>
<div class="float-xl-right">Float right on extra large screens or
wider</div><br>
<div class="float-none">Float none</div>
Alinear al centro
Centre un elemento con la clase .mx-auto :
Ejemplo
< div class="mx-auto bg-warning" style="width:150px">Centered</div>
Anchura
Establezca el ancho de un elemento con las clases w- * ( .w-25 , .w-50 , .w-75 , .w-100 , .mw-
100 ):
- 130 -
Ejemplo
< div class="w-25 bg-warning">Width 25%</div>

<div class="w-50 bg-warning">Width 50%</div>
<div class="mw-100 bg-warning">Max Width 100%</div>
Altura
Establezca la altura de un elemento con las clases h- * ( .h-25 , .h-50 , .h-75 , .h-100 , .mh-
100 ):
- 131 -
Ejemplo
< div style="height:200px;background-color:#ddd">

<div class="h-25 bg-warning">Height 25%</div>
<div class="mh-100 bg-warning" style="height:500px">Max Height
100%</div>
</div>
Espaciado
Bootstrap 4 tiene una amplia gama de clases de utilidad de margen y amortiguación
sensible. Funcionan para todos los puntos de interrupción: xs (<= 576px), sm (> = 576px), md (>
= 768px), lg (> = 992px) o xl (> = 1200px)):
Las clases se utilizan en el formato: {property}{sides}-{size} para xs y {property}

{sides}-{breakpoint}-{size} para sm , md , lg y xl .
Donde la propiedad es una de:
•m - establece el margin
•p - establece el padding
Donde lados es uno de:
•t - establece margin-top o padding-top

•b - establece margin-bottom o el margin-bottom padding-bottom
•l - establece el margin-left o el padding-left
•r - establece margin-right o padding-right
•x - establece tanto padding-left como padding-right o margin-left y margin-
right
•y - establece tanto el padding-top y el padding-bottom o margin-top y el margin-

bottom
•blanco: establece un margin o padding en los 4 lados del elemento

Donde el tamaño es uno de:
- 132 -
•0 - establece el margin o el padding en 0
•1 - establece margin o padding a .25rem (4px si el tamaño de letra es 16px)
•2 - establece el margin o padding en .5rem (8px si el tamaño de letra es 16px)
•3 - establece el margin o padding en 1rem (16px si el tamaño de letra es 16px)
•4 - establece el margin o padding en 1.5rem (24px si el tamaño de letra es 16px)
•5 - establece el margin o padding en 3rem (48px si el tamaño de letra es 16px)
•auto - establece el margin en automático
Ejemplo
< div class="pt-4 bg-warning">I only have a top padding (1.5rem =

24px)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem =
48px)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem = 48px)
and a bottom padding (3rem = 48px)</div>
- 133 -
Alineación vertical
Utilice las clases de align- para cambiar la alineación de los elementos (solo funciona en
elementos en línea, en línea, en línea y en la celda de la tabla):
Ejemplo
< span class="align-baseline">baseline</span>

<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
Posición
Utilice la clase .fixed-top para hacer que cualquier elemento sea fijo / permanezca en la parte
superior de la página:
- 134 -
Ejemplo
< nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">

...
</nav>
Utilice la clase .fixed-bottom para hacer que cualquier elemento sea fijo / permanezca en
la parte inferior de la página:
Ejemplo
< nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">

...
</nav>
Utilice la clase .sticky-top para hacer que cualquier elemento sea fijo / permanezca en la parte
superior de la página cuando se desplace. Nota: Esta clase no funciona en IE11 y versiones
anteriores (lo tratará como position:relative ).
- 135 -
Ejemplo
< nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">

...
</nav>
- 136 -

El sistema de cuadrícula de Bootstrap permite hasta 12 columnas en toda la página.
Si no desea usar las 12 columnas individualmente, puede agrupar las columnas para crear
columnas más amplias:
span span span span span span span span span span span span
1 1 1 1 1 1 1 1 1 1 1 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12
El sistema de cuadrícula de Bootstrap es responsivo y las columnas se reorganizarán dependiendo

del tamaño de la pantalla: en una pantalla grande podría verse mejor con el contenido organizado
en tres columnas, pero en una pantalla pequeña sería mejor si los elementos de contenido
estuvieran apilados. Encima del otro.
Clases de cuadrícula

•.col-xl- (dispositivos .col-xl- : ancho de pantalla igual o superior a .col-xl-)
- 137 -
Reglas del sistema de cuadrícula

Algunas reglas del sistema de grillas Bootstrap 4:
•Las filas deben colocarse dentro de un .container ( .container fijo) o .container-

fluid (ancho completo) para una alineación y relleno correctos.
•Use filas para crear grupos horizontales de columnas
•El contenido debe colocarse dentro de las columnas, y solo las columnas pueden ser hijos
inmediatos de las filas
•Clases predefinidas como .row y .col-sm-4 están disponibles para hacer diseños de
cuadrícula rápidamente
•Las columnas crean canaletas (huecos entre el contenido de la columna) a través del
relleno. Ese relleno se compensa en filas para la primera y la última columna a través del
margen negativo en .rows
•Las columnas de cuadrícula se crean especificando el número de 12 columnas disponibles

que desea abarcar. Por ejemplo, tres columnas iguales usarían tres .col-sm-4
•Los anchos de columna están en porcentaje, por lo que siempre son fluidos y de tamaño
relativo a su elemento principal
•La mayor diferencia entre Bootstrap 3 y Bootstrap 4 es que Bootstrap 4 ahora usa
flexbox, en lugar de flotadores. Una gran ventaja de flexbox es que las columnas de
cuadrícula sin un ancho especificado se distribuirán automáticamente como columnas de
ancho igual. Ejemplo: Tres elementos con .col-sm serán cada uno 33.33% de ancho
automáticamente desde el punto de corte pequeño y superior. Sugerencia: si desea
obtener más información sobre Flexbox, puede leer nuestro tutorial CSS FlexBox.
- 138 -
Estructura básica de una cuadrícula Bootstrap 4
La siguiente es una estructura básica de una grilla Bootstrap 4:

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


<div class="row">
</div>
Primer ejemplo: crear una fila ( <div class="row"> ). Luego, agregue el número deseado de
columnas (etiquetas con las .col-*-* apropiadas .col-*-* ). La primera estrella (*) representa
la capacidad de respuesta: sm, md, lg o xl, mientras que la segunda estrella representa un
número, que siempre debe sumar 12 por cada fila.
Segundo ejemplo: en lugar de agregar un número a cada col , deje que bootstrap maneje el
diseño, para crear columnas de igual ancho: dos elementos "col" = 50% de ancho para cada
columna. tres cols = 33.33% de ancho para cada col. cuatro cols = 25% de ancho, etc. También
puede usar .col-sm|md|lg|xl para que las columnas sean receptivas.
- 139 -
Opciones de cuadrícula
La siguiente tabla resume cómo funciona el sistema de cuadrícula Bootstrap 4 en diferentes
tamaños de pantalla:
Muy pequeña Pequeña Mediana Grande Extra Grande

(<576px) (>=576px) (>=768px) (>=992px) (>=1200px)
Prefijo de .col- .col-sm- .col-md- .col-lg- .col-xl-
clase
Colapsado al Colapsado al Colapsado al Colapsado al
Comporta
Horizontal comienzo, comienzo, comienzo, comienzo,
miento del
siempre horizontal por horizontal por horizontal por horizontal por
grid
encima del límite encima del límite encima del límite encima del límite
Ancho del
Ninguno (auto) 540px 720px 960px 1140px
contenedor
Para Teléfonos Teléfonos
Tablets Laptops Laptops y PC’s
dispositivos vertical horizontal
# de
12 12 12 12 12
columnas
30px (15px por 30px (15px por 30px (15px por 30px (15px por 30px (15px por
Ancho
cada lado de la cada lado de la cada lado de la cada lado de la cada lado de la
separación
columna) columna) columna) columna) columna)
Anidable Si Si Si Si Si
Offsets Si Si Si Si Si
Orden de
Si Si Si Si Si
columnas
Ejemplos
Los siguientes capítulos muestran ejemplos de sistemas de cuadrícula para diferentes dispositivos
y anchos de pantalla.
- 140 -
Red Bootstrap 4 apilada a horizontal
Bootstrap 4 Grid Ejemplo: apilado a horizontal

Crearemos un sistema de grillas básico que comenzará apilado en dispositivos extra pequeños,
antes de volverse horizontal en dispositivos más grandes.
El siguiente ejemplo muestra un diseño simple de dos columnas "apiladas a horizontales", lo que
significa que dará lugar a una división del 50% / 50% en todas las pantallas, excepto en pantallas
extrapequeñas, que se acumularán automáticamente (100%):
Ejemplo: apilado a horizontal
< div class="container">

<div class="row">
<div class="col-sm-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Consejo: Los números en las .col-sm-* indican cuántas columnas debe abarcar el
div (de 12). Entonces, .col-sm-1 abarca 1 columna, .col-sm-4 abarca 4
columnas, .col-sm-6 abarca 6 columnas, etc.
Nota: asegúrese de que la suma agregue hasta 12 o menos (no es necesario que use las 12
columnas disponibles):
Consejo: Puede convertir cualquier diseño de ancho fijo en un diseño de ancho

completocambiando la clase .container-fluid a .container-fluid :
- 141 -
Ejemplo: contenedor de fluido
< div class="container-fluid">

<div class="row">
</div>
</div>
</div>
</div>
Columnas de diseño automático

En Bootstrap 4, existe una manera fácil de crear columnas de ancho igual para todos los
dispositivos: simplemente elimine el número de .col- size -* y solo use la
clase .col- size en una cantidad específica de elementos col . Bootstrap reconocerá cuántas
columnas hay, y cada columna obtendrá el mismo ancho. Las clases de tamaño determinan
cuándo las columnas deben ser receptivas:

<div class="row">
<div class="col-sm">1 of 2</div>
</div>

<div class="row">
</div>
- 142 -
- 143 -
Bootstrap 4 Grid Extra Small
Ejemplo de cuadrícula extra pequeña
dividan un 25% / 75% para TODOS los dispositivos.
Añadiremos las siguientes clases a nuestras dos columnas:
< div class="col-3">....</div>

<div class="col-9">....</div>
El siguiente ejemplo dará como resultado una división del 25% / 75% en todos los dispositivos
(extra pequeño, pequeño, mediano, grande y xgrande).
Ejemplo

<div class="row">
<div class="col-3 bg-success">
</div>
- 144 -
<div class="col-9 bg-warning">
</div>
</div>
</div>
Nota: asegúrese de que la suma agregue hasta 12 o menos (no es necesario que use las
12 columnas disponibles):
Para una división de 33.3% / 66.6%, usaría .col-4 y .col-8 (y para una división de 50% /
50%, usaría .col-6 y .col-6 ):
Ejemplo


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


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

dispositivos: simplemente elimine el número de .col-* y solo use la clase .col en una cantidad
específica de elementos col . Bootstrap reconocerá cuántas columnas hay, y cada columna
obtendrá el mismo ancho:


<div class="row">
<div class="col">1 of 2</div>
</div>


<div class="row">
</div>
El siguiente capítulo muestra cómo agregar un porcentaje de división diferente para dispositivos
pequeños.
- 146 -
Bootstrap 4 Grid Small
Ejemplo de pequeña rejilla
dividan en un 25% / 75% para dispositivos pequeños.
Sugerencia: los dispositivos pequeños se definen por tener un ancho de pantalla de 576 píxeles
a 767 píxeles .
Para dispositivos pequeños, utilizaremos las .col-sm-* .
Añadiremos las siguientes clases a nuestras dos columnas:
< div class="col-sm-3">....</div>

<div class="col-sm-9">....</div>
Ahora Bootstrap va a decir "en el tamaño pequeño, busca clases con -smen ellas y úsalas".
El siguiente ejemplo dará como resultado una división del 25% / 75% en dispositivos pequeños (y
medianos, grandes y xgrandes). En dispositivos extra pequeños, se acumulará automáticamente
(100%):
- 147 -
Ejemplo

<div class="row">
</div>
</div>
</div>
</div>
Para una división de 33.3% / 66.6%, usaría .col-sm-4 y .col-sm-8 (y para una división de
50% / 50%, usaría .col-sm-6 y .col-sm-6 ):
Ejemplo


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

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

dispositivos: simplemente elimine el número de .col-sm-* y solo use la clase .col-smen una
cantidad específica de elementos col . Bootstrap reconocerá cuántas columnas hay, y cada
columna obtendrá el mismo ancho.
Si el tamaño de la pantalla es inferior a 576px , las columnas se apilaránhorizontalmente:

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

<div class="row">
</div>
- 149 -
medianos.
- 150 -
Bootstrap 4 Grid Medium
Ejemplo de media cuadrícula

pequeños. Usamos dos divs (columnas) y les dimos una división de 25% / 75%:
< div class="col-sm-3">....</div>

<div class="col-sm-9">....</div>
Pero en dispositivos medianos el diseño puede ser mejor como una división del 50% / 50%.
Consejo: los dispositivos de tamaño medio se definen por tener un ancho de pantalla de 768 a
991 píxeles .
Para dispositivos medianos usaremos las .col-md-* :
< div class="col-sm-3 col-md-6 ">....</div>

<div class="col-sm-9 col-md-6 ">....</div>
Ahora Bootstrap va a decir "en el tamaño pequeño, mira las clases con -smen ellas y úsalas. En
el tamaño mediano, mira las clases con -mden ellas y úsalas".
El siguiente ejemplo dará como resultado una división del 25% / 75% en dispositivos pequeños y
una división del 50% / 50% en dispositivos medianos (y grandes y xgrandes).En dispositivos
extra pequeños, se acumulará automáticamente (100%):
- 151 -
Ejemplo

<div class="row">
<div class="col-sm-3 col-md-6">
</div>
<div class="col-sm-9 col-md-6">
</div>
</div>
</div>
Usando solo medio

En el ejemplo siguiente, solo especificamos la .col-md-6 (sin .col-sm-* ). Esto significa que los
dispositivos medianos, grandes y extra grandes se dividirán en un 50% / 50%, porque la clase se
amplía. Sin embargo, para dispositivos pequeños y extra pequeños, se apilará verticalmente
(100% de ancho):
Ejemplo
< div class="row">

<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
- 152 -
dispositivos: simplemente elimine el número de .col-md-* y solo use la clase .col-mden una


<div class="row">
<div class="col-md">1 of 2</div>
</div>


<div class="row">
</div>
grandes.
- 153 -
Bootstrap 4 Grid - Large
Ejemplo de Gran Grilla

pequeños y medianos. Usamos dos divs (columnas) y les dimos una división del 25% / 75% en
dispositivos pequeños, y una división del 50% / 50% en dispositivos medianos:
< div class="col-sm-3 col-md-6">....</div>

<div class="col-sm-9 col-md-6">....</div>
Pero en dispositivos grandes, el diseño puede ser mejor que una división de 33% / 66%.
Consejo: los dispositivos grandes se definen como si tuvieran un ancho de pantalla de 992
píxeles a 1199 píxeles .
Para dispositivos grandes usaremos las .col-lg-* :
< div class="col-sm-3 col-md-6 col-lg-4 ">....</div>

<div class="col-sm-9 col-md-6 col-lg-8 ">....</div>
Ahora, Bootstrap va a decir "en el tamaño pequeño, mira las clases con -smen ellas y úsalas. En
el tamaño mediano, mira las clases con -mden ellas y úsalas. En el tamaño grande, mira Clases
con la palabra -lgen ellas y utilícelas ".
El siguiente ejemplo dará como resultado una división del 25% / 75% en dispositivos pequeños,
una división del 50% / 50% en dispositivos medianos y una división del 33% / 66% en
dispositivos grandes y x grandes. En dispositivos extra pequeños, se acumulará automáticamente
(100%):
- 154 -
Ejemplo

<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4">
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
</div>
</div>
</div>
Usando solo grande

En el ejemplo siguiente, solo especificamos la .col-lg-6 (sin .col-md-* y / o .col-sm-
* ). Esto significa que los dispositivos grandes y los grandes se dividirán en un 50% / 50%. Sin
embargo, para dispositivos medianos, pequeños Y extra pequeños, se apilará verticalmente
(100% de ancho):
Ejemplo

<div class="row">
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
- 155 -
</div>
</div>

dispositivos: simplemente elimine el número de .col-lg-* y solo use la clase .col-lgen una


<div class="row">
<div class="col-lg">1 of 2</div>
</div>


<div class="row">
</div>
- 156 -
Bootstrap 4 Grid - Extra Large
Ejemplo de cuadrícula grande

pequeños y medianos. Usamos dos divs (columnas) y les dimos una división de 25% / 75% en
dispositivos pequeños, y una división de 50% / 50% en dispositivos medianos y una división de
33% / 66% en dispositivos grandes:
< div class="col-sm-3 col-md-6 col-lg-4">....</div>

<div class="col-sm-9 col-md-6 col-lg-8">....</div>
Pero en dispositivos xlarge el diseño puede ser mejor que una división del 20% / 80%.
Los dispositivos extragrandes se definen por tener un ancho de pantalla de 1200 píxeles o más .
Para dispositivos .col-xl-* clases .col-xl-* :
< div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 ">....</div>

<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 ">....</div>
El siguiente ejemplo dará como resultado una división del 25% / 75% en dispositivos pequeños,
una división del 50% / 50% en dispositivos medianos y una división del 33% / 66% en grandes y
una división del 20% / 80% en dispositivos xlarge. En dispositivos extra pequeños, se acumulará
automáticamente (100%):
- 157 -
Ejemplo

<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
</div>
</div>
</div>
Nota: asegúrese de que la suma siempre se suma a 12.
Usando Only XLarge

En el ejemplo siguiente, solo especificamos la .col-xl-6 (sin .col-lg-* , .col-md-*y /
o .col-sm-* ). Esto significa que los dispositivos xlarge se dividirán en un 50% / 50%.Sin
embargo, para dispositivos grandes, medianos, pequeños Y extra pequeños, se apilará
verticalmente (100% de ancho):
Ejemplo

<div class="row">
<div class="col-xl-6">
</div>
<div class="col-xl-6">
</div>
</div>
</div>
- 158 -
dispositivos: simplemente elimine el número de .col-xl-* y solo use la clase .col-xlen una
Si el tamaño de la pantalla es inferior a 1200 px , las columnas se apilarán horizontalmente:


<div class="row">
<div class="col-xl">1 of 2</div>
</div>


<div class="row">
</div>
- 159 -
Ejemplos de Bootstrap 4 Grid
A continuación, hemos recopilado algunos ejemplos de diseños de cuadrícula Bootstrap 4.
Tres columnas iguales

Use la clase .col en un número específico de elementos y Bootstrap reconocerá cuántos
elementos hay (y creará columnas de igual ancho). En el ejemplo a continuación, utilizamos tres
elementos col, que obtiene un ancho de 33.33% cada uno.
Ejemplo
< div class="row">

<div class="col">col</div>
</div>
Tres columnas iguales que usan números

También puede usar números para controlar el ancho de la columna. Solo asegúrese de que la
suma agregue hasta 12 o menos (no es necesario que use las 12 columnas disponibles):
- 160 -
Ejemplo
< div class="row">

<div class="col-4">col-4</div>
</div>
Tres columnas desiguales

Para crear columnas desiguales, debes usar números. El siguiente ejemplo creará una división de
25% / 50% / 25%:
Ejemplo
< div class="row">

</div>
Establecer el ancho de una columna

Sin embargo, es suficiente establecer solo el ancho de una columna, y hacer que las columnas de
hermanos cambien su tamaño automáticamente. El siguiente ejemplo creará una división de
25% / 50% / 25%:
- 161 -
Ejemplo
< div class="row">

<div class="col">col-3</div>
<div class="col">col-3</div>
</div>
Más columnas iguales
Ejemplo


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


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

- 162 -
< div class="row">
</div>
Más columnas desiguales
Ejemplo


<div class="row">
<div class="col-8">1 of 2</div>
</div>


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

<div class="row">
</div>
Altura igual
Si una de las columnas es más alta que la otra (debido a la altura del texto o del CSS), el resto
seguirá:
Ejemplo
< div class="row">

<div class="col">Lorem ipsum...</div>
</div>
- 164 -
Columnas anidadas
El siguiente ejemplo muestra cómo crear un diseño de dos columnas, con otras dos columnas
dentro de una de las columnas:
Ejemplo
< div class="row">

<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
</div>
</div>
</div>
Clases receptivas

- 165 -
•.col-xl- (dispositivos .col-xl- : ancho de pantalla igual o superior a .col-xl-)
Apilado a horizontal
El siguiente ejemplo muestra cómo crear un diseño de columna que comienza apilado en
dispositivos extra pequeños, antes de volverse horizontal en dispositivos más grandes (sm, md, lg
y xl):
Ejemplo
< div class="row">

<div class="col-sm-9">col-sm-9</div>
<div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
</div>
- 166 -
Mezclar y combinar
Ejemplo

<div class="row">
<div class="col-6 col-sm-9">col-6 col-sm-9</div>
<div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>

<div class="row">
<div class="col-7 col-lg-8">col-7 col-lg-8</div>
<div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>

<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
<div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>
- 167 -

Tutorial Bootstrap 4

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tutorial Bootstrap 4

Uploaded by

Copyright:

Available Formats

Tutorial

¡Bootstrap 4 se puede descargar y usar completamente gratis!

Pruébelo usted mismo Ejemplos

< div class="jumbotron text-center">

Si necesita la compatibilidad con IE8-9, use Bootstrap 3. Es la versión más estable

W3.CSS es más pequeño, más rápido y más fácil de usar.

Si desea aprender W3.CSS, vaya a nuestro Tutorial W3.CSS .

•Bootstrap incluye plantillas de diseño basadas en HTML y CSS para tipografías,

•Bootstrap también le brinda la capacidad de crear fácilmente diseños responsivos

¿Qué es el diseño web responsive?

Bootstrap 3 vs. Bootstrap 4

Si necesita la compatibilidad con IE8-9, use Bootstrap 3. Es la versión más estable de

¿Por qué usar Bootstrap 4?

•Funciones de respuesta: el CSS responsivo de Bootstrap se ajusta a teléfonos, tabletas

•Compatibilidad con el navegador: Bootstrap 4 es compatible con todos los

Dónde obtener Bootstrap 4?

•Incluye Bootstrap 4 desde un CDN

•Descargue Bootstrap 4 desde getbootstrap.com

Cree la primera página web con Bootstrap 4

< !DOCTYPE html>

2. Bootstrap 4 es móvil primero

Para garantizar una reproducción adecuada y un zoom táctil, agregue la siguiente

< meta name="viewport" content="width=device-width, initial-scale=1">

Hay dos clases de contenedor para elegir:

1.La clase .container proporciona un contenedor responsivo de ancho fijo

Dos páginas básicas de Bootstrap 4

< !DOCTYPE html>

Ejemplo de fluido contenedor

< !DOCTYPE html>

Sistema Bootstrap 4 Grid

span 4 span 4 span 4

El sistema de cuadrícula responde y las columnas se reorganizarán automáticamente dependiendo

•.col- (dispositivos extra pequeños - ancho de pantalla inferior a 576px)

Estructura básica de una cuadrícula Bootstrap 4

<!-- Controla el ancho de las columnas, y cómo deben mostrarse en diferentes

A continuación, hemos recopilado algunos ejemplos de diseños de cuadrícula de Bootstrap 4

< div class="row">

< div class="row">

Dos columnas desiguales que responden

< div class="row">

Configuración predeterminada de Bootstrap 4

La font-family predeterminada es "Helvetica Neue", Helvetica, Arial, sans-serif.

h1 Bootstrap heading (2.5rem = 40px)

h2 Bootstrap heading (2rem = 32px)

h3 Bootstrap heading (1.75rem = 28px)

h4 Bootstrap heading (1.5rem = 24px)

h5 Bootstrap heading (1.25rem = 20px)

h6 Bootstrap heading (1rem = 16px)

<h1 class="display-1">Display 1</h1>

<h1>h1 heading <small>secondary text</small></h1>

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text

h6 heading secondary text

<p>Use the mark element to <mark style="background-color:#fcf8e3;padding:.2em;">highlight</mark> text.</p>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<pre style="font-family:Consolas,'courier new';">Text in a pre element

This text indicates smccess.