How to Import Components from React Bootstrap

May 18, 2020 • 6 Minute Read

Introduction

React Bootstrap is one of the widely used libraries in React, and its various components are used in React apps to make them mobile-friendly. It has tons of components that give apps the various details of layout, form controls, information indicators, and navigational components.

In this guide, you are going to learn how to add React Bootstrap into a React app by importing and using the React Bootstrap components in your React components.

Adding React Bootstrap into a React App

Install the React Bootstrap library by using the below npm command.

      npm install react-bootstrap bootstrap

After installing the above two libraries, the next step is to add bootstrap CSS file into either index.js or app.js like this:

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

Alternatively, if you are using SASS in your app, you can add it as shown below.

App.scss

      @import "~bootstrap/scss/bootstrap";

App.js

      import './App.scss';

Now you are good to go and can proceed further with React Bootstrap by importing various components into your React app.

Importing Components from React Bootstrap

Now that you have installed the bootstrap library and configured the CSS file into your app, it’s time to import the components from react-bootstrap.

The basic syntax for importing anything from react-bootstrap looks like this:

      import { COMPONENT_NAME } from 'react-bootstrap';

Or:

      import COMPONENT_NAME from 'react-bootstrap/COMPONENT_NAME';

It is the basic syntax that’s used to import the specific components from the library, but you can still import it using other ways that you will learn in the next section of this guide.

Import Components from the React Bootstrap Library

Importing Single Components

You can import any single component from react-bootstrap as explained below.

          import React, { Component } from "react";
import { Image } from "react-bootstrap";

class SingleComponent extends Component {
  render() {
    return (
      <div>
        <Image
          src="https://dummyimage.com/170x180/000/fff.png&text=TEST123"
          thumbnail
        />
      </div>
    );
  }
}

export default SingleComponent;
    

In the above example, to import the single component called Image from the react-bootstrap library, the command used is:

      import { Image } from "react-bootstrap";

Inside the render() function, the <Image/> component is used along with various properties like href and another supporting property called thumbnail.

This is how you can import any single component from React Bootstrap:

Import Single Components Individually

You can import and use any React Bootstrap components individually from react-bootstrap rather than importing them from the complete library as shown below.

          import React, { Component } from "react";
import Breadcrumb from "react-bootstrap/Breadcrumb";

class SingleIndividualComp extends Component {
  render() {
    return (
      <Breadcrumb>
        <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
        <Breadcrumb.Item href="#">Profile</Breadcrumb.Item>
        <Breadcrumb.Item active>Test123</Breadcrumb.Item>
      </Breadcrumb>
    );
  }
}

export default SingleIndividualComp;
    

As shown in the above example, Breadcrumb individually imported by using this command:

      import Breadcrumb from "react-bootstrap/Breadcrumb";

Pulling the specific component from the library rather than picking up the whole package improves the performance while fetching and rendering the particular component.

Use React Bootstrap Default Syntax

The default syntax is a way to use React Bootstrap dynamically without naming the specific components, as done previously.

          import React, { Component } from "react";
import * as ReactBootstrap from "react-bootstrap";

class DynamicImport extends Component {
  render() {
    return (
      <ReactBootstrap.Button bsStyle="success" bsSize="small">
        Something
      </ReactBootstrap.Button>
    );
  }
}

export default DynamicImport;
    

The above example does not import any components by name but used a dynamic import format to fetch a specific component when needed, as shown below.

      import * as ReactBootstrap from "react-bootstrap";

When you need any components while developing the UI, you have to use prefix ReactBoootstrap.comp_name followed by the specific component name, which makes it easier to use.

Importing Multiple Components

So far in this guide, you have learned how to import a single specific component, but you can import multiple components from the single import statement as well.

Below is a simple example that shows how to import multiple components from react-bootstrap from a single import statement.

          import React, { Component } from "react";
import { Form, Col, Button } from "react-bootstrap";

class MultipleImport extends Component {
  render() {
    return (
      <Form>
        <Form.Row>
          <Col>
            <Form.Control placeholder="First name..." />
          </Col>
          <Col>
            <Form.Control placeholder="Last name..." />
          </Col>
          <Col>
            <Button>Submit</Button>
          </Col>
        </Form.Row>
      </Form>
    );
  }
}

export default MultipleImport;
    

In the above example, three components, Form, Col, and Button, are imported from the single import statement.

      import { Form, Col, Button } from "react-bootstrap";

It’s pretty handy sometimes because you don’t need to have multiple import statements that import a single component from the same library concurrently.

Conclusion

In this guide, you have learned the various methods for importing components, like importing single components, individual components, dynamic components, and multiple components using a single import statement.

You can choose any of these methods, but when it comes to the performance, the multiple components import statement or individual component import are way better than the others. I hope this guide helps you to play around importing various components. That was it from this guide; be safe, and keep coding.