Cómo usar Bootstrap en Componentes React

Una vez has instalado Bootstrap en tu aplicación React tienes a tu disposición un potente set de componentes y utilidades que te ayudarán a desarrollar un sitio web atractivo, interactivo y adaptable a distintos tipos de dispositivos.

Bootstrap es una caja de herramientas potente y flexible. Puedes usarlo de una forma muy simple o bastante más sofisticada, todo depende de las necesidades de tu aplicación y del conocimiento que tengas de la herramienta.

Este post muestra un uso básico, orientado a principiantes en el uso de Bootstrap en componentes React. Pronto llegarán posts dedicados a usos más avanzados 📝.

Tabla de contenidos

• Usando Componentes de Bootstrap
• Usando Clases de Bootstrap
• Usando componentes de React Bootstrap
• La práctica hace al maestro

En los ejemplos que te comparto estoy utilizando fragmentos de código tomados del sitio web de Bootstrap en su versión más actualizada al día de hoy.

Sin embargo, cuando leas este artículo, es posible que ya exista una versión más actual de Bootstrap, por lo que te recomiendo que no uses el código que encontrarás aquí como ejemplo, sino que lo obtengas directamente de su sitio web.

Al usar Bootstrap, es una buena idea guardar su sitio web en los marcadores de tu navegador; vas a recurrir a él constantemente 🤓.

Usando Componentes de Bootstrap

En la documentación de Bootstrap, en la sección de «Componentes«, busca el componente que quieras usar, selecciona el ejemplo que mejor se ajuste a tus necesidades y copia el código de muestra.

Por ejemplo, este es el código para un componente «dropdown» (desplegable):

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Pega el código que copiaste en el código JSX del componente React dentro del cual quieras usarlo.

Teniendo en cuenta que el código que ofrece la documentación de Bootstrap es código HTML, necesitarás hacerle algunos ajustes para que sea compatible con la sintaxis JSX.

Los ajustes necesarios dependen de cada componente. En el caso del componente dropdown anterior, sólo es necesario sustituir el atributo class por className.

Adicionalmente, puedes modificar las clases de los elementos que lo componen, cambiar su contenido, etc.

Por ejemplo, en el componente dropdown anterior, en el elemento <button> sustituí la clase btn-secondary por btn-dark para obtener el color que deseaba para el botón:

import React from "react";

function App() {

  return (
      <div className="main-container">
        <h1>Bootstrap & React</h1>
        <p className="mb-4 fs-5">This is an example of a Bootstrap component <br />used within a React component:</p>

        <div className="dropdown">
          <button className="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown button
          </button>
          <ul className="dropdown-menu">
            <li><a className="dropdown-item" href="#">Action</a></li>
            <li><a className="dropdown-item" href="#">Another action</a></li>
            <li><a className="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </div>
      </div>
  )
}

export default App;

Y con estos simples pasos, el componente de Bootstrap ya está integrado y funcionando correctamente como parte del componente React 🥳:

Usando Clases de Bootstrap

Además del uso de los componentes, podrás aplicar las clases CSS que nos ofrece Bootstrap a cualquier elemento JSX de tus componentes React.

Un ejemplo de ese uso lo puedes ver en el código anterior, en el cual apliqué las clases mb-4 y fs-5 a un elemento <p> para definir su margen inferior y su tamaño de fuente:

{/* Resto del código... */}
  <p className="mb-4 fs-5">This is an example of a Bootstrap component <br />used within a React component:</p>
{/* Resto del código... */}

Si no lo has hecho aún, te recomiendo que explores la documentación del sitio web de Bootstrap para conocer la gran variedad de clases que puedes usar para gestionar:

• colores
• tipografías
• espaciados
• sombras
• opacidades
• layouts
• breakpoints
• etc.

Usando componentes de React Bootstrap

Como vimos en el post donde te compartí 3 métodos para integrar Bootstrap en una aplicación desarrollada con React, uno de esos métodos es mediante el uso de React Bootstrap.

Si ya tienes esta librería instalada en tu aplicación, dirígete al sitio web de React Bootstrap y en la sección de «Componentes«, busca el componente que quieras usar, selecciona el ejemplo que mejor se ajuste a tus necesidades y copia el código de muestra.

Para usar un componente de React Bootstrap debes:

1. importarlo en el componente React donde deseas utilizarlo, y
2. utilizarlo como utilizas cualquier componente React

Por ejemplo, así quedaría el código de mi componente App.jsx, si utilizara en él un componente «dropdown» de React Bootstrap:

import React from "react";
import Dropdown from 'react-bootstrap/Dropdown';

function App() {

  return (
      <div className="main-container">
        <h1>Bootstrap & React</h1>
        <p className="mb-4 fs-5">This is an example of how to use Bootstrap <br />with React Bootstrap component:</p>

        <Dropdown>
          <Dropdown.Toggle variant="dark" id="dropdown-basic">
            Dropdown button
          </Dropdown.Toggle>

          <Dropdown.Menu>
            <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
            <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
            <Dropdown.Item href="#/action-3">Something else here</Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>
      </div>
  )
}

export default App;

Visto desde el navegador, este componente luce y se comporta de forma idéntica a la implementación del componente dropdown de Bootstrap nativo que vimos anteriormente.

La práctica hace al maestro

Bootstrap ofrece una larga lista de componentes y utilidades, y esa lista se sigue ampliando con cada nueva versión.

No es mi objetivo detallar esta lista, eso ya está hecho de forma muy didáctica en la documentación de Bootstrap.

El propósito de este post es ayudarte a dar tus primeros pasos con esta fantástica herramienta. Luego todo es cuestión de práctica, con la documentación de Bootstrap siempre abierta en una pestaña de nuestro navegador 😉.