Learning React Bootstrap

• Part 1: Installing and Configuring
• Part 2: Grid System Components
• Part 3: Common Components
• Part 4: Reacting to Events

React Bootstrap is a redesign of the popular Bootstrap front-end framework for use in React projects.

Installing

For any existing React project, the React Bootstrap library (and Bootstrap itself) can be added through NPM:

npm install react-bootstrap bootstrap

Once installed, its components can be accessed through importing them in a group or, more ideally, individually from a specified path. For example, to import the Button component exclusively, it would look like the following:

import Button from 'react-bootstrap/Button';

Alternatively, multiple components can be imported as a group:

import {Container, Row, Col} from 'react-bootstrap';

Configuring

As a library designed for React, React-Bootstrap needs one more additional resource: Bootstrap itself. As a primarily CSS library, it must be imported as in either “src/index.js” or “App.js” to make sure all CSS definitions are part of the project.

import 'bootstrap/dist/css/bootstrap.min.css';

Once installed and configured, Bootstrap classes can be used as defined React-Bootstrap components:

import React from 'react';
import {Container, Row, Col} from 'react-bootstrap';

function App() {
  return (
   <Container>
     <Row>
       <Col>Column 1</Col>
       <Col>Column 2</Col>
     </Row>
   </Container>
  );
}

export default App;