How to import components from React Bootstrap

To create responsive and visually appealing web applications, developers generally use the React Bootstrap library that combines the power of React and Bootstrap. This library provides a set of pre-built components that can be integrated into React projects, eliminating the need to create UI components from scratch. We will learn how to import and use components from the React Bootstrap library in a React application.

Note: The examples below have React Bootstrap installed and set up for simplicity.

There are multiple ways of importing components from the React Bootstrap library. We will look at them one by one with working code examples.

Method 1: Import single components

To import a single component from the react-bootstrap library, e.g., the Button component, we use the following command:

import { Button } from 'react-bootstrap';
Import the Button component

To use the Button component inside a React component, we simply call its instance with various properties like variant and event handlers like onClick. Let’s look at an example of this.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
Use the Button component

Code explanation:

  • Line 2: We import the Button component from the react-bootstrap library.

  • Lines 5–7: We define a handleButtonClick function that will be called when the button is clicked.

  • Lines 11–16: We use the Button component and customize it by setting the variant to primary and adding an onClick event handler that calls the handleButtonClick function.

Method 2: Import multiple components

We have looked at how to import a single component, but we can also import multiple components from the react-bootstrap library with a single import statement. We use the following command to do so:

import { Button, Navbar, Nav } from 'react-bootstrap';
Import multiple components

Let’s create a simple navigation bar by importing and using multiple components from the react-bootstrap library.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
Import and use multiple components

Code explanation:

  • Line 2: We import the Button, Navbar, and Nav components from the react-bootstrap library.

  • Lines 5–7: We define a handleButtonClick function that will be called when the button is clicked.

  • Line 11: We create a Navbar component. This component creates a navigation bar at the top of the page.

  • Line 12: We use the Navbar.Brand component to create a brand name.

  • Line 13: We use the Nav component to create a navigation menu.

  • Lines 14–16: We use three Nav.Link components—About, Services, and Contact—to represent navigation links.

  • Lines 22–27: We use the Button component and customize it by setting the variant to primary and adding an onClick event handler that calls the handleButtonClick function.

Importing multiple components can be handy sometimes, since we can eliminate the need for multiple import statements to import a single component from the library.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved