100% encontró este documento útil (2 votos)

1K vistas

Tutorial Bootstrap 4

Este documento proporciona una introducción a Bootstrap 4. Explica cómo comenzar con Bootstrap 4, incluido dónde obtenerlo y cómo crear las primeras páginas web. Luego cubre varios componentes clave como el sistema de cuadrícula, tipografía, colores, tablas, imágenes y alertas. Proporciona ejemplos de código para cada uno y explica cómo personalizarlos y hacerlos receptivos.

Cargado por

xhanzary

Derechos de autor

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

100% encontró este documento útil (2 votos)

1K vistas

Tutorial Bootstrap 4

Cargado por

xhanzary

Derechos de autor

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

Está en la página 1/ 167

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
Columnas de diseño automático........................................................................................................168
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
Columnas de diseño automático........................................................................................................171
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
Columnas de diseño automático........................................................................................................175
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
Columnas de diseño automático........................................................................................................178
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
Columnas de diseño automático........................................................................................................181
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>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor..</p>
<p>Ut enim ad..</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor..</p>
<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:

- 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>

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 charset="utf-8">
<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>

<div class="container">
<h1>My First Bootstrap Page</h1>
<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>

- 14 -
p.min.js">< /script>
</head>
<body>

<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<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:

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

dispositivos -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<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">

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">

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">

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)

h3 Bootstrap heading (1.75rem = 28px)

h4 Bootstrap heading (1.5rem = 24px)

h5 Bootstrap heading (1.25rem = 20px)

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
h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text

h6 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

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

<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">

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">

- 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">

- 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">

<div class="container">
<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>

Inténtalo tú mismo "

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">
<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>

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">

<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>

- 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">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<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
< div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-
toggle-split" data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>

Grupo de botones vertical c / Dropdown

Ejemplo
< div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle"data-
toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">

- 50 -
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</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>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

- 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">

- 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">

Etiquetas de barra de progreso

Agregue texto dentro de la barra de progreso para mostrar el porcentaje visible:

Ejemplo
< div class="progress">
<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

- 57 -
< /div>

Barras de progreso a rayas

Use la .progress-bar-striped para agregar rayas a las barras de progreso:

- 58 -
Ejemplo

< div class="progress">

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">

<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="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</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

< 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 active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

Estado deshabilitado
La clase .disabled se usa para enlaces que parecen no hacer clic:

Ejemplo

< ul class="pagination">
<li class="page-item disabled"><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="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</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">

<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="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

<ul class="pagination pagination-sm">

Inténtalo tú mismo "

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

< ul class="list-group">
<li class="list-group-item active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>

Artículo desactivado

Para deshabilitar un elemento, agregue la clase .disabled :

Ejemplo

< ul class="list-group">
<li class="list-group-item disabled">Disabled item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third 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

< ul class="list-group">
<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">
<div class="card-body">
<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>

Inténtalo tú mismo "

- 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">

<button type="button" class="btn btn-primary dropdown-toggle"data-
toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</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>

Inténtalo tú mismo "

- 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

< div class="btn-group">

<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-
toggle-split" data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</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">

Lorem ipsum dolor text....
</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">

Lorem ipsum dolor text....
</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 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">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>

<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" data-
parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse">
<div class="card-body">
Lorem ipsum..
</div>
</div>
</div>

<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" data-
parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse">
<div class="card-body">
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 class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<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

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">

<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</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">

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>

Inténtalo tú mismo "

- 88 -
Pastillas con menú desplegable

Ejemplo

< ul class="nav nav-pills">

<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-
toggle="dropdown"href="#">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>

Pestañas con menú desplegable

- 89 -
Ejemplo

< ul class="nav nav-tabs">

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

- 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

- 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">

- 93 -
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</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

- 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">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>

- 95 -
</li>
</ul>
</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">

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

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

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>

- 97 -
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</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

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

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

- 98 -

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop"data-
toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>

Inténtalo tú mismo "

Navbar formularios y botones

Agregue un elemento <form> con class="form-inline" para agrupar entradas y botones uno
al lado del otro:

Ejemplo

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

<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

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

Inténtalo tú mismo "

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

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

- 100 -
<a class="nav-link" href="#">Link 2</a>
</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>

Inténtalo tú mismo "

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">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
<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>

- 106 -
Bootstrap 4 Entradas de Formularios
❮ Anterior Siguiente ❯

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">

