React Bootstrap

{% youtube %} https://youtube.com/watch?v=WtyTkA-BMhI {% endyoutube %}

Puedes utilizar Bootstrap 3 en tu proyecto de React a través de la librería react-bootstrap.

Nota: Esta explicación aplica para Bootstrap 3. Los desarrolladores de react-bootstrap están trabajando en el soporte para Bootstrap 4 que puedes monitorear siguiendo este issue. Otra opción para Bootstrap 4 es reactstrap.

El primer paso para utilizar react-bootstrap es instalar la librería en tu proyecto.

Con npm:

$ npm install --save react-bootstrap

Con Yarn:

$ yarn add react-bootstrap

El siguiente paso es agregar el CSS a tu proyecto:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">

Ahora puedes importar y utilizar la grilla y los componentes de la siguiente forma:

import { Button } from ‘react-bootstrap’;

...

<Button bsStyle="primary">Primary</Button>

Consulta la documentación para más información.