Learning React Bootstrap: Part 1: Installing and Configuring

Learning React Bootstrap

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


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';


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 (
       <Col>Column 1</Col>
       <Col>Column 2</Col>

export default App;