8.1 ¿Qué es Bootstrap?
Bootstrap es un framework CSS desarrollado por Twitter en 2010, para estandarizar las herramientas de la compañía.
El framework combina CSS y JavaScript para estilizar los elementos de una página HTML.
Su principal objetivo es permitir la construcción de sitios web responsive para dispositivos móviles.
Esto significa que las páginas están diseñadas para funcionar en desktop, tablets y smartphones, de una manera muy simple y organizada.
8.2 Imágenes en Bootstrap 5
Podemos cambiar la forma de la imagen de 3 formas diferentes:
- rounded: Le coloca un borde redondo a las esquinas de la imagen.
- rounded-circle: Convierte la imagen en un círculo/óvalo.
- img-thumbnail: Le coloca un marco a la imagen.
8.3 Títulos en Bootstrap 5
A parte de los típicos títulos de HTML (de h1 a h6) en Bootstrap existen 6 tipos más de títulos (de display-1 a display-6):
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
8.4 Breadcrumb en Bootstrap 5
Con Bootstrap existen una forma muy sencilla de crear nuestros propios Breadcrumbs:
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
Si queremos personalizar el divisor, debemos de añadir el siguiente código en el nav: style="--bs-breadcrumb-divider: '>';"
8.5 Alertas en Bootstrap 5
Con la propiedad .alert podemos crear diferentes tipos de alertas. Podemos crear un total de 8 alertas diferentes que son:
- alert-success
- alert-info
- alert-warning
- alert-danger
- alert-primary
- alert-secondary
- alert-dark
- alert-light
Este sería un ejemplo de código de alerta:
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
8.6 Botones en Bootstrap 5
Con la propiedad .btn podemos crear diferentes tipos de botones. Podemos crear un total de 10 botones diferentes que son:
- btn
- btn-primary
- btn-secondary
- btn btn-success
- btn btn-info
- btn btn-warning
- btn btn-dark
- btn btn-dark
- btn-light
- btn-link
Este sería un ejemplo de código de botón:
8.7 Barra de progreso en Bootstrap 5
Con la propiedad .progress podemos crear diferentes tipos de barras de progreso. Podemos crear un total de 9 estilos diferentes que son:
- progress-bar
- bg-success
- bg-info
- bg-warning
- bg-danger
- bg-white
- bg-secondary
- bg-light
- bg-dark
Este sería un ejemplo de código de una barra de progreso:
<div class="progress-bar bg-success" style="width:20%"> </div>
</div>
8.8 Spinners en Bootstrap 5
Los Spinners es una forma clara de indicar al usuario que un contenido se está cargando. A través de Bootstrap podemos crear un total de 9 estilos diferentes que son:
- text-muted
- text-primary
- text-success
- text-info
- text-warning
- text-danger
- text-secondary
- text-dark
- text-light
Este sería un ejemplo de código de Spinner:
8.9 Paginación en Bootstrap 5
Si tu sitio tiene muchos artículos, es recomendable hacer un sistema de paginación. Esto Bootstrap nos lo facilita muchísimo con la siguiente plantilla:
<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>
Si queremos marcar la página actual, debemos de usar la clase active:
En cambio, si queremos dehabilitar el botón de una página, debemos de usar la clase de disabled:
8.10 Tarjetas en Bootstrap 5
A la hora de mostrar una lista de posts, podemos usar las tarjetas de Bootstrap, una simple plantilla que nos ofrece una imagen, texto y botón.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
8.11 Acordeón en Bootstrap 5
Otra forma interesante de mostrar contenido es mostrandolo/ocultandolo, para ello lo ideal son las acordenoes. En Bootstrap existe un código para crear una acordeón automaticamente.
<div class="card">
<div class="card-header">
<a class="btn" data-bs-toggle="collapse" href="#collapseOne"> Collapsible Group Item #1 </a>
</div>
<div id="collapseOne" class="collapse show" data-bs-parent="#accordion"> <div class="card-body"> Lorem ipsum.. </div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo"> Collapsible Group Item #2 </a>
</div>
<div id="collapseTwo" class="collapse" data-bs-parent="#accordion"> <div class="card-body"> Lorem ipsum.. </div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree"> Collapsible Group Item #3 </a>
</div>
<div id="collapseThree" class="collapse" data-bs-parent="#accordion"> <div class="card-body"> Lorem ipsum.. </div>
</div>
</div>
</div>
Para que funcione la acordeón, hay que importar también la librería de JS de Bootstrap.
8.12 Otros elementos de Bootstrap
A parte de todos los elementos que acabamos de ver, existe un sinfín más de elementos. Aquí te dejo la documentación de Bootstrap para que puedas ver todos los elementos que soporta.
Documentación oficial de Bootstrap
8.13 Iconos de Bootstrap
Bootstrap también tiene una librería dedicada a los iconos, simplemente la importamos y podemos usar una infinidad de iconos para nuestra web.
Lista de iconos disponibles
Para mostrar el contenido en nuestra web, debemos de escribir el siguiente código:
