¡Esta es una revisión vieja del documento!

Bootstrap

Framework CSS.

Web oficial

Instalación

Descarga: https://getbootstrap.com/docs/4.5/getting-started/download/

Compiled CSS and JS: Bootstrap listo para usar
Source files: ficheros para el desarrollo de Boostrap (requiere usar compiladores SASS)

Lo normal es descargar la versión compilada. Contiene las carpetas css y js.

Boostrap también necesita jQuery y Popper:

Plantilla con los archivos de Bootstrap alojados en un CDN:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
 
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

Si no se incluye la etiqueta meta con el atribute name con valor viewport, la web no se adaptará correctamente en dispositivos móviles.

Conceptos

Grid

Bootstrap se base en un concepto de grid (rejilla) de 12 columnas de forma que podemos definir el tamaño de cada caja, por ejemplo, una caja ocupa 12 columnas (el total del ancho) o 6 (la mitad)

Las filas (rows) son grupos horizontales de columnas (columnms).

Las columnas deben ir directamente dentro de las filas:

<div class="row">
    <div class="col">
        <h1>Título</h1>
        <p>Contenido</p>
    </div>
</div>

Para poder usar filas y columnas, deben ir dentro de un contenedor que puede ser con un máximo establecido (container) o fluido (container-fluid):

<div class="container">
    <div class="row">
        <div class="col">
           CONTENIDO
        </div>
    </div>
</div>

Filas

Para que eliminar los padding que pone bootstrap a las columnas:

<div class="row no-gutters">
 
</div>

Columnas

Los puntos de ruptura según las columnas:

col: menos de 544px (smartphones)
col-sm: Entre 544px y 768px
col-md: entre 768 y 992px (tablets)
col-lg: entre 992px y 1200px (ordenadores)
col-xl: más de 1200px (ordenadores)

Si uso col-12 estamos indicando que para tamaños de pantalla menores a 544px, lo que contenga esa elemento, ocupará 12 columnas en el grid de Bootstrap. Podemos combinar y hacer cosas como:

<div class="col-12 col-md-6">
    CONTENIDO
</div>

Cuando estamos visualizando en pantallas superiores a 768, el contenido ocupará 6 columnas.

Con col-auto indicamos que el contenido de esa columna coja el espacio necesario según el contenido.

La clase col indica que la columna cogerá todo el ancho que esté disponible.

Separadores

Si queremos romper ciertas columnas para que continúen debajo (sin meter filas), podemos usar:

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

El div con la clase w-100 añade un div con una anchura del 100 %

Alineación vertical

Utilizando Flexbox.

<div class="container">
    <div class="row align-items-center">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</div>

Si queremos una alineación independiente:

<div class="container">
    <div class="row">
        <div class="col align-self-start"></div>
        <div class="col align-self-center"></div>
        <div class="col align-self-end"></div>
    </div>
</div>

Alineación horizontal

<div class="container">
    <div class="row justify-content-center">
        <div class="col-4"></div>
        <div class="col-4"></div>
    </div>
</div>

Otras clases:

justify-content-around
justify-content-between
justify-content-start
justify-content-end

Offset

<div class="container">
    <div class="row">
        <div class="col-auto offset-4"></div>
    </div>
</div>

La clase offset-4 añade un espacio de 4 columnas. No se pueden añadir espaciados después de las columnas, solo antes.

Podemos usar las clases offset para centrar horizontalmente:

<div class="container">
    <div class="row">
        <div class="col-4 offset-4"></div>
    </div>
</div>

Como el elemento ya ocupa 4 columnas (col-4), nos quedan libres 8. Si queremos centrar, sería la mitad de 8, es decir, necesitaríamos un offset-4.

Desde que Bootstrap usa Flexbox, es más recomendable usar la clase justify-content-center en las filas que utilizar offset.

Las clases offset también admiten el selector de tamaño:

offset-sm-*
offset-md-*
offset-lg-*
offset-xl-*

Reordenamiento

<div class="container">
    <div class="row">
        <div class="col-2">Columna 1</div>
        <div class="col-2">Columna 2</div>
        <div class="col-2">Columna 3</div>
        <div class="col-2">Columna 4</div>                
    </div>
</div>

Si queremos que una columna ocupe una posición que no sea la predeterminada, utilizaremos las clases order-* (del 1 al 12):