- 107 -
< div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>

Bootstrap Textarea

El siguiente ejemplo contiene un área de texto:

Ejemplo

< div class="form-group">

<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">

<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<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 class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check form-check-inline disabled">
<label class="form-check-label">
<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

< div class="form-group">

<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">

- 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>

</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>

- 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>

Inténtalo tú mismo "

- 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>
<a href="#" data-toggle="tooltip" data-
placement="left"title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-
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

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="navbar-nav">
<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="container-fluid">
<div class="row">
<nav class="col-sm-3 col-4" id="myScrollspy">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<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>

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>

Radio de la borde
Agregue esquinas redondeadas a un elemento con las clases rounded :

Ejemplo

< span class="rounded"></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>

Inténtalo tú mismo "

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="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</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="h-50 bg-warning">Height 50%</div>
<div class="h-75 bg-warning">Height 75%</div>
<div class="h-100 bg-warning">Height 100%</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 -
Sistema Bootstrap 4 Grid

Sistema Bootstrap 4 Grid

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
El sistema de cuadrícula Bootstrap 4 tiene cinco clases:

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

- 137 -
Consejo: cada clase aumenta, de modo que si desea establecer los mismos anchos para sm y md ,
solo necesita especificar sm .

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 class="col-*-*"></div>
<div class="col-*-*"></div>
<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 siempre debe sumar 12 por cada fila.

- 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 class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6">
<p>Sed ut perspiciatis...</p>
</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 class="col-sm">2 of 2</div>
</div>

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

- 142 -
- 143 -
Bootstrap 4 Grid Extra Small

Ejemplo de cuadrícula extra pequeña

Supongamos que tenemos un diseño simple con dos columnas. Queremos que las columnas se
dividan un 25% / 75% para TODOS los dispositivos.

Añadiremos las siguientes clases a nuestras dos columnas:

< div class="col-3">....</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="container-fluid">

<div class="row">
<div class="col-3 bg-success">
<p>Lorem ipsum...</p>
</div>

- 144 -
<div class="col-9 bg-warning">
<p>Sed ut perspiciatis...</p>
</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="container-fluid">
<div class="row">
<div class="col-4 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-8 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>

<div class="container-fluid">
<div class="row">
<div class="col-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-6 bg-warning">
<p>Sed ut perspiciatis...</p>

- 145 -
</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-* 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:

El siguiente capítulo muestra cómo agregar un porcentaje de división diferente para dispositivos
pequeños.

- 146 -
Bootstrap 4 Grid Small
❮ Anterior Siguiente ❯

Ejemplo de pequeña rejilla

Supongamos que tenemos un diseño simple con dos columnas. Queremos que las columnas se
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>

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="container-fluid">

<div class="row">
<div class="col-sm-3 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>

Inténtalo tú mismo "

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-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="container-fluid">
<div class="row">
<div class="col-sm-4 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>

- 148 -
< div class="container-fluid">
<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>

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-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 class="col-sm">1 of 2</div>
<div class="col-sm">2 of 2</div>
</div>

- 149 -
El siguiente capítulo muestra cómo agregar un porcentaje de división diferente para dispositivos
medianos.

- 150 -
Bootstrap 4 Grid Medium

Ejemplo de media cuadrícula

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%:

< div class="col-sm-3">....</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>

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="container-fluid">

<div class="row">
<div class="col-sm-3 col-md-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>

Nota: asegúrese de que la suma agregue hasta 12 o menos (no es necesario que use las
12 columnas disponibles):

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">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>

- 152 -
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-md-* y solo use la clase .col-mden 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 768px , las columnas se apilaránhorizontalmente:

El siguiente capítulo muestra cómo agregar un porcentaje de división diferente para dispositivos
grandes.

- 153 -
Bootstrap 4 Grid - Large

Ejemplo de Gran Grilla

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:

< div class="col-sm-3 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>

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="container-fluid">

<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>

Nota: asegúrese de que la suma agregue hasta 12 o menos (no es necesario que use las
12 columnas disponibles):

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="container-fluid">

<div class="row">
<div class="col-lg-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-lg-6">
<p>Sed ut perspiciatis...</p>
</div>

- 155 -
</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-lg-* y solo use la clase .col-lgen 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 992px , las columnas se apilaránhorizontalmente:

- 156 -
Bootstrap 4 Grid - Extra Large

Ejemplo de cuadrícula grande

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:

< div class="col-sm-3 col-md-6 col-lg-4">....</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>

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="container-fluid">

<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
<p>Sed ut perspiciatis...</p>
</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="container-fluid">

<div class="row">
<div class="col-xl-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-xl-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>

- 158 -
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-xl-* y solo use la clase .col-xlen 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 1200 px , las columnas se apilarán horizontalmente:

- 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">

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">

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">

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">

Más columnas iguales

Ejemplo

- 162 -
< div class="row">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3 of 6</div>
<div class="col">4 of 6</div>
<div class="col">5 of 6</div>
<div class="col">6 of 6</div>
</div>

Más columnas desiguales

Ejemplo

- 163 -

<div class="row">
<div class="col-4">1 of 4</div>
<div class="col-6">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</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 class="col">col</div>
<div class="col">col</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">

Clases receptivas
El sistema de cuadrícula Bootstrap 4 tiene cinco clases:

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

- 165 -
•.col-xl- (dispositivos .col-xl- : ancho de pantalla igual o superior a .col-xl-)
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 .

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">

- 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>

<!-- 25%/75% split on small devices, a 50%/50% split on medium devices,

and a 33%/66% split on large and xlarge devices. On extra small devices, it
will automatically stack (100%) -->
<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>

Inténtalo tú mismo "

- 167 -

También podría gustarte

