¿Qué es Bootstrap?
Bootstrap es un framework de código abierto desarrollado originalmente por Twitter para facilitar y agilizar el desarrollo de sitios web adaptativos y aplicaciones web. Combina código CSS (para estilos), JavaScript (para interactividad) y HTML (para estructura). Bootstrap sigue una filosofía "mobile first", lo que significa que se prioriza la optimización para dispositivos móviles antes de adaptar el diseño a pantallas más grandes, utilizando consultas de medios CSS para escalar los componentes según sea necesario.
Bootstrap ofrece un conjunto completo de herramientas CSS y JavaScript para crear interfaces de usuario modernas y adaptativas sin la necesidad de escribir código desde cero. Entre sus componentes más útiles se encuentran sistemas de grillas, tipografía, formularios, botones, navegación y componentes JavaScript como menús desplegables (dropdowns), carruseles (carousels) y modales. Su modularidad permite a los desarrolladores incluir solo los componentes que necesitan, favoreciendo una carga más rápida de las páginas.
Desde la versión 5, Bootstrap ha evolucionado significativamente: ha eliminado la dependencia de jQuery utilizando JavaScript vanilla, incorpora soporte nativo para modo oscuro, y utiliza variables CSS personalizadas para una mayor flexibilidad en la personalización. Además, Bootstrap emplea una serie de estilos globales y configuraciones diseñadas para normalizar las diferencias entre navegadores, proporcionando una base sólida y consistente para cualquier proyecto web. Esto ayuda tanto a principiantes como a expertos a mantener un estándar elevado de calidad y coherencia en sus diseños y aplicaciones.
¿Te está gustando esta lección?
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
Características principales de Bootstrap
Bootstrap proporciona una amplia variedad de opciones y recursos para el desarrollo front-end, que incluyen:
- Sistema de rejilla (Grid system): Este sistema permite crear diseños adaptativos mediante la utilización de un diseño de 12 columnas. Los desarrolladores pueden definir cómo se distribuirán y comportarán los elementos en diferentes tamaños de pantalla utilizando clases específicas de Bootstrap.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
- Tipografía: Bootstrap incluye estilos predeterminados para todos los elementos tipográficos básicos como encabezados, párrafos, listas, entre otros, además de clases para ajustar aspectos como el tamaño del texto, el peso de la fuente y el color.
<h1 class="display-1">Display 1</h1>
<p class="lead">Este es un texto principal.</p>
- Componentes pre-diseñados: Bootstrap ofrece una serie de componentes de interfaz de usuario listos para usar, como botones, formularios, tarjetas, barras de navegación, alertas y muchos otros. Estos componentes siguen el estilo de Bootstrap y garantizan una apariencia y comportamiento consistentes en todos los dispositivos y navegadores.
<button type="button" class="btn btn-primary">Primary Button</button>
- Javascript y plugins: Bootstrap incluye varios plugins de JavaScript para añadir interactividad y dinámicas avanzadas a los componentes de la interfaz de usuario. Estos incluyen modales, pestañas, carruseles, tooltips, y mucho más. A diferencia de versiones anteriores, Bootstrap 5 utiliza JavaScript vanilla (sin jQuery) y ya incluye Popper.js en su bundle principal para el posicionamiento de elementos emergentes.
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
</script>
- Temas y personalización: Bootstrap permite la personalización mediante variables Sass y también a través de variables CSS personalizadas. Esto proporciona a los desarrolladores la capacidad de ajustar colores, tipografías, tamaños y otros aspectos de los componentes sin editar directamente los archivos CSS. También incluye soporte nativo para modo oscuro y se pueden crear temas personalizados para un proyecto específico.
$theme-colors: (
"primary": #0d6efd,
"secondary": #6c757d,
"success": #198754,
"info": #0dcaf0,
"warning": #ffc107,
"danger": #dc3545,
"light": #f8f9fa,
"dark": #212529
);
- Compatibilidad y soporte multi-navegador: Bootstrap asegura una presentación consistente de los componentes en los navegadores y plataformas más utilizadas. Incluye un conjunto de estilos de reinicio y normalización denominado Reboot que corrige diferencias entre navegadores.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Estas características hacen de Bootstrap una herramienta extremadamente versátil y eficaz para el desarrollo de sitios y aplicaciones web adaptativas que funcionen correctamente en diversos dispositivos y navegadores.
Definición breve de cada componente que tiene Bootstrap
Bootstrap proporciona una serie de componentes prediseñados que facilitan la creación de interfaces de usuario consistentes y adaptativas. A continuación se presenta una descripción breve de cada uno de ellos.
Alertas: Son mensajes de texto resaltados que se utilizan para ofrecer retroalimentación contextual a los usuarios.
<div class="alert alert-primary" role="alert">
¡Esto es una alerta primaria!
</div>
Badges: Elementos pequeños y discretos utilizados para mostrar conteos o etiquetas.
<span class="badge bg-secondary">New</span>
Breadcrumb: Indica la ubicación actual dentro de una jerarquía de navegación.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
Buttons: Botones interactivos que se pueden utilizar en formularios o como enlaces de acción.
<button type="button" class="btn btn-primary">Primario</button>
Button group: Agrupaciones de botones que permiten acciones múltiples en línea.
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
Card: Contenedores flexibles y extensibles para contenido con múltiples variantes de diseño.
<div class="card" style="width: 18rem;">
<img src="https://picsum.photos/500" 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>
</div>
Carousel: Elemento deslizante para mostrar galería de imágenes con controles.
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
Collapse: Componente para mostrar/ocultar contenido.
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component.
</div>
</div>
Dropdown: Menús desplegables que ofrecen una lista de opciones.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</div>
Forms: Conjunto de estilos y componentes para formularios, incluyendo inputs, selects y checkboxes.
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Input group: Elementos combinados con inputs, como botones y textos.
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username">
</div>
List group: Listas flexibles y extensibles para mostrar una serie de contenidos.
<ul class="list-group">
<li class="list-group-item">Un item</li>
<li class="list-group-item">Un segundo item</li>
</ul>
Modal: Ventanas emergentes modales para interactuar con el usuario sin abandonar la página actual.
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Modal body text goes here.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Navs: Elementos de navegación como barras de pestañas y menús de navegación intuitivos.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-pane" type="button" role="tab" aria-controls="home-pane" aria-selected="true">Home</button>
</li>
</ul>
Navbar: Barras de navegación receptivas y personalizables.
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
</ul>
</div>
</div>
</nav>
Offcanvas: Componente deslizante que se superpone al contenido principal, ideal para menús laterales y contenido adicional.
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Abrir Offcanvas
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Content for the offcanvas goes here.
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
Pagination: Componentes para dividir el contenido en varias páginas.
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Anterior</a></li>
<li class="page-item"><a class="page-link" href="#">Siguiente</a></li>
</ul>
</nav>
Placeholders: Elementos de marcador de posición para indicar que el contenido aún se está cargando.
<div class="card">
<div class="card-body">
<h5 class="card-title placeholder-glow">
<span class="placeholder col-6"></span>
</h5>
<p class="card-text placeholder-glow">
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
</p>
</div>
</div>
Popovers: Elementos emergentes que muestran información adicional al pasar el ratón o hacer clic.
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
Progress: Barras de progreso que indican el estado de una operación.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Spinners: Indicadores de carga animados.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Toasts: Notificaciones pequeñas y auto-desechables que informan al usuario sobre un evento.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Estos componentes permiten construir interfaces ricas y funcionales con un mínimo esfuerzo, garantizando al mismo tiempo una apariencia coherente y moderna en múltiples dispositivos y navegadores.
Diferencias entre usar Bootstrap y no usar ninguna librería CSS
Utilizar Bootstrap ofrece una serie de ventajas significativas sobre no utilizar ninguna librería CSS en el desarrollo de sitios web y aplicaciones. Bootstrap proporciona una base sólida y estandarizada para el diseño y desarrollo, lo que se traduce en una mayor eficiencia y consistencia. A continuación, se detallan algunas de las principales diferencias y ventajas de usar Bootstrap.
Productividad y rapidez en el desarrollo
Con Bootstrap, los desarrolladores pueden aprovechar componentes y estilos predefinidos, lo que acelera significativamente el proceso de desarrollo. En contraste, desarrollando sin una librería como Bootstrap, cada componente y estilo debe ser codificado manualmente, lo que aumenta el tiempo de desarrollo:
<!-- Usando Bootstrap -->
<button class="btn btn-primary">Primary Button</button>
<!-- Sin Bootstrap -->
<style>
.btn-primary {
background-color: #0d6efd;
color: white;
padding: 10px 20px;
border: none;
border-radius: 6px;
font-weight: 400;
line-height: 1.5;
text-align: center;
cursor: pointer;
transition: all 0.15s ease-in-out;
}
.btn-primary:hover {
background-color: #0b5ed7;
}
</style>
<button class="btn-primary">Primary Button</button>
Responsividad y diseño adaptable
Bootstrap sigue una filosofía "mobile first", facilitando la creación de diseños adaptativos que se adaptan a cualquier dispositivo. Las clases como col-md-4 permiten una fácil configuración de una rejilla adaptable. Sin Bootstrap, los desarrolladores deben escribir todas las reglas de CSS para manejar diferentes tamaños de pantalla:
<!-- Usando Bootstrap -->
<div class="container">
<div class="row">
<div class="col-md-4">Contenido</div>
<div class="col-md-4">Contenido</div>
<div class="col-md-4">Contenido</div>
</div>
</div>
<!-- Sin Bootstrap -->
<style>
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-md-4 {
flex: 0 0 auto;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width: 768px) {
.col-md-4 {
width: 33.3333333333%;
}
}
</style>
<div class="container">
<div class="row">
<div class="col-md-4">Contenido</div>
<div class="col-md-4">Contenido</div>
<div class="col-md-4">Contenido</div>
</div>
</div>
Consistencia y normalización
Bootstrap incluye un conjunto de estilos globales llamados Reboot que normalizan y ajustan algunos comportamientos predeterminados del navegador para asegurar la consistencia entre diferentes navegadores y dispositivos. Sin Bootstrap, los desarrolladores deben implementar manualmente estos ajustes para lograr la misma coherencia:
<!-- Usando Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Sin Bootstrap -->
<style>
/* Ejemplo de normalización muy simplificado */
html {
box-sizing: border-box;
font-family: sans-serif;
line-height: 1.15;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
}
</style>
Interactividad y componentes avanzados
Bootstrap incluye varios plugins de JavaScript para mejorar la interactividad y dinámicas avanzadas de la interfaz de usuario, como modales, carruseles, tooltips, entre otros. Sin Bootstrap, estas funcionalidades deben ser implementadas desde cero o con librerías adicionales:
<!-- Usando Bootstrap -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Abrir Modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Título del Modal</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Contenido del modal.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<!-- Sin Bootstrap -->
<style>
.modal {
display: none;
position: fixed;
z-index: 1050;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-dialog {
position: relative;
width: auto;
margin: 1.75rem auto;
pointer-events: none;
}
.modal-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.5rem;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
border-bottom: 1px solid #dee2e6;
}
.modal-body {
position: relative;
flex: 1 1 auto;
padding: 1rem;
}
</style>
<div id="simpleModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2>Título del Modal</h2>
<span class="close-button">×</span>
</div>
<div class="modal-body">
<p>Contenido del modal.</p>
</div>
</div>
</div>
</div>
<script>
// Script para abrir y cerrar el modal
var modal = document.getElementById("simpleModal");
var btn = document.getElementById("openBtn");
var span = document.getElementsByClassName("close-button")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
Estas diferencias resaltan la eficiencia, consistencia y flexibilidad que Bootstrap aporta al desarrollo web, contrastado con las alternativas sin librerías CSS, donde los desarrolladores deben manejar manualmente muchos aspectos del diseño y la interactividad.
Aprendizajes de esta lección
- Comprender los conceptos fundamentales de Bootstrap.
- Aprender a usar el sistema de rejilla de Bootstrap.
- Utilizar componentes pre-diseñados como botones, formularios y modales.
- Customizar Bootstrap mediante variables Sass.
- Implementar interactividad con JavaScript y plugins de Bootstrap.
- Garantizar la compatibilidad multi-navegador con Bootstrap.
Completa Bootstrap y certifícate
Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.
Asistente IA
Resuelve dudas al instante
Ejercicios
Practica con proyectos reales
Certificados
Valida tus conocimientos
Más de 25.000 desarrolladores ya se han certificado con CertiDevs