<div class="container">
    <div class="row">
        <div class="col-2 order-2">Columna 1</div>
        <div class="col-2 order-1">Columna 2</div>
        <div class="col-2 order-4">Columna 3</div>
        <div class="col-2 order-3">Columna 4</div>                
    </div>
</div>

De esta manera, el orden será Columna 2, Columna 1, Columna 4 y Columna 3.

También podemos usar estas clases para que el orden solo se cambie en ciertos tamaños de pantalla:

<div class="container">
    <div class="row">
        <div class="col-2 order-2 order-md-1">Columna 1</div>
        <div class="col-2 order-1 order-md-2">Columna 2</div>
        <div class="col-2 order-4 order-md-3">Columna 3</div>
        <div class="col-2 order-3 order-md-4">Columna 4</div>                
    </div>
</div>

En ese ejemplo, a partir de tamaños medianos, volverá a recuperar el orden original.

Columnas anidadas

<div class="container">
    <div class="row">
        <div class="col-md-6">
            Columna 1
            <div class="row">
                <div class="col">Columna 11</div>
                <div class="col">Columna 12</div>
            </div>
        </div>
        <div class="col-md-6">
            Columna 2
            <div class="row">
                <div class="col">Columna 21</div>
                <div class="col">Columna 22</div>
            </div>
        </div>
    </div>
</div>

Elementos

Márgenes

Utilidades diseño adaptable

    <div class="container">
        <div clasS="row">
            <div class="col d-block d-sm-none">
                XS - Extra small
            </div>
            <div class="col d-none d-sm-block d-md-none">
                SM - Small
            </div>            
            <div class="col d-none d-md-block d-lg-none">
                MD - Medium
            </div>            
            <div class="col d-none d-lg-block d-xl-none">
                LG - Large
            </div>            
            <div class="col d-none d-xl-block">
                XL - Extra Large
            </div>            
        </div>
    </div>

d-block: mostrar en tamaños extra pequeños.
d-sm-none: no muestra un elemento en tamaños pequeños.

Tipografía

text-muted: texto el color gris.
h1 - h6: simula tamaños de encabezados.
display-1 - display-4: encabezados de mayor tamaño y trazos más finos.
lead: para resaltar algún texto (aumenta un poco el tamaño y cambia la tipografía)
text-justify: justifica el texto
text-center: centra el texto.
text-right: alinear texto a la derecha.
text-left: alinear texto a la izquierda.
text-lowercase: pasa todo a minúsculas
text-uppercase: pasa a mayúsculas
text-capitalize: la primera letra de cada palabra en mayúscula.
font-weight-bold: negrita.
font-weight-italic: cursiva.
font-weight-normal: normal.
blockquote: citas.
blockquote-footer

Las clases de alineación también permiten los tamaños de pantalla:

<p class="text-left text-sm-right">Alineado a la derecha en dispositivo pequeños en adelante</p>

<p class="text">Este texto es más importante que los demás</p>
 
<h1 class="display-1">Encabezado llamativo</h1>
 
<h2 class="h1">Encabezado de nivel 2 con aspecto de h1</h2>
 
<blockquote class="blockquote blockquote-reverse">
    <p>Una cita de alquien famoso</p>
    <footer class="blockquote-footer">Alguien famoso</footer>
</blockquote>

Bootstrap también tiene estilos para las etiquetas:

mark
del
ins
s: tachar texto.
u: subrayar texto.
strong: resalta con negrita.
em: realiza una cursiva/itálica.
small
code
kbd

Imágenes

Clases útiles para usar en las etiquetas img.

img-fluid: la imagen se adapta al elemento que la contiene
float-left:
float-right:
rounded: esquinas redondeadas
img-thumbnail: esquinas redondeadas y borde con relleno.

<div class="container">
    <div class="row">
        <div class="col">
            <figure class="figure">
                <img class="img-fluid rounded" src="https://lorempixel.com/400/400" alt="">
                <figcaption class="figure-caption">
                    <p class="text-center">Lorem ipsum</p>
                </figcaption>
            </figure>
        </div>
    </div>
</div>

Tablas

Estilos para el elemento table:

table-dark: invierte colores (fondo negro y texto blanco)
table-striped: alterna color de fondo de filas
table-bordered: añade bordes
table-hover: se muestra en otro color de fondo la fila que toca el puntero del ratón.
table-sm: reduce los rellenos de las celdas para hacer la tabla más pequeña.
table-responsive-*: indicamos en qué tamaño de pantalla no queremos que la tabla ocupe el 100 % (sm, md, lg y xl).

