Bootstrap CSS 5.3 es una herramienta esencial para el desarrollo web moderno, ofreciendo un conjunto de utilidades que facilitan la creación de aplicaciones responsivas y estéticamente agradables. En este módulo, se abordarán los fundamentos y layout, proporcionando las bases necesarias para dominar este framework.
Fundamentos de Bootstrap CSS 5.3
Estructura básica
La estructura básica de una página utilizando Bootstrap CSS 5.3 incluye la integración del CDN en el <head> del documento HTML. Esto permite acceder a todas las funcionalidades de Bootstrap sin necesidad de descargar archivos localmente.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Sistema de rejilla (Grid System)
El sistema de rejilla de Bootstrap CSS 5.3 se basa en un diseño de 12 columnas, lo que permite crear layouts responsivos y flexibles. A continuación se presenta un ejemplo básico de cómo utilizar las clases de rejilla.
<div class="container">
<div class="row">
<div class="col-md-4">Columna 1</div>
<div class="col-md-4">Columna 2</div>
<div class="col-md-4">Columna 3</div>
</div>
</div>
En este ejemplo, .container crea un contenedor que centraliza el contenido, mientras que .row define una fila y .col-md-4 divide la fila en tres columnas de igual tamaño para pantallas medianas y superiores.
Layout en Bootstrap CSS 5.3
Guarda tu progreso
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
Contenedores
Bootstrap ofrece diferentes tipos de contenedores para estructurar el contenido. El contenedor más común es .container, que proporciona un ancho fijo y centralizado. También existe .container-fluid, que ocupa el 100% del ancho del viewport.
<div class="container">
Contenido centralizado
</div>
<div class="container-fluid">
Contenido a lo largo de todo el viewport
</div>
Utilidades de espaciado
Bootstrap CSS 5.3 incluye utilidades de espaciado que permiten ajustar márgenes y padding de manera sencilla. Estas utilidades utilizan una escala de 0 a 5.
<div class="mt-3">
Margen superior de 3
</div>
<div class="p-2">
Padding de 2
</div>
Flexbox
Bootstrap CSS 5.3 aprovecha las capacidades de Flexbox para crear layouts flexibles y adaptables. Las clases de utilidad como .d-flex, .justify-content-center y .align-items-center son fundamentales para alinear y distribuir elementos.
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
<p>Contenido centrado vertical y horizontalmente</p>
</div>
Componentes básicos
Bootstrap CSS 5.3 incluye una variedad de componentes que facilitan la creación de interfaces de usuario. Entre ellos se encuentran los botones, las tarjetas y los formularios.
<button class="btn btn-primary">Botón Primario</button>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Título de la tarjeta</h5>
<p class="card-text">Texto de ejemplo en la tarjeta.</p>
<a href="#" class="btn btn-primary">Ir a algún lugar</a>
</div>
</div>
Este módulo de Bootstrap CSS 5.3 proporciona una base sólida para comprender y aplicar los fundamentos y layout en tus proyectos. La práctica y la consulta constante de la documentación oficial serán claves para dominar este framework.
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