React with Bootstrap
Jump to navigation
Jump to search
Introduction
This page is to provide information on how to use bootstrap with React. At the time we used bootstrap 5.0.2 and React 17.0.2.
Install Packages
Install the packages
npm install react-bootstrap bootstrap
Add CSS to Index.js
Import css
import 'bootstrap/dist/css/bootstrap.min.css';
Create Menu in App.js
function App() {
return (
<Router>
<div>
{
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="/home">
microblog-react
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<Link to={"/"} aria-current="page" className="nav-link">
Home
</Link>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<Link
to={"/test"}
aria-current="page"
className="nav-link"
>
Explore
</Link>
</li>
...
</ul>
</div>
</div>
</nav>
}
<hr />
...
<Switch>
<Route exact path="/" component={Home} />
...
<Route path="/test" component={Test} />
</Switch>
</div>
</Router>
);
}