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