Estilos para los elementos tr y table:

table-success: color de fondo verde
table-danger: color de fondo rojo
table-info:
table-warning:
table-active.

También podemos utilizar las clases generales para fondos bg-primary, bg-secondary, etc.

<div class="container">
    <div class="row">
        <div class="col">
            <table class="table">
                <thead>
                    <tr>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>                        
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>                                            
                </tbody>
            </table>
        </div>
    </div>
</div>

Media object

Útil para construir componentes repetitivos como comentarios de un blog, tweets, etc

<div class="container">
    <div class="row">
        <div class="col">
            <div class="media">
                <img src="" class="d-flex align-self-start mr-3">
                <div class="media-body">
                    <h4>Encabezado</h4>
                    <p>Aquí va un texto</p>
 
                    <hr>
 
                    <div class="media">
                        <img src="" class="d-flex align-self-start mr-3">
                        <div class="media-body">
                            <h4>Comentario</h4>
                            <p>Aquí va un texto</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Alertas

Clases para hacer cajas que resaltan:

alert-info
alert-danger
alert-success
alert-primary
alert-secondary
alert-light
alert-dark
alert-link: para que los enlaces que están dentro de un elemento alert se muestren con un formato adecuado.

<div class="container">
    <div class="row">
        <div class="col">
            <div class="alert alert-success mt-3">
                <strong>Aviso</strong> Esto es un <a href="#" class="alert-link">mensaje</a> que resalta.
            </div>        
        </div>
    </div>
</div>

Si queremos añadir un botón para poder cerrar la alerta:

...
       <div class="alert alert-success mt-3" id="alerta">
           <strong>Aviso</strong> Esto es un <a href="#" class="alert-link">mensaje</a> que resalta.
           <button type="button" class="close" data-dismiss="alert" aria-label="Cerrar">
               <span aria-hidden="true">&times;</span>
           </button>
       </div>

Bootstrap nos obliga a usar los atributos data-dismiss y aria-label

Para poder cerrar las alertas, es necesario que esté incluido jQuery.

Insignias (badges)

<div class="container">
    <div class="row">
        <div class="col">
            <h1>Encabezado 1 <span class="badge badge-secondary">Etiqueta</span></h1>
        </div>
    </div>
</div>

Para redondearlas, añadimos la clase badge-pill

Clases de badges:

badge-primary
badge-secondary
badge-success
badge-danger
badge-warning
badge-info
badge-light

Botones

...
<button type="button" class="btn btn-primary">Primario</button>

Posibles clases:

btn-primary
btn-secondary
btn-success
btn-danger
btn-info
btn-warning
btn-link
btn-dark
btn-light

Si queremos que los botones no tengan color de fondo, pero sí cuando pasamos el ratón por encima:

btn-outline-primary
btn-outline-secondary
btn-outline-success
btn-outline-danger
btn-outline-info
btn-outline-warning
btn-outline-link

Para cambiar el tamaño de los botones:

btn-lg
btn-sm

...
<button type="button" class="btn btn-primary btn-lg">Primario</button>

Si queremos que un botón ocupe todo el ancho, es decir, que un butón se comporte como un elemento de bloque:

...
<button type="button" class="btn btn-primary btn-block">Primario</button>

Para deshabilitar botones:

...
<button type="button" class="btn btn-primary btn-lg" disabled>Primario</button>

Bootstrap apaga el color de los botones y añade un icono de “prohibido” al pasar el ratón sobre él.

Si queremos que un checkbox tenga la apariencia de un botón:

...
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="checkbox" name="" id="" autocomplete="off">Checkbox 1
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="" id="" autocomplete="off">Checkbox 2
    </label>
</div>

Para hacer lo mismo pero con radio buttons:

...
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="sexo" id="hombre" autocomplete="off">Hombre
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="sexo" id="mujer" autocomplete="off">Mujer
    </label>
</div>

Cards

card
- card-header
- card-body
  - card-title
  - card-subtitle
  - card-text
  - card-link
- card-footer
- card-img-top
- card-img-bottom

