In this tutorial, you will learn how to import bootstrap in react app and how to use components of bootstrap.
As you know Bootstrap is a CSS framework and it’s used to build website layout structures. You can create a mobile-friendly responsive layout using the class name components. It give you lots of built-in style structure, you just have to add the CSS class to the element. It has lots of features like flexbox, card, lightbox, gallery, etc.
React is the most popular UI frontend framework. It is a very lightweight framework. You can build the web interfaces using the react and it is based on the component. It means it loads only a specific component based on the action.
So let’s see how we can import the bootstrap framework in react application and use it. There are some packages that you can install and use in your application for bootstrap layout styling. We will cover this in this tutorial.
We will cover three ways to use the bootstrap framework in your react app. The first is using the CDN link to add in your index file and the other two are using the react packages.
Bootstrap Adding in React Using the CDN Link
In this method, we will integrate bootstrap with React app using the CDN link. The CDN is a content distribution network and it provides high availabilities and performance services to the users.
If you are a beginner then this method is the best and easiest for you. You just have to add the
<link> tag in your index file of react application. The index file (index.html) you can found in the public folder (public/index.html).
When you just install the react application using the
create-react-app then it will create some folder and file structure for you to start your first application. So after installation, you will see the public folder in the root folder of react project.
Open the public folder you will see the index.html file in this folder. So just add the following code in the
<head> tag to this index.html file.
So add the following code lines just before the end of
That’s it for using the CDN link. You have now successfully added the bootstrap CDN link in your React app. It is ready now to use the CSS and UI components.
Bootstrap Adding in React Using Bootstrap Package
In the above method, we added the bootstrap framework using the CDN link but in this method, we will use the NPM (Node Package Manager) tool to install the bootstrap framework in your React app. After installation, you can import the components in your files and use them.
Note: Make sure you have installed the NPM. To check it run this
npm -v command in your terminal. If you found it has not been installed then check this tutorial for reference how to install NPM and create react app?.
To install the bootstrap framework package in react, run the following command in your terminal. It will take some time (depend on your internet connection) to install all the bootstrap library files.
After installing the package, you can use the CSS classes style by import it into your index.js file of react app. If you have created the react project using this
create-react-app command then open your src folder and you will see the index.js file. So add the following code line into this file in starting.
It will install the jquery and popper.js package and now you can import them all together in the src/index.js file. So open the index.js file and add the following code line to import them.
Bootstrap Adding in React Using React-Bootstrap Package
React Bootstrap package is one of the most popular package and it has many components and features that you can use in React app. It will make your react app better styling layout and mobile-friendly.
It provides you many components to make the application layout interface and represent the different sections of layouts like form control, navigation, highlighter, indicators, header, footer, etc.
So let’s see how to install the react-bootstrap package and import the components of it and use it.
To install the react-bootstrap package, run the following command in your terminal. Make sure you are in the root folder of react app.
When you successfully installed both packages react-bootstrap and bootstrap, then you need to import the bootstrap library in index.js or app.js file. See the following code line to import.
Now you have configured the bootstrap CSS library with react app and it is ready to use the components. So let’s import the components from the React Bootstrap package.
Syntax of importing single/multiple components
Syntax of importing individual components
Import Single Component
To import the single component from the react-bootstrap, you need to specify the component name. You can find the components here. Add the following code line to import single component.
You will use this Button component inside the render() function. You can also add more properties to this Button component like variant, type, as, value, etc. See the following full example code.
Import Single Individually Component
As in the above example, you imported the single component from the package but it will load the full library. But if you want to load only a specific component and import then use the following line of code.
The above code line only imports the Image component from the whole library to load fast. Use the other properties of components if required. See the following full example code.
Import Multiple Components
In the above two examples, you learned how to import a single component and a single individual component. But in this way, you can import multiple components in a single line of code. You just have to specify the name of components separated by a comma. See the following example.
So in the above example, we imported the Form, Col, and Button components and use them to create a simple basic form.
So, in this tutorial, you learned how to import the bootstrap library into your react app using the CDN link and NPM packages. With the CDN link, you just have to add the <link> tag into the public/index.html file and other jquery and popper.js files before the </body> tag.
You also learned how to install the react-bootstrap package using the NPM and how to use it with single component importing, single individual component importing and multiple components importing.