how to import bootstrap in react js?
how to import bootstrap in react js?
1 answer
by
elisha_langworth ,
8 months ago
@haylee.mertz
To import Bootstrap in a React.js project, you can follow these steps:
- First, make sure that your React.js project is set up and running correctly.
- Install Bootstrap by running the following command in your project directory:
1
|
npm install bootstrap |
- 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.
- 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.