<div class="container">
    <div class="row">
        <div class="col">
            <div class="card">
                <img src="" class="card-img-top img-fluid" alt="">
                <div class="card-body">
                    <h3 class="card-title">Título</h3>
                    <p class="card-text">Lorep ipsum</p>
                    <a href="#" class="btn btn-primary btn-lg btn-block">Link</a>
                </div>
            </div>
        </div>
    </div>
</div>

Si queremos agrupar cartas tenemos que encerrarlas en un contenedor con la clase card-group:

<div class="container">
    <div class="row">
        <div class="col">
            <div class="card-group">
                <div class="card">
                </div>
                <div class="card">
                </div>
                <div class="card">
                </div>                        
            </div>
        </div>
    </div>
</div>

Si utilizamos la clase card-footer, lo que añadamos ahí siempre va a estar a la misma altura en todas las tarjetas, independientemente de lo que ocupe lo que esté en card-body

Para el color de fondo de las tarjetas:

bg-primary
bg-secondary
etc

Collapse

Mostrar u ocultar elementos al pulsar sobre un botón/enlace.

Es necesario tener incluidos en nuestro proyecto jQuery, Popper.js y el JavaScript de Bootstrap

<div class="container">
    <div class="row">
        <div class="col-6">
            <a href="#bloque-1" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="bloque-1" class="btn btn-primary">Bloque 1</a>
 
            <div id="bloque-1" class="collapse">
                <div class="card card-body">
                    <h2>Encabezado</h2>
                    <p>Texto, texto</p>
                </div>
            </div>
        </div>
    </div>
</div>

El enlace está asociado al bloque donde queremos usar la característica collapse. La clase collapse nos oculta el bloque por defecto.

El elemento que queremos mostrar y ocultar, debe estar identificado con el atributo id para relacionarlo con un enlace o botón.

Acordeón

Similar a collapse.

<div class="container">
    <div class="row">
        <div class="col">
            <div id="acordeon">
                <div class="card">
                    <div class="card-header" id="cabecera-1">
                        <h5>
                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">Contenido 1</button>
                        </h5>
                    </div>
                    <div id="collapse-1" class="collapse show" arial-labelledby="cabecera-1" data-parent="acordeon">
                        <div class="card-body">
                            Contenido
                        </div>
                    </div>
                </div>
 
                <div class="card">
                    <div class="card-header" id="cabecera-2">
                        <h5>
                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-2" aria-expanded="true" aria-controls="collapse-2">Contenido 1</button>
                        </h5>
                    </div>
                    <div id="collapse-2" class="collapse show" arial-labelledby="cabecera-2" data-parent="acordeon">
                        <div class="card-body">
                            Contenido
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Crea botones con un menú desplegable al pulsar sobre él.

Es necesario tener incluidos en nuestro proyecto jQuery, Popper.js y el JavaScript de Bootstrap

...
<div class="row">
    <div class="col">
        <div class="btn-group mr-2 mb-2">
            <button class="btn btn-primary dropdown-toggle" id="dp-categorias" data-toggle="dropdown">
                Categorías
            </button>
            <!-- Enlaces: -->
            <div class="dropdown-menu" arial-labelledby="dp-categorias">
                <h6 class="dropdown-header">Categorías</h6>
                <a href="#" class="dropdown-item">HTML</a>
                <a href="#" class="dropdown-item">CSS</a>
                <a href="#" class="dropdown-item">JS</a>      
                <!-- Divisor -->
                <div class="dropdown-divider"></div>                          
            </div>
        </div>
    </div>
</div>

Si queremos que el menú se despligue en un botón aparte, el del icono:

...
<div class="row">
    <div class="col-6">
        <div class="btn-group mr-2 mb-2">
            <button class="btn btn-primary">
                Categorías
            </button>
            <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="dp-categorias" data-toggle="dropdown">
                <span class="sr-only">Menú</span>
            </button>
            <!-- Enlaces: -->
            <div class="dropdown-menu" arial-labelledby="dp-categorias">
                <h6 class="dropdown-header">Categorías</h6>
                <a href="#" class="dropdown-item">HTML</a>
                <a href="#" class="dropdown-item">CSS</a>
                <a href="#" class="dropdown-item">JS</a>      
                <!-- Divisor -->
                <div class="dropdown-divider"></div>                          
            </div>
        </div>
    </div>
</div>

Formularios

