Bootstrap
Grid System
Componentes
Personalización
Sistema de Grid
.col-md-4
.col-md-4
.col-md-4
.col-sm-6 .col-lg-3
.col-sm-6 .col-lg-3
.col-sm-6 .col-lg-3
.col-sm-6 .col-lg-3
<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 class="row">
<div class="col-sm-6 col-lg-3">Col A</div>
<div class="col-sm-6 col-lg-3">Col B</div>
<div class="col-sm-6 col-lg-3">Col C</div>
<div class="col-sm-6 col-lg-3">Col D</div>
</div>Utilidades Responsivas
Visible solo en móviles
Visible desde tablets
Texto alineado diferente por breakpoint
<!-- Alineación responsiva -->
<div class="text-start text-md-center">
Texto centrado en md+
</div>
<!-- Visibilidad responsiva -->
<div class="d-none d-lg-block">
Solo visible en lg+
</div>
<!-- Espaciado responsivo -->
<div class="mt-2 mt-md-4">
Margen superior variable
</div>Componentes Comunes
Tarjeta de Bootstrap
Título especial
Texto de ejemplo en el cuerpo de la tarjeta.
Éxito! Esto es una alerta desechable.
<!-- Tarjeta -->
<div class="card">
<div class="card-body">
<h5 class="card-title">Título</h5>
<p class="card-text">Contenido...</p>
</div>
</div>
<!-- Alerta -->
<div class="alert alert-success">
Mensaje de éxito
</div>Componentes Interactivos
<!-- Pestañas -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#home">Inicio</a>
</li>
</ul>
<!-- Dropdown -->
<div class="dropdown">
<button class="dropdown-toggle" data-bs-toggle="dropdown">
Menú
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Opción</a></li>
</ul>
</div>Personalización con SASS
// Cambiar colores primarios
$primary: #3498db;
$danger: #e74c3c;
// Modificar breakpoints
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
// Importar Bootstrap
@import "~bootstrap/scss/bootstrap";Buena Práctica:
Crea un archivo _variables.scss para sobreescribir las variables de Bootstrap antes de importar los estilos principales.
Componentes Personalizados
Alerta personalizada
// _custom.scss
.btn-custom {
@extend .btn;
background-color: var(--bs-purple);
border: 2px solid darken($purple, 10%);
&:hover {
background-color: darken($purple, 10%);
}
}
.custom-alert {
@extend .alert;
background: linear-gradient(to right, $primary, $info);
color: white;
}