The Best Way to Integrate Bootstrap React for Your Next Project
Users have different screen resolutions, browsers, and devices, making building responsive user interfaces a requirement for all modern applications. That’s why Bootstrap, a framework that allows applications to look consistent across every platform, continues to be a staple for styling web applications.
Similarly, React remains one of the most popular front-end frameworks for JavaScript, known for its component-based architecture, efficient virtual DOM rendering, and statefulness, among others. When combined with Bootstrap, React enables developers to easily craft responsive and aesthetic applications.
Read on below to discover how to get started with React Bootstrap projects. Additionally, you’ll learn about using Bootstrap to create responsive navbars, align elements using the grid layout, and more.
Note: When using other libraries and tools, you should always consider whether they’re built for responsiveness or not. For instance, you can include Froala in your applications as an HTML editor. Since it’s responsive right off the bat, you won’t have to do much styling or layout adjustments.
Setting up Your Bootstrap React Development Environment
To get started with integrating React Bootstrap, you’ll need some core tools that you normally use for developing web applications. Of course, you’ll also need to download and install Bootstrap.
Install Node.js
Node.js is an open-source runtime environment for JavaScript. Although primarily focused on server-side programming, it’s also responsible for providing the environment required by other necessary front-end tools.
For example, tools like NPM or Yarn that manage dependencies require Node.js. Additionally, bundlers such as Webpack or Babel also rely on Node.js.
To install Node.js, go to their website and download and run the installer. Afterwards, check whether the installation is successful by opening your Command Line Interface (CLI) and typing the following command:
node -vIf this returns a version, then it’s good to go.
Get NPM
NPM is an open-source collection of JavaScript software dependencies that allow developers to borrow and share packages. It revolves around interacting with the CLI to manage dependencies in the NPM registry.
If you’ve already installed Node.js, then normally you don’t need to do anything else to get NPM, as it already comes bundled with Node.js. To check if NPM is working, type the following command, which should give you the currently installed version:
npm -vNote: If you need to download and install packages globally (i.e., not on individual projects), use a Node version manager to install Node.js and NPM.
Create a Simple React Bootstrap Application
Before using React Bootstrap, you need to have a React project. If you don’t already have a React app, you can create one by using Create React App (CRA). It’s an “officially supported way” from React that lets you easily create single-page React applications.
In your CLI, run the following:
npx create-react-app react-bootstrapThis will create a new React application in the react-bootstrap project directory. The “npx” part ensures that you’re using the latest version of create-react-app without a global installation. Once you’re done, you can run “cd react-bootstrap” to navigate to your folder.
Before you get moving, let’s quickly go through the basic structure of a React application, shown in the image below.
A React application typically has the following structure:
- node_modules: A subdirectory that contains installed dependencies (for example, React, Bootstrap, etc.).
- public: Contains the static files and your “index.html” file. These are assets that don’t change during runtime.The “index.html” file is where React renders your entire app; hence, you never edit this file directly. Instead, React dynamically injects React components into the “root” element.
- src: Includes all main source code, including your React components, styles, and logic. This is the core of your React application, with “index.js” as the entry point of the application.
- .gitignore: Files to ignore in Git.
- package-lock.json: Locks installed package versions.
- package.json: Where the project’s dependencies and metadata are located.
- README.md: Your React project’s documentation.
You can also build your own React components, which are self-contained UI blocks that you can import. For example, you can create a custom button component that uses Bootstrap CSS for styling.
Now that you have a React application, as well as a quick refresher on React concepts, you can move to adding the React Bootstrap library.
Download Bootstrap
There are different ways to install Bootstrap 5, but here are the three most relevant ones:
via compiled CSS and JS
These are ready-to-use codes, which include the compiled and minified Bootstrap CSS bundles and JS plugins. However, documentation, source files, or optional JavaScript dependencies (e.g., Popper, jQuery, etc.), are out of the scope.
If all you need are the Bootstrap components for stylesheets and basic JS (and not animations like popovers or tooltips), then this installation is for you.
To add Bootstrap via compiled CSS and JavaScript, click here. Afterwards, you can include the files that you need in your React app’s folder.
via the Bootstrap CDN
If you’re just testing out Bootstrap, or if you want to make it work right away, then you can use it via CDN. With this, you skip the download and instead deliver a cached version of Bootstrap to your React app.
To add Bootstrap through CDN, include the following code in your index.html file:
<head> <!--other head items--> ... <!--Bootstrap 5 CSS--> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body> <!--other body items--> <!--Bootstrap 5 JavaScript--> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body>
This gives you the latest delivered version (Bootstrap 5, currently). If you want to import Popper, jQuery, and other dependencies, you can add them before the JavaScript link through CDN as well.
via Package Manager
Lastly, you can install React Bootstrap packages using NPM. Using your CLI, head to your project directory and run the following:
npm install [email protected]This installs the React Bootstrap package in “node_modules,” making it available for your React components. If you need more Bootstrap 5 components, just add them after the keyword (e.g., npm install [email protected] jquery popper.js for Popper and jQuery). You should then see the dependencies in your package.json file:
"dependencies": {
...
"bootstrap": "^5.3.3",
"jquery": "^3.7.1",
"popper.js": "^1.16.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
...
},
Afterwards, to load Bootstrap CSS and JavaScript throughout your app, add the following to “src/index.js:”
import 'bootstrap/dist/css/bootstrap.min.css'; import "bootstrap/dist/js/bootstrap.bundle.min";
You should now have the ability to use the Bootstrap library across your application. But you’re not done yet! Try adding some common UI components using different Bootstrap classes.
Building a Responsive React Bootstrap Navbar
First up, create one of the most important parts of a Bootstrap 5 application: the navbar. A navbar, like its name suggests, provides a user with a way to easily navigate through the application.
It usually contains the brand logo and title, followed by the navigation menu. The menu is actually a list of items that are links to other pages of the application.
In this example, you will start by creating a reusable navbar React component. Afterwards, you’ll use this component on two different pages that follow Bootstrap’s grid layout. Finally, you’ll discover how you can customize React Bootstrap further with some styling.
Installing the React Router dependency
To ensure that your navbar actually does something non-static, install the React Router package. It enables you to implement navigation between the pages of your app. In your CLI, run:
npm install react-router-domNow, your index.js should look something like this:
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from "react-router-dom";
import "./App.css";
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import "bootstrap/dist/js/bootstrap.bundle.min";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
Using the Navbar React Bootstrap Component
To get started, create a new component for the navbar. Under the “components” folder of your “src” directory, create a file called “Navbar.jsx” and add the following code:
import React from "react";
import { Link } from "react-router-dom";
function Navbar() {
return (
<nav className="navbar navbar-expand-lg bg-dark">
<div className="container">
<Link className="navbar-brand text-white" to="/">React Bootstrap Example</Link>
<button className="navbar-toggler bg-white" type="button" data-bs-toggle="collapse" data-bs-target="#sampleNavbar" aria-controls="sampleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="sampleNavbar">
<ul className="navbar-nav ms-auto">
<li className="nav-item">
<Link className="nav-link text-white" to="/">Home</Link>
</li>
<li className="nav-item">
<Link className="nav-link text-white" to="/page1">Page 1</Link>
</li>
</ul>
</div>
</div>
</nav>
);
}
export default Navbar;
This creates a component called Navbar. Note that the navbar has several Bootstrap classes within its elements.
For instance, the “bg-dark” class makes the React Bootstrap component’s background a dark gray hue. Similarly, “text-white” colors the navigation links white.
Making the React Bootstrap Navbar Responsive
In the code above, the navbar is already responsive because of the “navbar-expand-lg” and “collapse navbar-collapse” classes.
The former makes the navbar expand on larger screens. This means that as the screen size approaches the “large” breakpoint, it expands the navbar and shows the elements within it. The latter, on the other hand, collapses the navbar elements as the screen size decreases through the breakpoint.
You then add a button that the user can interact with to show the collapsed navbar elements on smaller screen sizes. Now, you have a responsive navbar! The next step is designing the sample pages using Bootstrap’s grid layout.
Implementing a Bootstrap Grid Layout
For responsive design, the Bootstrap framework offers a grid layout (among other methods). This means that it lays out UI components in terms of rows and columns. This makes building user interfaces that are responsive easier no matter the user’s browser.
Using React Bootstrap’s grid layout is practically the same as using Bootstrap on non-react apps:
- It’s as simple as indicating whether a div element is a row or a column.
- The screen is always divided into 12 columns.
- You can nest columns and rows.
- You can divide a row into specific columns of varying width (e.g., having two divs with classes “col-8” and “col-4” means that one div occupies 8 columns while the other occupies 4).
- You can specify on which breakpoint the columns resize (e.g., “col-lg-8 col-12” means that the element takes up 8 columns on larger screens and takes all 12 columns on smaller ones).
In this guide’s example, create two more files under the “components” folder: “Home.jsx” and “Page1.jsx.” In your Home.jsx file, add:
import React from "react";
import sampleImage from "../assets/ski.png";
function Home() {
return (
<div className="home-container">
<div className="row">
{/* Top row - Full-width image */}
<div className="col-12">
<img src={sampleImage} alt="Sample" className="img-fluid rounded" />
</div>
</div>
<div className="row mt-4">
{/* Bottom row - Two text columns */}
<div className="col-md-6">
<div className="p-3">
<h3>Left Column</h3>
<p>This is some text in the left column. Using Bootstrap’s grid layout ensures responsiveness.</p>
</div>
</div>
<div className="col-md-6">
<div className="p-3">
<h3>Right Column</h3>
<p>This is some text in the right column. The layout adjusts based on screen size.</p>
</div>
</div>
</div>
</div>
);
}
export default Home;
Here, you’re displaying two rows: one that contains a full-width image and another that has two columns of text. The full-width image takes all twelve columns, while the two text columns take up an equal number of 6.
If you resize the browser window, you’ll notice that after a certain size, the two text columns change their positions. Instead of remaining side by side, they’re now on top of each other. That’s because of the “col-md-6” class, which ensures that contents stay readable even on smaller screens.
Now, open your “Page1.jsx” and add the following code:
import React from "react";
function Page1() {
return (
<div>
<h2>Welcome to Page 1!</h2>
<p>This is an additional page for the React Bootstrap implementation.</p>
</div>
);
}
export default Page1;
This sample code doesn’t demonstrate the grid layout, but you’ll use this to test out the navigation part. Now, to put all three components together (navbar, home page, and page 1), replace your App.js file’s contents with:
import React from "react";
import { Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import Page1 from "./components/Page1";
function App() {
return (
<>
<Navbar />
<div className="container mt-4">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/page1" element={<Page1 />} />
</Routes>
</div>
</>
);
}
export default App;
First, you need to import the three components. You also need to import the components from the React Router dependency. Afterwards, define your navbar, followed by your container and routes.
Once you’re done, run your application with:
npm startYou should see something like this:
Try playing around with the example. Reduce the browser width and see the navbar elements collapse under a button with the hamburger icon. See how and on which breakpoint (in px) the two columns change their orientation.
Now, click the “Page 1” link on the navbar to see something like:
From here, you should have the ability to navigate back to the homepage. And that’s it! You now have the basic implementation of Bootstrap in React.
The next step is to further customize it depending on what you need. And before you go, read on below to learn how to customize Bootstrap styles, as well as some best practices and common issues.
Customizing Styles in React Bootstrap
What if you wanted the navbar’s background color to be blue? Or maybe implement your own font family throughout the app? Or even override some default behaviors from Bootstrap?
All these are possible thanks to its customization.
From the sample app above, tweak your application a bit. Go to your App.css file and append the following code:
/* Custom navbar background */
.bg-custom {
background-color: #0098F7;
}
/* Custom image styling */
.home-img {
max-height: 400px;
width: 100%;
object-fit: cover;
border-radius: 10px;
}
/* Custom box styling */
.custom-box {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 8px;
}
These additional classes change the navbar’s background color, the image styling, and the styling for the text columns. To implement these, add them as classes in your elements.
- In your Navbar.jsx, replace “bg-dark” with “bg-custom”
- In Home.jsx, add “home-img” to your image element and “custom-box” to your columns
These should change your home page’s look to:
Notice how the home page looks much cleaner now with the text borders, better image sizing, and the blue navbar. You can do a lot more with customizing Bootstrap to your liking. Explore more of it by reading the Bootstrap documentation page!
Best Practices when Using Bootstrap with React
Bootstrap, thankfully, is also an accessibility and SEO-friendly JavaScript framework. This means that users who use screen readers will have a better time on your app. Additionally, web crawlers for SEO rankings will understand your web app better.
Here are some things to consider when creating React Bootstrap applications.
- Use WAI-ARIA keywords like “aria-controls” and “aria-label.”
- Include ARIA roles and attributes to provide more context on how the components are used.
- Test specific color combinations and modify default Bootstrap color themes to abide by WCAG color contrast ratios.
- Use the “visually-hidden” class to hide content that should be visually hidden but should also be accessible to assistive technologies.
Troubleshooting Common React Bootstrap Issues
When working with Bootstrap in a React environment, you might run into some common issues. Here are some of them as well as their solutions.
- Navbar toggler not working: Ensure that Bootstrap’s JavaScript is loaded. If you installed it via NPM, you should import it in index.js.
- Bootstrap styles not applying: Similarly, ensure that the CSS files are loaded. Again, check your index.js if you installed Bootstrap via NPM. If you’re using CDN, check that the link tag is correctly included in your index.html.
- Bootstrap grid layout not working: Be sure that for every row, all columns should add up to 12. Also, check if any CSS file is overriding Bootstrap.
- Styling issues when using custom CSS: Ensure that your custom styles are loaded after Bootstrap’s stylesheet in your project.
Conclusion
In this tutorial, you learned the basics of implementing Bootstrap in React. Along the way, you also explored a sample app that demonstrates the use of some components, including the Bootstrap navbar and grid layout.
Tools like Bootstrap and React streamline the development process while further improving quality.
So why not learn more about the different Bootstrap components and React implementations? Include jQuery or other custom CSS or SCSS. Maybe test out other responsive tools that go well with React and Bootstrap, like Froala Editor.
What you do next is up to you. Happy coding!
No comment yet, add your voice below!