{"id":5597,"date":"2020-10-01T11:58:00","date_gmt":"2020-10-01T11:58:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=5597"},"modified":"2021-06-19T11:24:22","modified_gmt":"2021-06-19T11:24:22","slug":"how-to-use-bootstrap-with-react","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/tutorial\/how-to-use-bootstrap-with-react\/","title":{"rendered":"How to use Bootstrap with React?"},"content":{"rendered":"\n

When building a powerful web application, you are undoubtedly aware that Bootstrap <\/strong>and ReactJS<\/strong> continue to be the most popular choice. Using native Bootstrap<\/strong> with ReactJS<\/strong> is not as easy as it seems; however, different methods can be used.<\/gwmw><\/p>\n\n\n\n

Why is it challenging to include Bootstrap components with React?<\/strong><\/gwmw><\/h2>\n\n\n\n

React is a simple library that creates interactive front end web pages, with a component-based architecture that can be nested or put side by side. Hence, adding third party libraries to React is easy.<\/gwmw><\/gwmw><\/p>\n\n\n\n

However, Bootstrap relies heavily on jQuery for powering its user interface components. Since jQuery manipulates the Document Object Model (DOM) directly, Bootstrap contradicts the declarative approach inherent to React. If you are looking to include a vanilla Bootstrap stylesheet with a responsive 12 column grid or components that do not involve jQuery, you can add those components to React with ease. However, components that rely on jQuery cannot be integrated in such a manner.<\/gwmw><\/p>\n\n\n\n

Hence, to use Bootstrap with ReactJS, there must be a way to remove Bootstrap\u2019s jQuery dependency.<\/p>\n\n\n\n

How to use Bootstrap with ReactJS?<\/strong><\/gwmw><\/h2>\n\n\n\n

Option 01: Including raw CSS Bootstrap files into ReactJS<\/strong><\/gwmw><\/h3>\n\n\n\n

The first option to use Bootstrap with ReactJS is to include raw CSS Bootstrap files with ReactJS.<\/gwmw><\/gwmw><\/p>\n\n\n\n

1. Create a new default Create React App project in Your system using the following command:<\/p>\n\n\n\n

npx create-react-app my-project<\/em><\/gwmw><\/pre>\n\n\n\n
The above command creates the project using the base template. To create the project using other available templates, execute the following command:<\/gwmw><\/p>\n\n\n\n
npx create-react-app my-project \u2013template [template-name]<\/em><\/gwmw><\/pre>\n\n\n\n
You can find a list of available templates by searching for \u201ccra-template-*\u201d on npm. Templates are usually named in the format \u201ccra-template-[template-name]. Simply enter the desired template name into the command above.<\/gwmw><\/p>\n\n\n\n
2. Run the new project using the following commands<\/gwmw><\/p>\n\n\n\n
Navigate to the new project using the following command:<\/gwmw><\/p>\n\n\n\n
cd my-project<\/em><\/gwmw><\/gwmw><\/pre>\n\n\n\n
Start npm using the following command:<\/gwmw><\/p>\n\n\n\n
npm start<\/em><\/gwmw><\/pre>\n\n\n\n
3. Link the Bootstrap stylesheet to ReactJS.<\/gwmw><\/p>\n\n\n\n
Install Bootstrap using the following command:<\/gwmw><\/p>\n\n\n\n
npm install bootstrap<\/em><\/gwmw><\/pre>\n\n\n\n
Include the following code in your src\/index.js<\/em> or App.js <\/em>file of the  create-react-app<\/em> package:<\/gwmw><\/p>\n\n\n\n
import \u201cbootstrap\/dist\/bootstrap.min.css\u201d;<\/em><\/gwmw><\/pre>\n\n\n\n
You can now use Bootstrap classes with ReactJS code after the Bootstrap stylesheet is successfully integrated into a React app.<\/gwmw><\/p>\n\n\n\n
To best use ReactJS, it would be ideal to import Bootstrap classes as React components. Luckily, this is done by utilizing third-party libraries like react-bootstrap<\/em> and reactstrap,<\/em> to do so.<\/gwmw><\/p>\n\n\n\n
Option 02: Using the react-bootstrap library<\/strong><\/gwmw><\/h3>\n\n\n\n
The react-bootstrap<\/em> library is one of the most used libraries that replaced Bootstrap JavaScript and has been built from scratch as a true React component, by removing jQuery dependencies. The latest version of the library only supports Bootstrap v4.<\/gwmw><\/p>\n\n\n\n
Installing the react-bootstrap library<\/strong><\/gwmw><\/p>\n\n\n\n
To use the library, you can install it using the following command:<\/gwmw><\/p>\n\n\n\n
npm install react-bootstrap bootstrap<\/em><\/gwmw><\/pre>\n\n\n\n
Using the components of react-bootstrap<\/strong><\/gwmw><\/p>\n\n\n\n
To use the components, simply import individual components like react-bootstrap\/Button<\/em> instead of the entire library. This ensures that you only pull the components you use, thus reducing the code you send to the client.<\/p>\n\n\n\n
import Button from \u201creact-bootstrap\/Button\u201d;<\/em><\/gwmw><\/pre>\n\n\n\n
The available components are alerts, accordion, badge, breadcrumb, buttons, button group, cards, carousel, dropdowns, forms, input group, images, figures, jumbotron, list group, modal, navs, navbar, overlays, pagination, popovers, progress, spinners, table, tables, tooltips, and toasts.<\/gwmw><\/p>\n\n\n\n
Importing Stylesheets<\/strong><\/gwmw><\/p>\n\n\n\n
While react-bootstrap<\/em> does not necessarily depend on a very precise version of Bootstrap, some stylesheet is still required to use these components. Run the following command:<\/gwmw><\/p>\n\n\n\n
npm install bootstrap<\/em><\/gwmw><\/pre>\n\n\n\n
Now, you can include the following code in your src\/index.js<\/em> or App.js <\/em>file:<\/gwmw><\/p>\n\n\n\n
import \u201cbootstrap\/dist\/css\/bootstrap.min.css\u201d;<\/em><\/gwmw><\/pre>\n\n\n\n
Sass<\/strong><\/gwmw><\/p>\n\n\n\n
If you are using Sass, make sure you install the node-sass package. You can then include Bootstrap\u2019s source Sass files in your main Sass file. This is applicable to the typical create-react-app <\/em>application. Include the following code in your src\/App.scss<\/em> file.<\/gwmw><\/p>\n\n\n\n
import \u201c~bootstrap\/scss\/bootstrap\u201d;<\/em><\/gwmw><\/pre>\n\n\n\n
Option 03: Using the reactstrap library<\/strong><\/h3>\n\n\n\n
The reactstrap<\/em> library has specifically been created for use with Bootstrap v4, and it allows you to import relevant Bootstrap components into your ReactJS project.<\/gwmw><\/p>\n\n\n\n
Installing the reactstrap library<\/strong><\/gwmw><\/p>\n\n\n\n
To use the library, you can install it using the following command:<\/gwmw><\/p>\n\n\n\n
npm install reactstrap react react-dom<\/em><\/gwmw><\/pre>\n\n\n\n
Using the components of reactstrap<\/strong><\/p>\n\n\n\n
To use the relevant components, you can simply import the required components instead of the entire library. This ensures that you only pull the components you use, thus reducing the code you send to the client. For example:<\/gwmw><\/p>\n\n\n\n
import { Button } from \u2018reactstrap\u2019;<\/em><\/gwmw><\/gwmw><\/pre>\n\n\n\n
The available components are alerts, badge, breadcrumbs, button dropdown, button group, button, card, carousel, collapse, dropdowns, fade, form, input group, jumbotron, layout, list group, media, modals, navbar, navs, pagination, popovers, progress, spinners, tables, tabs, toasts, and tooltips.<\/gwmw><\/p>\n\n\n\n
Importing Stylesheets<\/strong><\/p>\n\n\n\n
To make the library work as expected, you need to add the Bootstrap CSS manually. Run the following command:<\/gwmw><\/p>\n\n\n\n
npm install bootstrap<\/em><\/gwmw><\/pre>\n\n\n\n
And, import Bootstrap CSS into your reactstrap\u2019s src\/index.js<\/em> file by including the following code:<\/p>\n\n\n\n
import \u201cbootstrap\/dist\/css\/bootstrap.css\u201d;<\/em><\/gwmw><\/pre>\n\n\n\n
Option 04: Other Third-party Modules<\/strong><\/gwmw><\/h3>\n\n\n\n
There are additional options to react-bootstrap<\/em> and reactstrap<\/em> that can be used to effectively use new Bootstrap like components with ReactJS. Examples include the likes of react-bootstrap-table2<\/em>, a rebuild of react-bootstrap-table<\/em>.<\/gwmw><\/p>\n\n\n\n
As the name suggests, react-bootstrap-table2<\/em> is used explicitly for creating dynamic tables for web applications. As the name is already taken on npm, the installation of this module requires running the following command:<\/gwmw><\/p>\n\n\n\n
npm install react-bootstrap-table-next<\/em><\/gwmw><\/pre>\n\n\n\n
After installation, you need to add the react-bootstrap-table2<\/em> CSS into your application before using the module. Add the following code before you use the module:<\/gwmw><\/p>\n\n\n\n
import \u201creact-bootstrap-table-next\/dist\/react-bootstrap-table2.min.css\u201d;<\/em><\/gwmw><\/pre>\n\n\n\n
Conclusion<\/strong><\/h2>\n\n\n\n
The option you use to include Bootstrap <\/strong>with ReactJS <\/strong>depends on the version of Bootstrap<\/strong> you are using, the kind of components required, and the flexibility you desire.<\/gwmw><\/p>\n","protected":false},"excerpt":{"rendered":"
When building a powerful web application, you are undoubtedly aware that Bootstrap and ReactJS continue to be the most popular choice. Using native Bootstrap with ReactJS is not as easy as it seems; however, different methods can be used. Why is it challenging to include Bootstrap components with React? React is a simple library that […]<\/p>\n","protected":false},"author":2,"featured_media":5598,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[145,62],"tags":[107,146,133,110,217],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/09\/how-to-use-bootstrap-with-react.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1sh","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5597"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=5597"}],"version-history":[{"count":2,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5597\/revisions"}],"predecessor-version":[{"id":6255,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/5597\/revisions\/6255"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/5598"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=5597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=5597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=5597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}