Bootstrap es uno de los frameworks de front-end más populares que te permite crear sitios web responsivos y con un diseño moderno. En este tutorial, aprenderás cómo integrar Bootstrap en tu proyecto y utilizar sus componentes más básicos.

¿Qué es Bootstrap?

Bootstrap es un framework de código abierto que facilita la creación de sitios web responsivos y estilizados. Proporciona una amplia variedad de componentes como botones, formularios, menús de navegación y mucho más.

¿Cómo instalar Bootstrap?

Puedes instalar Bootstrap de varias maneras, pero las más comunes son:

1. CDN

Agregar Bootstrap usando un CDN es la forma más sencilla:

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

2. Instalación con npm

Si estás usando un entorno de desarrollo con Node.js, puedes instalar Bootstrap con npm:

Terminal window
npm install bootstrap

Luego, incluye Bootstrap en tu archivo JavaScript:

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";

Sistema de Grid en Bootstrap

Bootstrap utiliza un sistema de grid basado en 12 columnas, lo que permite crear layouts responsivos fácilmente.

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h2>Columna 1</h2>
      <p>Esta columna ocupa el 50% del ancho en pantallas medianas.</p>
    </div>
    <div class="col-md-6">
      <h2>Columna 2</h2>
      <p>Esta columna también ocupa el 50% del ancho en pantallas medianas.</p>
    </div>
  </div>
</div>

Ejemplo:

See the Pen Untitled by elivanfx (@ElIvanFX) on CodePen.


Componentes de Bootstrap

Bootstrap viene con una variedad de componentes listos para usar. Aquí te mostramos algunos ejemplos:

Botones

<button type="button" class="btn btn-primary">Botón Primario</button>
<button type="button" class="btn btn-secondary">Botón Secundario</button>
<button type="button" class="btn btn-success">Botón de Éxito</button>

Ejemplo:

See the Pen Buttons by elivanfx (@ElIvanFX) on CodePen.


Alertas

<div class="alert alert-warning" role="alert">
  ¡Cuidado! Esta es una alerta de advertencia.
</div>

Ejemplo:

See the Pen Untitled by elivanfx (@ElIvanFX) on CodePen.


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"> Mi Sitio </a>
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarContent"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" href="#"> Inicio </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"> Acerca de </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"> Contacto </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Ejemplo:

See the Pen Navbar by elivanfx (@ElIvanFX) on CodePen.


Personalización de Bootstrap

Puedes personalizar Bootstrap utilizando tus propios estilos CSS. Por ejemplo:

.btn-custom {
  background-color: #ff5733;
  color: #fff;
  border-radius: 20px;
}

Y luego, simplemente agrega la clase a tu botón:

<button type="button" class="btn btn-custom">Botón Personalizado</button>

Ejemplo:

See the Pen Custom Button by elivanfx (@ElIvanFX) on CodePen.


Conclusión

Bootstrap es una excelente herramienta para desarrollar sitios web modernos de manera rápida y eficiente. Te permite enfocarte en la funcionalidad y dejar de preocuparte tanto por el diseño. Ahora que conoces los conceptos básicos, ¡experimenta y crea tus propios proyectos!