...
<div class="row">
    <div class="col">
        <form action="">
            <div class="form-group"> <!-- obligatorio para Bootstrap -->
                <label for="nombre">Nombre</label>
                <input type="text" class="form-control" placeholder="Nombre" name="nombre" id="nombre">
            </div>
            <div class="form-group"> <!-- obligatorio para Bootstrap -->
                <label for="pass">Nombre</label>
                <input type="password" class="form-control" placeholder="Contraseña" name="pass" id="pass">
            </div>
            <div class="form-group"> <!-- obligatorio para Bootstrap -->
                <label for="mensaje">Nombre</label>
                <textarea class="form-control" name="mensaje" id="mensaje">
            </div>
 
            <div class="form-group"> <!-- obligatorio para Bootstrap -->
                <label for="pais">País</label>
                <select class="form-control" name="pais" id="pais">
                    <option value="espana">España</option>
                    <option value="alemania">Alemania</option>                    
                </select>
            </div>
 
            <div class="form-check"> <!-- Ojo, que esto cambia -->
                <label class="form-check-label">
                    <input type="radio" name="sexo" id="hombre" class="form-check-input mr-2">Hombre
                </label>
            </div>
            <div class="form-check"> <!-- Ojo, que esto cambia -->            
                <label class="form-check-label">
                    <input type="radio" name="sexo" id="mujer" class="form-check-input mr-2">Mujer
                </label>
            </div>
 
            <div class="form-check">
                <label class="form-check-label">
                    <input type="checkbox" name="terminos" id="terminos" class="form-check-input mr-2">Acepto términos y condiciones
                </label>
            </div>
        </form>        
    </div>
</div>

La clase form-control hace que el elemento ocupe el 100 % del ancho disponible, además de algún otro estilo.

Para los formularios en línea, es decir, en formato horizontal:

...
<div class="row">
    <div class="col">
        <form action="" class="form-inline">
            <input type="text" class="form-control" placeholder="Nombre" name="nombre" id="nombre">
            <input type="password" class="form-control" placeholder="Contraseña" name="pass" id="pass">
            <div class="form-check mr-3">
                <input type="checkbox" name="recordar" id="recordar" class="form-check-input">
                <label for="recordar" class="form-check-label">Recordar sesión</label>
            </div>
 
            <input type="submit" class="btn btn-primary" value="Iniciar sesión">
        </form>        
    </div>
</div>

Lo importante es la clase form-inline en la etiqeuta form

Utilizando grid en los formularios:

...
<div class="row">
    <div class="col">
        <form action="">
            <div class="form-group row"> <!-- Transformamos en filas -->
                <div class="col-12 col-md-6 mb-3">
                    <label for="nombre">Nombre</label>
                    <input type="text" class="form-control" placeholder="Nombre" name="nombre" id="nombre">
                </div>
                <div class="col-12 col-md-6 mb-3">            
                    <label for="pass">Nombre</label>
                    <input type="password" class="form-control" placeholder="Contraseña" name="pass" id="pass">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-12 col-md-6>            
                    <label for="mensaje">Nombre</label>
                    <textarea class="form-control" name="mensaje" id="mensaje">
                </div>
 
                <div class="col-12 col-md-3">
                    <div class="form-check">
                        <label class="form-check-label">
                            <input type="radio" name="sexo" id="hombre" class="form-check-input mr-2">Hombre
                        </label>
                    </div>
                    <div class="form-check"> <!-- Ojo, que esto cambia -->            
                        <label class="form-check-label">
                            <input type="radio" name="sexo" id="mujer" class="form-check-input mr-2">Mujer
                        </label>
                    </div>
                </div>
                <div class="col-12 col-md-3">                
                    <label for="pais">País</label>
                    <select class="form-control" name="pais" id="pais">
                        <option value="espana">España</option>
                        <option value="alemania">Alemania</option>                    
                    </select>
                </div>                
            </div>
 
            <div class="form-group row">
                <div class="col-12 text-center">
                    <label class="form-check-label">
                        <input type="checkbox" name="terminos" id="terminos" class="form-check-input mr-2 mb-3">Acepto términos y condiciones
                    </label>
                    <div class="row justify-content-center">
                        <div class="col-12 col-sm-9 col-md-4">
                            <button class="btn btn-primary btn-block" type="submit">Enviar</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>        
    </div>
</div>

Para añadir algún comentario sobre los inputs, podemos usar las clases form-text o text-muted:

...
<div class="row">
    <div class="col">
        <form action="">
            <div class="form-group">
                <input type="password" class="form-control" name="pass" id="pass" placeholder="Contraseña">
                <p class="fomt-text text-muted">Debe tener entre 6 y 8 caracteres alfanuméricos</p>
            </div>
        </form>
    </div>
</div>

Ventanas modales

Necesario haber agregado jQuery

...
<div class="row">
    <div class="col">
        <!-- Botón que llamará al modal -->
        <button class="btn btn-primary" data-toggle="modal" data-target="#ventana-modal">Abrir modal</button>
 
        <!-- Ventana modal: -->
        <div class="modal fade" id="ventana-modal" tabindex="-1" role="dialog" arial-labelledby="ventana-modal" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- Título de la ventana -->
                    <div class="modal-header">
                        <h5 class="modal-title" id="">Título de la ventana</h5>
                        <!-- Botón de cerrar -->
                        <button class="close" data-dismiss="modal" aria-label="Cerrar">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <!-- Cuerpo de la ventana -->
                    <div class="modal-body">
                        <h2>Hola, mundo</h2>
                        <p>Texto</p>
                    </div>
                </div>
            </div>          
        </div>
    </div>
</div>

Si queremos una ventana modal más graden, a la clase modal-dialog le añadimos la clase modal-lg. Si lo queremos más pequeño, entonces modal-sm.

Si queremos trabajar con grid dentro de las ventanas modales, añadiríamos un div con la clase container-fluid dentro del modal-body. Luego será cuestión de añadir filas y columnas.

Navs

Para crear paneles de navegación

Si partimos de:

    <div class="container">
      <div class="row">
        <div class="col">
          <h2>Menú</h2>
          <hr>
          <ul>
            <li><a href="#">Uno</a></li>
            <li><a href="#">Dos</a></li>
          </ul>
        </div>
      </div>
    </div>

Podemos obtener un menú horizontal con la clase nav y nav-item en los hijos:

...
          <ul class="nav bg-primary">
            <li class="nav-item"><a href="#" class="nav-link active">Uno</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Dos</a></li>
          </ul>

Podemos hacer lo mismo, pero utilizando la etiqueta nav y enlaces en lugar de elementos de una lista:

...
          <nav class="nav bg-dark">
            <a href="#" class="nav-link active">Uno</a>
            <a href="#" class="nav-link">Dos</a>
          </nav>

Para un menú vertical:

...
          <nav class="nav flex-column">
            <a href="#" class="nav-link active">Uno</a>
            <a href="#" class="nav-link">Dos</a>
          </nav>

Tabs

Similar a navs:

...
          <ul class="nav nav-tabs">
              <li class="nav-item"><a href="#" class="nav-link active">Uno</a></li>
              <li class="nav-item"><a href="#" class="nav-link">Dos</a></li>
              <li class="nav-item"><a href="#" class="nav-link disabled">Tres</a></li>
          </ul>

También se podría usar la clase nav-pills en lugar de nav-tabs.

Si queremos que el menú ocupe el 100 % del ancho del menú de navegación, añadimos la clase nav-fill:

...
          <ul class="nav nav-tabs nav-fill">
              <li class="nav-item"><a href="#" class="nav-link active">Uno</a></li>
              <li class="nav-item"><a href="#" class="nav-link">Dos</a></li>
              <li class="nav-item"><a href="#" class="nav-link disabled">Tres</a></li>
          </ul>

Si queremos que cada elemento tenga un desplegable (dropdown):

...
           <ul class="nav nav-tabs">
              <li class="nav-item dropdown">
                  <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Uno</a>
                  <div class="dropdown-menu">
                      <a href="#" class="dropdown-item">Categoría 1</a>
                      <a href="#" class="dropdown-item">Categoría 2</a>
                      <a href="#" class="dropdown-item">Categoría 3</a>
                  </div>
              </li>
              <li class="nav-item"><a href="#" class="nav-link">Dos</a></li>
              <li class="nav-item"><a href="#" class="nav-link disabled">Tres</a></li>
          </ul>

En lugar de desplegables, podemos utilizar paneles:

