4. Bootstrap: Maquetación rápida
Baterías Incluidas
Bootstrap nació en las oficinas de Twitter. Es una librería CSS que ya tiene diseñados los botones, menús, sombras y espacios para que tú solo tengas que poner los nombres de las clases en tu HTML.
index.html
HTML
1 <button class="btn btn-primary">Botón Azul</button>
2 <div class="alert alert-success">¡Todo salió bien!</div>
📐 Sistema de 12 Columnas
La clave de Bootstrap es que divide tu pantalla en 12 partes iguales invisibles. Tú eliges cuántas ocupa cada caja:
html
HTML
1 <div class="row">
2 <div class="col-md-8">Columna grande (8 partes)</div>
3 <div class="col-md-4">Columna pequeña (4 partes)</div>
4 </div>
- container: Centra tu web con márgenes bonitos a los lados.
- col-12: Ocupa toda la fila (típico en móviles).
- col-md-6: Ocupa la mitad en tablets/PCs.
Utilidades: El "Código Ninja"
Bootstrap también tiene clases para dar espacio sin escribir una sola línea de CSS propio:
- mt-3: Margin Topnivel 3.
- p-5: Padding nivel 5 en todos los lados.
- text-center: Centra el texto.