Curso HTML y CSS Completo Con Dalto - Temario
Aún no hay calificaciones
Curso HTML y CSS Completo Con Dalto - Temario
3 páginas
Tutorial Bootstrap
60% (5)
Tutorial Bootstrap
43 páginas
Bootstrap 5 Ya
Aún no hay calificaciones
Bootstrap 5 Ya
176 páginas
Programe Juegos con HTML5
De Everand
Programe Juegos con HTML5
Francisco Javier Arce Anguiano
Aún no hay calificaciones
Node, Js
100% (1)
Node, Js
16 páginas
CSS3 y Javascript Avanzado
100% (4)
CSS3 y Javascript Avanzado
89 páginas
Javascript PDF
100% (3)
Javascript PDF
131 páginas
UF1303 - Elaboración de hojas de estilo
De Everand
UF1303 - Elaboración de hojas de estilo
Lorena Rodríguez Cortés
Aún no hay calificaciones
HTML5, CSS3 y JQuery: Gráficos y diseño web
De Everand
HTML5, CSS3 y JQuery: Gráficos y diseño web
Juan Antonio Recio Garcia
5/5 (2)
Manual de Desafíos - JavaScript
Aún no hay calificaciones
Manual de Desafíos - JavaScript
23 páginas
Temario Curso Bootstrap 4
0% (1)
Temario Curso Bootstrap 4
5 páginas
Curso Bootstrap
Aún no hay calificaciones
Curso Bootstrap
99 páginas
Ejercicio de Inicio HTML5
Aún no hay calificaciones
Ejercicio de Inicio HTML5
18 páginas
Testing y Documentación de Servicios REST
Aún no hay calificaciones
Testing y Documentación de Servicios REST
95 páginas
Javascript 3 Formularios Validaciones
Aún no hay calificaciones
Javascript 3 Formularios Validaciones
8 páginas
PHP + Mysql Desde 0
100% (1)
PHP + Mysql Desde 0
216 páginas
Artmediahernan Beati Html5ycss3 111107131846 Phpapp02
100% (5)
Artmediahernan Beati Html5ycss3 111107131846 Phpapp02
166 páginas
2DAM Programacion Multimedia y Dispositivos Moviles
Aún no hay calificaciones
2DAM Programacion Multimedia y Dispositivos Moviles
16 páginas
Bootstrap Css
Aún no hay calificaciones
Bootstrap Css
35 páginas
Desarrollo Web Agil Con AngularJS de Carlos Azaustre
100% (9)
Desarrollo Web Agil Con AngularJS de Carlos Azaustre
82 páginas
Despliegue de Una Aplicación: Desarrollo Web
100% (1)
Despliegue de Una Aplicación: Desarrollo Web
57 páginas
Libro Js
100% (2)
Libro Js
129 páginas
Fundamentos de JavaScript y AJAX Jose Manuel Alarcon Krasis Press
86% (7)
Fundamentos de JavaScript y AJAX Jose Manuel Alarcon Krasis Press
40 páginas
Programación en PHP
100% (1)
Programación en PHP
32 páginas
Frontend Vs Backend (Ebook)
Aún no hay calificaciones
Frontend Vs Backend (Ebook)
18 páginas
Manual Completo PHP
100% (3)
Manual Completo PHP
41 páginas
Entendi Endo Angular
100% (4)
Entendi Endo Angular
118 páginas
Framework Express
Aún no hay calificaciones
Framework Express
5 páginas
Guia de Estudio de PHP
Aún no hay calificaciones
Guia de Estudio de PHP
80 páginas
Java Orientado A Objetos
86% (14)
Java Orientado A Objetos
80 páginas
Bootstrap PDF
Aún no hay calificaciones
Bootstrap PDF
96 páginas
Nodejs Express Ejs PDF
Aún no hay calificaciones
Nodejs Express Ejs PDF
46 páginas
XML
Aún no hay calificaciones
XML
28 páginas
XAML
Aún no hay calificaciones
XAML
43 páginas
Guía MySQL
100% (5)
Guía MySQL
48 páginas
C# Ejercicios
Aún no hay calificaciones
C# Ejercicios
33 páginas
Fundamentos de Programacion en Lenguaje
Aún no hay calificaciones
Fundamentos de Programacion en Lenguaje
371 páginas
Desarrollando en El Framework Django
Aún no hay calificaciones
Desarrollando en El Framework Django
75 páginas
Html5 Canvas Es
0% (1)
Html5 Canvas Es
202 páginas
Eloquent Javascript
100% (4)
Eloquent Javascript
146 páginas
MongoDB El Principio
100% (4)
MongoDB El Principio
30 páginas
Tutorial Completo MySql
100% (2)
Tutorial Completo MySql
143 páginas
Ejercicios de Diseño de Bases de Datos
100% (1)
Ejercicios de Diseño de Bases de Datos
6 páginas
Git y GitHub Con Ramas
100% (1)
Git y GitHub Con Ramas
16 páginas
Manual de React
Aún no hay calificaciones
Manual de React
68 páginas
CSS3 y Javascript Avanzado
Aún no hay calificaciones
CSS3 y Javascript Avanzado
89 páginas
Aprende Drupal 7. El mejor Framework-CMS
De Everand
Aprende Drupal 7. El mejor Framework-CMS
Ángel Arias
Aún no hay calificaciones
DATABASE - Del modelo conceptual a la aplicación final en Access, Visual Basic, Pascal, Html y Php
De Everand
DATABASE - Del modelo conceptual a la aplicación final en Access, Visual Basic, Pascal, Html y Php
Olga Maria Stefania Cucaro
Aún no hay calificaciones
Domine JavaScript (4ª Edición)
De Everand
Domine JavaScript (4ª Edición)
Pablo Enrique Fernández
Aún no hay calificaciones
UF2176 - Definición y manipulación de datos
De Everand
UF2176 - Definición y manipulación de datos
Antonio Cala Hurtado
Aún no hay calificaciones
Aplicaciones web con PHP
De Everand
Aplicaciones web con PHP
Héctor Flórez Fernández
Aún no hay calificaciones
Desarrollo de aplicaciones web en el entorno servidor. IFCD0210
De Everand
Desarrollo de aplicaciones web en el entorno servidor. IFCD0210
Rafael Luis Granados La Paz
Aún no hay calificaciones
TypeScript, Curso Práctico
De Everand
TypeScript, Curso Práctico
Carlos Serrano
Aún no hay calificaciones
"Fundamentos del Desarrollo Web: Curso Completo para Principiantes"
De Everand
"Fundamentos del Desarrollo Web: Curso Completo para Principiantes"
Juan Martinez
Aún no hay calificaciones
UF1304 - Elaboración de Plantillas y Formularios
De Everand
UF1304 - Elaboración de Plantillas y Formularios
Jesús Moya Cortés
Aún no hay calificaciones
Pruebas de funcionalidades y optimización de páginas web. IFCD0110
De Everand
Pruebas de funcionalidades y optimización de páginas web. IFCD0110
Alberto Carretero Arribas
Aún no hay calificaciones
Aprende a Programar Ajax y jQuery
De Everand
Aprende a Programar Ajax y jQuery
Ángel Arias
1/5 (1)
UF2177 - Desarrollo de programas en el entorno de la base de datos
De Everand
UF2177 - Desarrollo de programas en el entorno de la base de datos
Jorge Martínez Mostazo
Aún no hay calificaciones
Aprender jQuery con 100 ejercicios prácticos
De Everand
Aprender jQuery con 100 ejercicios prácticos
José Antonio Gómez Gutíerrez
Aún no hay calificaciones
Administración básica de bases de datos con ORACLE 12c SQL: Prácticas y ejercicios
De Everand
Administración básica de bases de datos con ORACLE 12c SQL: Prácticas y ejercicios
Antolín Muñoz Chaparro
Aún no hay calificaciones
Elaboración de plantillas y formularios. IFCD0110
De Everand
Elaboración de plantillas y formularios. IFCD0110
Sandra Cabello Jurado
Aún no hay calificaciones
Desarrollo Web en Java
De Everand
Desarrollo Web en Java
Jorge Arrambide
3/5 (3)
Factura E001-000110
100% (1)
Factura E001-000110
1 página
Parcial Primer Corte 15
Aún no hay calificaciones
Parcial Primer Corte 15
9 páginas
Act 1 - Isum - 6104 - ProgWeb - RubenRodriguez
Aún no hay calificaciones
Act 1 - Isum - 6104 - ProgWeb - RubenRodriguez
1 página
Itinerario de Aprendizaje: CSS HTML
Aún no hay calificaciones
Itinerario de Aprendizaje: CSS HTML
2 páginas
Morty
Aún no hay calificaciones
Morty
10 páginas
HTML Y CSS: El Lenguaje de La Red
Aún no hay calificaciones
HTML Y CSS: El Lenguaje de La Red
7 páginas
DAW Lab03 PHP - Formularios
Aún no hay calificaciones
DAW Lab03 PHP - Formularios
7 páginas
Funciones de Las Propiedades CSS Más Usadas
Aún no hay calificaciones
Funciones de Las Propiedades CSS Más Usadas
3 páginas
Clase 3 - Introducción A Wordpress
Aún no hay calificaciones
Clase 3 - Introducción A Wordpress
14 páginas
Introducción Al Desarrollo Web
Aún no hay calificaciones
Introducción Al Desarrollo Web
29 páginas
Recibo Camara PDF
Aún no hay calificaciones
Recibo Camara PDF
1 página
Buenas Practicas SEO 1
Aún no hay calificaciones
Buenas Practicas SEO 1
6 páginas
Manual de Taller Chrysler Neon
Aún no hay calificaciones
Manual de Taller Chrysler Neon
1 página
Factura Electronica - Impresion 144 ALP.
Aún no hay calificaciones
Factura Electronica - Impresion 144 ALP.
1 página
Etiquetas HTML
Aún no hay calificaciones
Etiquetas HTML
4 páginas
Java Script
Aún no hay calificaciones
Java Script
218 páginas
Clase 1 HTML Verdadero
Aún no hay calificaciones
Clase 1 HTML Verdadero
8 páginas
Men'S Fashion BOX: Marketing Digital 2
Aún no hay calificaciones
Men'S Fashion BOX: Marketing Digital 2
38 páginas
CT1104617 Sabancuy
Aún no hay calificaciones
CT1104617 Sabancuy
3 páginas
Diseño Web - Semana 4
Aún no hay calificaciones
Diseño Web - Semana 4
7 páginas
Muestra998 07-03-2022
Aún no hay calificaciones
Muestra998 07-03-2022
41 páginas
Plan de Estudios 11 Informática
Aún no hay calificaciones
Plan de Estudios 11 Informática
2 páginas
Brochure Web Tienda Online Online 1
Aún no hay calificaciones
Brochure Web Tienda Online Online 1
9 páginas
Checkout - Tienda en Línea - Rena Ware Perú
Aún no hay calificaciones
Checkout - Tienda en Línea - Rena Ware Perú
2 páginas
Keywords A
Aún no hay calificaciones
Keywords A
3 páginas
Tarea 5 2.0
Aún no hay calificaciones
Tarea 5 2.0
8 páginas
Gestión de Datos Corporativos
Aún no hay calificaciones
Gestión de Datos Corporativos
19 páginas
Actividad para Enviar
Aún no hay calificaciones
Actividad para Enviar
12 páginas