Componentes UI

Explora los componentes pre-diseñados de Bootstrap: botones, cards, navbars y más.

Bootstrap incluye dozens de componentes listos para usar. No necesitas ser diseñador para tener una interfaz profesional. Solo añade las clases correctas.

Los más usados son: botones, cards, navbars, modals y alerts. Vamos a ver cómo usarlos.

  • btn btn-primary: azul principal
  • btn btn-secondary: gris
  • btn btn-success: verde
  • btn btn-danger: rojo
  • btn btn-outline-primary: solo borde

Botones

  • btn btn-primary: azul principal
  • btn btn-secondary: gris
  • btn btn-success: verde
  • btn btn-danger: rojo
  • btn btn-outline-primary: solo borde

Cards

  • card: contenedor principal
  • card-body: contenido dentro
  • card-img-top: imagen arriba
  • card-title y card-text para texto
Bootstrap
03

Componentes UI

Explora los componentes pre-diseñados de Bootstrap: botones, cards, navbars y más.

Código del tema: components

📘 Teoría

Botones

  • btn btn-primary: azul principal
  • btn btn-secondary: gris
  • btn btn-success: verde
  • btn btn-danger: rojo
  • btn btn-outline-primary: solo borde

Cards

  • card: contenedor principal
  • card-body: contenido dentro
  • card-img-top: imagen arriba
  • card-title y card-text para texto

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre Bootstrap.

Test de Bootstrap

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .