React with Bootstrap

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>
        <h2>Welcome to React Router Tutorial</h2>
        {
          <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>
  );
}