For creating single-page apps and user interfaces, React is among the most well-liked JavaScript frameworks and tools. Its success can be attributed to its adaptability in creating user interfaces utilizing reusable components, rapid development, and a helpful community.
To make its apps more aesthetically pleasing and presentable, React must be used in conjunction with Cascading Style Sheets (CSS). It can take a while to write CSS from scratch.
Instead of concentrating on the main features of a React project, developers could spend a lot of time decorating. The good news is that adding CSS to your React project is simplified by programs and frameworks like Bootstrap.
Bootstrap: What is it?
In order to construct front-end websites, Bootstrap is an open-source CSS framework. Through its extensive library of JavaScript and CSS-based design tools and templates, Bootstrap enables web designers to build flexible and mobile-first websites.
A group of developers from the same business that developed Bootstrap are also responsible for its upkeep. Members of the public can contribute, report bugs, and make changes to the source code, which is kept on GitHub. The most recent version of Bootstrap as of this writing is 5.3.0-alpha1.
Using Bootstrap with React: why?
Time-saving: Bootstrap handles formatting, freeing you up to concentrate on functionality. As a result, you should be concerned about things like whether the submit button transfers data to your backend or API rather than things like the design of your forms or buttons.
Simple to use: After including Bootstrap in your React project, you can easily include the pre-made UI components into your app.
Consistent design: The majority of apps grow with time. If you want to draw in repeat visitors, it’s critical to have a consistent look for your website. Your pages will have a consistent appearance thanks to Bootstrap’s consistent design.
Hundreds of templates to select from: Bootstrap contains a ton of templates, including navbars, buttons, forms, carousels, and dropdowns, to name a few.
Customization is simple: Although Bootstrap includes design templates, you can always change the font size, colour, and other aspects to suit your requirements.
Support from the community: Bootstrap provides a wealth of starting documentation. You may still rely on the large community, though, to keep this CSS framework updated and to continually add new features.
Design for responsiveness: After using Bootstrap in your React project, you can be confident that your web application will be responsive across all screen widths.
React Bootstrap installation instructions
Bootstrap is not automatically installed in a React app. But first, there are a few things we need verify before learning how to add or install Bootstrap in React;
Prerequisites
- Check Node.js installation
Developers may run JavaScript outside of a web browser thanks to this cross-platform JavaScript runtime environment.
Use the following command to see if node.js is set up on your computer:
node -vThe output on your terminal should look something like this if node.js is installed.
You can check the download instructions at https://nodejs.org/en/ if it isn’t already installed.
- Verify that React is installed
While Bootstrap handles the formatting, React is used to build functionality.
To see if React is already installed on your computer, use the following command:
npm list reactIf React is installed globally on your computer, your terminal will look like this.
Make your react application: React apps can be created manually, but it takes a lot of effort. We’ll employ the create-react-app command for our demonstration. To construct a React app, follow these steps:
- Put react-create-app in place on your computer. Utilizing this directive
install -g npm create-react-app- Use this command to create a React application.
create-react-app npx my-appMy-app can be swapped out for any other name of your choosing. Our app’s name in this instance is react-b.
Once installed, your terminal will look somewhat like this:
Execute these instructions to begin.
Use the name of your app that you picked in the prior stage by typing « cd react-b »
npm start (starts your React application)
We can now go on to the subsequent stages and add or install Bootstrap to our preferred React application. Our app’s name in this instance is react-b.
Once installed, your terminal will look somewhat like this:
Bootstrap Installation using NPM
By default, the Node package manager (npm) is installed with Node.js.
Using the following command, you can determine the version of your npm:
npm -vYou will get an out such as 9.2.0 if npm is installed.
Now, use the following command to install bootstrap:
npm run bootstrapAfter that, navigate to the./src/index.js file. Place this sentence at the top.
import ‘bootstrap/dist/css/bootstrap.css’;
By use of Yarn Package Manager
In contrast to npm, yarn is not included when you install node.js.
Use this command to install yard;
the yarn command
npm install -g yarnYou won’t need to install the package each time a new React app is created thanks to this command’s global installation of yarn.
To add bootstrap to React, enter the following command:
yarn add bootstrapAfter that, navigate to the./src/index.js file. Place this sentence at the top.
import ‘bootstrap/dist/css/bootstrap.css’;
Always import Bootstrap first, followed by any additional CSS files, in your app’s entry file. This makes it simple to edit your Bootstrap entries if you need to modify the templates’ default settings as you develop your React project.
CDN Approach
You may integrate Bootstrap with React by using a Content Delivery Network (CDN) connection. You may use the Bootstrap library into your React app without downloading and hosting the files in your project folder by adding this CDN link. Take these actions.
- Navigate to the.public/index.html file in your root folder.
- Add this « link » tag to the « head » tag.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">- Your app needs to have JavaScript dependencies. Add the following tag to the body of your index.html file directly before the closing body/> tag:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>Your React app has now successfully installed Bootstrap.
Employing React Bootstrap Package
The strategies we’ve discussed thus far were developed specifically for HTML files. Take a look at the following Bootstrap drop-down code to help you understand:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>What is incorrect about the code? Bootstrap categorizes its divisions (DIVs) using class by default. However, React makes advantage of the camelCase syntax of JSX. As a result, you must manually replace the class with className.
Every « class » in that code has to be swapped out with « className » in order for it to run on React. The ultimate code is:
<div className="dropdown">
<button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul className="dropdown-menu">
<li><a className="dropdown-item" href="#">Action</a></li>
<li><a className="dropdown-item" href="#">Another action</a></li>
<li><a className="dropdown-item" href="#">Something else here</a></li>
</ul>
Thankfully, we also have react-bootstrap and reactstrap, which don’t require manual interaction.
React-bootstrap
True React components were created from scratch for React-bootstrap. The library works with the basic Bootstrap framework.
To get started using React-bootstrap, adhere to these steps:
- The command to install React-bootstrap is:
npm install react-bootstrap bootstrap- Add this line before any other CSS files by navigating to src/index.js or App.js.
import ‘bootstrap/dist/css/bootstrap.min.css’;
You don’t have to import the full library when using React-bootstrap; you may import a single component. For instance, if you want to import a button into one of your components, you may import it by doing the following:
import { Button } from ‘react-bootstrap’;
Reactstrap
This is a collection of React components for Bootstrap. For its aesthetics and theme, Reactstrap uses the Bootstrap CSS framework. This library allows you to style your React app consistently by importing the appropriate Bootstrap classes. Additionally, adding the JavaScript files for Bootstrap is not required to activate functionality.
To add Reactstrap to your React application, follow these steps:
- Use the following command to install Reactstrap:
npm install reactstrap react react-dom- Import Bootstrap using these commands:
npm install --save bootstrapimport ‘bootstrap/dist/css/bootstrap.min.css’; (add this line to your app.js)
Adding Bootstrap to your app is also possible using the CDN link option. After completing step one, browse to the root directory’s.public/index.html file and add this line to the head> tag.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
/>Instead of importing the complete library with Reactstrap, you may import a single component. For instance, if one of your components needs to import a button, you may import as;
import { Button } from ‘reactstrap’;
Conclusion
The methods mentioned above can be used to install Bootstrap and style your web applications in your React app. Since the ultimate result is the same, preference should be given to the installation method.
By combining React and Bootstrap, you can avoid the hassle of having to keep track of every CSS style as your project develops. As you spend more time concentrating on the functionality of your app, styling it becomes simple and effective.
