The responsive grid focuses on consistent spacing widths, rather than column width. Material Design margins and columns follow an 8px square baseline grid. The spacing property is an integer between 0 and 10 inclusive. Spend some time today seeing how easy it is to build a basic responsive grid with react, flexbox & styled-components. By the end of this short piece, you’ll be able to create complex grids with.
Bootstrap is a front-end UI framework, and It makes React developers life easy by offering a powerful grid (container, row and col) system and ready-made UI components to create beautiful user interfaces in less time.
Table of contents
To setup React web app in your system, you must have Node.js installed on your system. Avoid installing Node if you already have installed Node else follow this tutorial on how to install Node?
Verify whether Node js is installed or not in your machine by running the following command:
Setting up React Project
In this first step, we will create React project using create-react-app (CRA). Run the following command to create the basic React app.
Get into the React directory:
Run command to start the React app.
Following will be the React project’s directory structure created by the command we used above.
Methods to Include Bootstrap 4 in React Application
There are various methods available through which we can implement Bootstrap with React application; some of the ways are given below:
- Implement Bootstrap using CDN
- Install Bootstrap NPM library from Node Package Manager.
- Installing and Using React-Bootstrap library in React
- Integrating Reactstrap Bootstrap library in React
In this tutorial, we’ll examine the above methods one by one.
Using Bootstrap Framework via CDN in React App
In this tutorial, we will check out how to implement Bootstrap from a CDN (content delivery network) in React app. This approach is straightforward and requires only
<link /> tag to be inserted in
Why Adding Bootstrap 4 via CDN in React is Not a Best Approach?
React works on Virtual DOM programming concept. In this approach, a virtual module of a user interface is kept in the memory. And combined together with Document Object Model with the help of
ReactDOM. This process is known as reconciliation and known as “virtual DOM” approach in React.
Since Bootstrap 4 is entirely dependent on jQuery and Popper.js and using both of these libraries in React is not considered the best approach because of direct DOM manipulation behavior.
Setting up Bootstrap in React App Using NPM
We can also set up Bootstrap in React using NPM, in our React app. Enter the following command in the terminal and hit enter.
Now, we have installed the bootstrap via NPM package. In the next step, we require to import Bootstrap CSS in our React project. Go to
src/index.js file and include the following code.
Popper.js packages using the following command.
Head over to
src/index.js file and include the given code.
Using React-Bootstrap in React Project
React-Bootstrap is a popular front-end CSS framework, and this framework is exclusively re-built for React framework. It does not require to be included jQuery and Popper.js.
Follow this step by step MERN Stack CRUD App tutorial, and here I have used the React-Bootstrap framework and its various UI components to build the layout of a React app.
You will learn following things in the referred tutorial:
- Install and set up React-Bootstrap in React app.
- Working with grid system such as Container, Row and Col.
- Getting started with Nav, Navbar, Forms, Buttons etc.
Adding reactstrap Library in React Project
The reactstrap is a well-known framework it offers Bootstrap 4 components to React. The reactstrap supports the latest version of Bootstrap. It allows React developers to use various Bootstrap components such as grid system, navigation, icons, typography, forms, buttons, and table.
Run command to install Bootstrap and reactstrap from NPM (node package manager). The reactstrap does not include Bootstrap CSS by default, we will install both the libraries separately.
Next, we will include Bootstrap CSS in the
Now, we are all set to use reactstrap UI components in React app.
Using Reactstrap Buttons in React App
Let’s check out how we can use reactstrap buttons in React app. First, we have to import Buttons component in
src/App.js file and include the Buttons code from reactstrap site.
Reactstrap Navbar in React Project
In this step, we will learn how to use reactstrap navbar to create navigation in React project.
There is no other option than reactstrap navbar, to create responsive navigation bar in React app. It works flawlessly on every device type. The reactstrap navbar element includes many other small components such as Collapse, Navbar, NavbarToggler, Nav, NavItem, NavLink, DropDownMenu, etc.
As you can see, we are also imported Fragment in react. React Fragment groups a list of children without including extra nodes to the DOM.
Add the reactstrap navbar services in
src/App.js file as mentioned below:
Now, you have created the responsive and intuitive Navigation bar in React app.
Implementing Reactstrap Modal in React
In this step, we will learn how to implement reactstrap modal in react app using reactstrap API.
You can check out reactstrap model here API to make more customization in model elements.
React Bootstrap Layout