Looking for some ways to use designing frameworks such as bootstrap with React? You are at correct place to get an overall idea about it. We will be working with react that is a Frontend library used for creating single page applications.
As react is a view library it doesn’t come with any mechanism that would leverage creating designs that are responsive and sleek. So, we would need to use a designing framework that is bootstrap in our case. There are other designing frameworks available as well such as Foundation, Bulma, etc. We can say that Bootstrap is popular as designing framework as much as react is popular as Frontend library.
In this article, we’ll learn how to use React and Bootstrap, how to add Bootstrap to a React app, how to install React Bootstrap packages, and, finally, how to create a React app with Bootstrap.
Let’s check out the ways for using bootstrap with react:
- Using bootstrap CDN
- Installing bootstrap dependencies in react project
- Installing bootstrap packages for React
Using Bootstrap CDN
Easiest way to use Bootstrap in our react Application. In this method we don’t require any installations or downloads. For using bootstrap using CDN we just need to place a link in the head section of our application.
In this method we need to place a tag like in the section of the index.html file of our react project. Generally, if we create our app using create-react-app then our index.html file would be located in the public folder.
The latest CDN that we need to place in our index file is
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
To get the latest version of CDN you can also visit the site where you need to find the tag according to our usage, in this case, we are using the bootstrap’s minified CSS and we will copy the link tag.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
Installing bootstrap dependencies in react project
We can also install bootstrap as dependency in our application. Installing bootstrap as dependency is preferred when we are using some build tool or module bundler such as Webpack. The command to install bootstrap using npm is
npm install bootstrap
npm install jquery popper.js
Now, we need to import these dependencies in our index.js file similar to bootstrap.
Installing bootstrap packages for React
Installing bootstrap package is the most popular and convenient way to use Bootstrap in our application. There are few libraries that have the react specific implementation of Bootstrap components so that we can use them as JSX components in our application.
We have multiple packages available for using Bootstrap in our application, most popular libraries are:
There are some other alternative UI libraries available such as React-UI and some domain-specific modules like CoreUI-React, React-bootstrap-table.
To install the bootstrap as package run the command:
npm install react-bootstrap
After successfully installing, open the App.js or index.js file in the application and add the imports as given below:
Things to keep in mind
As you can see, I named my project as “react-bootstrap” for creating a demo alongside the article so that everything is well analyzed. But I ran into a problem when I was performing steps for third way to use bootstrap in this article. I would suggest you to not name the project same as the packages you want to install.
You will get the error as shown in above image if your project name and package you want to use are similar.
If you have already created a project and got to know that coincidently the package that you are gonna use is of same name as your project, don’t worry you can make some minor changes so that you don’t need to recreate the project.
First of all you need to change the name of the project directory as it would be of same name as of the package. Second thing that you need to change is the name of the project in the package.json file. Goto package.json file and change the “name” property to the name similar to the new project directory name.
By making these two changes you can now install the package of your choice.
In this article we have covered everything about integrating bootstrap with our react application. We learnt about using bootstrap in multiple ways such as using CDN links for bootstrap in our application, adding bootstrap as dependency and also installing jQuery and popper.js and the last way but the popular one is installing bootstrap as package in our react application.