Módulo: Fundamentos y layout
Este módulo forma parte del curso de Bootstrap. Incluye 4 lecciones y 6 ejercicios de programación .
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
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.
Ejercicios de programación
Otros módulos de este curso
Lecciones de este módulo
Explora todas las lecciones disponibles en Fundamentos y layout
Todos los módulos del curso
Navega entre los módulos de Bootstrap
Explora más sobre Bootstrap
Descubre más recursos de Bootstrap
Alan Sastre
Ingeniero de Software y formador, CEO en CertiDevs
Ingeniero de software especializado en Full Stack y en Inteligencia Artificial. Como CEO de CertiDevs, Bootstrap es una de sus áreas de expertise. Con más de 15 años programando, 6K seguidores en LinkedIn y experiencia como formador, Alan se dedica a crear contenido educativo de calidad para desarrolladores de todos los niveles.