...
           <!-- Menú para llamar a los paneles -->
           <ul class="nav nav-tabs">
               <li class="nav-item">
                   <a href="#tab1" class="nav-link active" data-toggle="tab">Tab 1</a>
               </li>
               <li class="nav-item">
                   <a href="#tab2" class="nav-link" data-toggle="tab">Tab 2</a>
               </li>
           </ul>
           <!-- Paneles: -->
           <div class="tab-content">
               <div class="tab-pane active" id="tab1" role="tabpanel">
                   <h3>Panel 1</h3>
                   <p>Texto</p>
               </div>
 
               <div class="tab-pane" id="tab2" role="tabpanel">
                   <h3>Panel 2</h3>
                   <p>Texto</p>
               </div>
           </div>

Creación de menús más completos que con los Nav.

Necesario incluir jQuery, PopperJS y el JavaScript de Bootstrap

<!-- Para que el menú ocupe el 100 %, no puede estar dentro de container -->
<!-- Con .navbar-expand-lg indicamos que se muestre el menú adaptable para tamaños menores a pantallas grandes --> 
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <div class="container">
              <a href="#" class="navbar-brand">Menú</a>
 
              <!-- Botón que aparecerá en pantallas pequeñas -->
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Menú de navegación">
                  <span class="navbar-toggler-icon"></span>
              </button>
 
              <!-- Elementos del menú -->
              <div class="collapse navbar-collapse" id="navbar">
                  <ul class="navbar-nav mr-auto">
                      <li class="nav-item">
                          <a href="#" class="nav-link">Inicio</a>
                      </li>
                      <li class="nav-item">
                          <a href="#" class="nav-link">Blog</a>
                      </li>
                  </ul>
              </div>
          </div>
      </nav>

Para añadir un desplegable en alguno de los elementos del Navbar:

...
                       <li class="nav-item dropdown">
                           <a href="#" class="nav-link dropdown-toggle" id="menu-categorias" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Blog</a>
 
                           <!-- Desplegable -->
                           <div class="dropdown-menu" aria-labelledby="menu-categorias">
                               <a href="#" class="dropdown-item">HTML</a>
                               <a href="#" class="dropdown-item">CSS</a>
                           </div>
                       </li>

Si queremos añadir un formulario de búsqueda:

...                  
                  <ul class="navbar-nav mr-auto">
                  ...
                  </ul>
                  <form action="" class="form-inline my-2 my-lg-0">
                      <input type="text" class="form-control mr-sm-2" placeholder="Buscar" aria-label="Buscar">
                      <button class="btn btn-primary my-sm-0" type="submit">Buscar</button>
                  </form>

Para fijar el Navbar cuando nos desplazamos verticalmente, podemos usar las clases fixed-top y fixed-bottom:

...
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
...

Si fijamos el navbar, se recomienda establecer un padding-top: 56px en la etiqueta body y así no se posicione por encima del contenido antes de desplazarnos verticalmente.

Modificar colores de navbar:

navbar-light y luego combinar con bg-*
navbar-dark y luego combinar con bg-**

...
      <nav class="navbar navbar-expand-lg navbar-light bg-primary">
...

Barras de progreso

<div class="container mt-5">
    <div class="row">
        <div class="col-6">
            <div class="progress mb-3" style="height: 25px;">
                <div class="progress-bar" role="progressbar" style="width: 10%;">10%</div>
            </div>
 
            <div class="progress mb-3" style="height: 15px;">
                <div class="progress-bar" role="progressbar" style="width: 10%;">10%</div>
            </div>
 
            <div class="progress mb-3" style="height: 35px;">
                <div class="progress-bar" role="progressbar" style="width: 10%;">10%</div>
            </div>
        </div>
    </div>
</div>

Por defecto, las barras de progreso tienen color azul. Para otros colores, a la clase progress-bar hay que añadirle:

bg-success
bg-secondary
bg-info
bg-warning
bg-danger
bg-inverse
bg-light

Tooltips

Para mostrar mensajes cuando se pasa el ratón sobre cierto elemento.

Necesario incluir jQuery, PopperJS y el JavaScript de Bootstrap

<div class="container mt-5">
    <div class="row">
        <div class="col-6">
            <p>Este texto tiene un <a href="#" data-toggle="tooltip" data-placement="top" title="Texto a mostrar en el toolip">enlace</a></p>
 
            <button class="btn btn-primary data-toggle="tooltip" data-placement="left" title="Botón">Botón</button>
        </div>
    </div>
</div>
 
<!-- Lo siguiente va después de cargar jQuery, Popper y Bootstrap -->
<!-- Inicializamos el método tooltip -->
<script>
    $(function() {
        $('[data-toggle="tooltip"]').tooltip();
    })
</script>

Ejemplos

...
<body>
    <div class="container">
        <header class="row">
            <div class="col">
                <h1>Cabecera</h1>
            </div>
        </header>
        <section class="contenedor-main row">
            <main class="col-md-8">
            </main>
 
            <aside class="col-md-4 align-self-center">
                <h3>Aside</h3>
            </aside>
        </section>    
 
        <section class="row widgets justify-content-between">
            <div class="col-md-3">
                <p>Lorem ipsum</p>
            </div>
            <div class="col-md-3">
                <p>Lorem ipsum</p>
            </div>
            <div class="col-md-3">
                <p>Lorem ipsum</p>
            </div>            
        </section>
 
        <footer class="row">
            <div class="col">
                <h4>Pie de página</h4>
            </div>
        </footer>
    </div>
</body>

Flexbox

Si no queremos trabajar con la grid de Bootstrap y queremos hacerlo con Flexbox:

d-flex es lo mismo que haber escrito la propiedad display: flex.

<div class="d-flex">
    CONTENIDO
</div>

Si no queremos que la caja ocupe el 100 %, podemos utilizar la clase d-inline-flex:

<div class="d-inline-flex">
    CONTENIDO
</div>

Dirección

En cuanto a la dirección de los elementos que contenga:

<div class="d-flex flex-row">
    CONTENIDO
</div>

flex-row es el valor por defecto.

Para cambiar la dirección a columnas:

<div class="d-flex flex-column">
    <div>Caja 1</div>
    <div>Caja 2</div>
    <div>Caja 3</div> 
</div>

Podemos definir la dirección según el tamaño del dispositivo:

flex-sm-row
flex-sm-column
flex-md-row
flex-md-column

Alineación de contenido

Para poder alinear los elementos hijo del contenedor Flexbox:

<div class="d-flex justify-content-center">
    <div>Caja 1</div>
    <div>Caja 2</div>
    <div>Caja 3</div>        
</div>

Los posibles valores:

justify-content-start
justify-content-end
justify-content-between
justify-content-around

Podemos definir la alineación según el tamaño del dispositivo:

justify-content-sm-start
justify-content-sm-end
justify-content-sm-center
justify-content-md-start
justify-content-md-end
justify-content-md-center

Para trabajar con los hijos (items):

Items

Si queremos centrar verticalmente los elementos hijo:

<div class="d-flex align-items-center">
    <div>Caja 1</div>
    <div>Caja 2</div>
    <div>Caja 3</div>        
</div>

Si los queremos poner al final del contenedor padre:

<div class="d-flex align-items-end">
    <div>Caja 1</div>
    <div>Caja 2</div>
    <div>Caja 3</div>        
</div>

Si queremos que las cajas ocupen todo el alto del contenedor padre:

<div class="d-flex align-items-stretch">
    <div>Caja 1</div>
    <div>Caja 2</div>
    <div>Caja 3</div>        
</div>

La wiki de TempWin

Tabla de Contenidos

Bootstrap

Instalación

Conceptos

Grid

Filas

Columnas

Separadores

Alineación vertical

Alineación horizontal

Offset

Reordenamiento

Columnas anidadas

Elementos

Márgenes

Utilidades diseño adaptable

Tipografía

Imágenes

Tablas

Media object

Alertas

Insignias (badges)

Botones

Cards

Collapse

Acordeón

Formularios

Ventanas modales

Navs

Tabs

Navbar

Barras de progreso

Tooltips

Ejemplos

Flexbox

Dirección

Alineación de contenido

Items

Tabla de Contenidos

Bootstrap

Instalación

Conceptos

Grid

Filas

Columnas

Separadores

Alineación vertical

Alineación horizontal

Offset

Reordenamiento

Columnas anidadas

Elementos

Márgenes

Utilidades diseño adaptable

Tipografía

Imágenes

Tablas

Media object

Alertas

Insignias (badges)

Botones

Cards

Collapse

Acordeón

Dropdown

Formularios

Ventanas modales

Navs

Tabs

Navbar

Barras de progreso

Tooltips

Ejemplos

Flexbox

Dirección

Alineación de contenido

Items