Ejemplos de Estilos de Bootstrap
1. Tipografía
h1 - h6
Bootstrap redefine los estilos de los encabezados <h1> a <h6>.
Encabezado h1
Encabezado h2
Encabezado h3
Encabezado h4
Encabezado h5
Encabezado h6
display-1 a display-6
Clases para encabezados más grandes y destacados.
Display 1
Display 4
text-muted
Color de texto más suave.
Este es un texto con la clase `text-muted`.
fw-bold, fst-italic, text-decoration-underline
Clases para modificar el estilo del texto.
Texto en negrita (`fw-bold`)
Texto en cursiva (`fst-italic`)
Texto subrayado (`text-decoration-underline`)
2. Botones
btn btn-[color]
Estilos de botones con diferentes colores predefinidos.
btn-outline-[color]
Botones con contorno.
btn-lg, btn-sm
Tamaños de botones.
3. Sistema de Rejilla (Grid System)
.container, .row, .col-[tamaño]-[columnas]
Bootstrap utiliza un sistema de rejilla de 12 columnas. El `container` es el ancho máximo, el `row` contiene las columnas y las `col` definen el ancho de cada columna.
Columna 1 (sm-4)
Columna 2 (sm-4)
Columna 3 (sm-4)
Columna 1 (md-6)
Columna 2 (md-6)
4. Alertas
.alert .alert-[color]
Mensajes de alerta con diferentes significados.
¡Esta es una alerta primaria!
¡Éxito! Tu operación se realizó correctamente.
¡Error! Algo salió mal.
5. Tarjetas (Cards)
.card
Contenedores flexibles para mostrar contenido de forma organizada.
Título de la Tarjeta
Subtítulo
Algun ejemplo de texto rápido para construir el contenido de la tarjeta y que se ajuste al tamaño.
Enlace de Tarjeta Otro enlace<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplos de Estilos Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
.example-section {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container mt-5">
<h1 class="mb-4 text-center">Ejemplos de Estilos de Bootstrap</h1>
<div class="example-section">
<h2>1. Tipografía</h2>
<hr>
<h3><span class="badge bg-primary">h1 - h6</span></h3>
<p>Bootstrap redefine los estilos de los encabezados <code><h1></code> a <code><h6></code>.</p>
<h1>Encabezado h1</h1>
<h2>Encabezado h2</h2>
<h3>Encabezado h3</h3>
<h4>Encabezado h4</h4>
<h5>Encabezado h5</h5>
<h6>Encabezado h6</h6>
<h3 class="mt-4"><span class="badge bg-primary">display-1 a display-6</span></h3>
<p>Clases para encabezados más grandes y destacados.</p>
<p class="display-1">Display 1</p>
<p class="display-4">Display 4</p>
<h3 class="mt-4"><span class="badge bg-primary">text-muted</span></h3>
<p>Color de texto más suave.</p>
<p class="text-muted">Este es un texto con la clase `text-muted`.</p>
<h3 class="mt-4"><span class="badge bg-primary">fw-bold, fst-italic, text-decoration-underline</span></h3>
<p>Clases para modificar el estilo del texto.</p>
<p class="fw-bold">Texto en negrita (`fw-bold`)</p>
<p class="fst-italic">Texto en cursiva (`fst-italic`)</p>
<p class="text-decoration-underline">Texto subrayado (`text-decoration-underline`)</p>
</div>
<div class="example-section">
<h2>2. Botones</h2>
<hr>
<h3><span class="badge bg-primary">btn btn-[color]</span></h3>
<p>Estilos de botones con diferentes colores predefinidos.</p>
<button type="button" class="btn btn-primary me-2">Botón Primario</button>
<button type="button" class="btn btn-secondary me-2">Botón Secundario</button>
<button type="button" class="btn btn-success me-2">Botón Éxito</button>
<button type="button" class="btn btn-danger me-2">Botón Peligro</button>
<button type="button" class="btn btn-warning me-2">Botón Advertencia</button>
<button type="button" class="btn btn-info me-2">Botón Información</button>
<button type="button" class="btn btn-light me-2">Botón Claro</button>
<button type="button" class="btn btn-dark me-2">Botón Oscuro</button>
<button type="button" class="btn btn-link">Botón Enlace</button>
<h3 class="mt-4"><span class="badge bg-primary">btn-outline-[color]</span></h3>
<p>Botones con contorno.</p>
<button type="button" class="btn btn-outline-primary me-2">Primario</button>
<button type="button" class="btn btn-outline-success me-2">Éxito</button>
<h3 class="mt-4"><span class="badge bg-primary">btn-lg, btn-sm</span></h3>
<p>Tamaños de botones.</p>
<button type="button" class="btn btn-primary btn-lg me-2">Botón Grande</button>
<button type="button" class="btn btn-secondary btn-sm">Botón Pequeño</button>
</div>
<div class="example-section">
<h2>3. Sistema de Rejilla (Grid System)</h2>
<hr>
<h3><span class="badge bg-primary">.container, .row, .col-[tamaño]-[columnas]</span></h3>
<p>Bootstrap utiliza un sistema de rejilla de 12 columnas. El `container` es el ancho máximo, el `row` contiene las columnas y las `col` definen el ancho de cada columna.</p>
<div class="container text-center">
<div class="row">
<div class="col-sm-4 bg-info text-white p-3 border">
Columna 1 (sm-4)
</div>
<div class="col-sm-4 bg-primary text-white p-3 border">
Columna 2 (sm-4)
</div>
<div class="col-sm-4 bg-success text-white p-3 border">
Columna 3 (sm-4)
</div>
</div>
<div class="row mt-3">
<div class="col-md-6 bg-warning text-dark p-3 border">
Columna 1 (md-6)
</div>
<div class="col-md-6 bg-danger text-white p-3 border">
Columna 2 (md-6)
</div>
</div>
</div>
</div>
<div class="example-section">
<h2>4. Alertas</h2>
<hr>
<h3><span class="badge bg-primary">.alert .alert-[color]</span></h3>
<p>Mensajes de alerta con diferentes significados.</p>
<div class="alert alert-primary" role="alert">
¡Esta es una alerta primaria!
</div>
<div class="alert alert-success" role="alert">
¡Éxito! Tu operación se realizó correctamente.
</div>
<div class="alert alert-danger" role="alert">
¡Error! Algo salió mal.
</div>
</div>
<div class="example-section">
<h2>5. Tarjetas (Cards)</h2>
<hr>
<h3><span class="badge bg-primary">.card</span></h3>
<p>Contenedores flexibles para mostrar contenido de forma organizada.</p>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Título de la Tarjeta</h5>
<h6 class="card-subtitle mb-2 text-muted">Subtítulo</h6>
<p class="card-text">
Algun ejemplo de texto rápido para construir el contenido de la tarjeta y que se ajuste al tamaño.
</p>
<a href="#" class="card-link">Enlace de Tarjeta</a>
<a href="#" class="card-link">Otro enlace</a>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>>