How to Import Bootstrap in React JS?

How to Import Bootstrap in React JS?

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.

After adding the above code line, you can use the bootstrap framework based on the CSS styling layout. But if you want to use bootstrap components that are dependent on jQuery or javascript then you also need to add some JS libraries. We will add the jquery-min.js, popper.js, and bootstrap.js file.

So add the following code lines just before the end of </body> tag.

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.

Here is also the same case, you can only use the CSS classes and utilities by importing the above line. But if you also want to use jQuery and javascript components then you need to also install jQuery and Popper packages. See the following code line to install them.

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.

Now you can also use the bootstrap components that are dependent on jQuery and Javascript. Now you can add the bootstrap class to an element in the react app component file and add style it using the CSS. You can also add the inline style in react component.

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.

Conslusion

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.

You May Also Like

About the Author: Aman Mehra

Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+ years of experience. I love coding and help to people with this blog.

Leave a Reply

Your email address will not be published.