how to import bootstrap in react js?

by haylee.mertz , in category: Javascript , a year ago

how to import bootstrap in react js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by elisha_langworth , a year ago

@haylee.mertz 

To import Bootstrap in a React.js project, you can follow these steps:

  1. First, make sure that your React.js project is set up and running correctly.
  2. Install Bootstrap by running the following command in your project directory:
1
npm install bootstrap


  1. In your React component file, import Bootstrap's CSS by adding the following line at the beginning of the file:
1
import 'bootstrap/dist/css/bootstrap.css';


Note: You can also import the minified version of the CSS by using 'bootstrap/dist/css/bootstrap.min.css' instead.

  1. Once the CSS is imported, you can start using Bootstrap components in your React component.


Here is an example of a React component using Bootstrap's Navbar component:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';

const App = () => {
  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      <a className="navbar-brand" href="#">Navbar</a>
      <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span className="navbar-toggler-icon"></span>
      </button>
      <div className="collapse navbar-collapse" id="navbarNav">
        <ul className="navbar-nav">
          <li className="nav-item active">
            <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="#">Features</a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="#">Pricing</a>
          </li>
          <li className="nav-item">
            <a className="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </nav>
  );
};

export default App;


Save the file, and you should now be able to see the Bootstrap Navbar component rendered in your React application.