Responsive Design has been the prime requirement as we build the app considering the “mobile first” approach. So it is more important than ever to make the app responsive for all devices.
There are many ways to implement responsive design, some of them are
- Media Queries
- Inline Styles
- Higher Order Components
- Bootstrap
As there are multiple ways to implement responsive design, we will focus on the points which we must take into consideration regardless of which approach you go for.
- Tracking changes in the width and height of the window.
- Update/Remove/Add the required DOM elements to reflect the changes.
In this blog, we will talk about how react-bootstrap is useful for making responsive layouts.
What is React Bootstrap?
React Bootstrap is one of the popular CSS frameworks for responsive layouts. Bootstrap with Sass variables, a responsive grid system. It has now been rebuilt to cope with React Framework. Bootstrap depends on jQuery but jQuery is not suitable for React as jQuery uses direct DOM manipulation on the other hand React uses virtual DOM.
Some components react-bootstrap offers:
- Dropdowns
- Navbar
- Tables
- Pagination
- Overlays
- Buttons
Why we should use React Bootstrap?
- Without unnecessary dependencies and downloads, we can make a fast and responsive UI.
- React Bootstrap was designed to be inserted into the Virtual DOM. Those are actually React components, so jQuery is not needed to manipulate the DOM.
- You will need a stylesheet from the bootstrap library so all of the themes will continue to work for React Bootstrap.
- Accessibility is out of the box. Accessibility is very important while creating your web page. Creating accessible components is even easier with React Bootstrap over normal Bootstrap.
- The Code is cleaner as vanilla bootstrap would include all the lengthy class information, but in React Bootstrap this is done under the hood. And the code is more Readable.
Add React bootstrap to your app
There are two ways you can get started:
- Package Manager:
- Use npm or yarn to install the package. Use the following command for npm as well as yarn.
npm install –save react-bootstrap bootstrap // npm
yarn add react-bootstrap bootstrap // yarn
- CDN
- Add this CDN to your index.html file in your public folder. As given below.
<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin>
Style your bootstrap component:
React bootstrap does not have inbuild CSS. You have to include a stylesheet for your components to appear as they should on screen. You can do this in two ways.
- Import Stylesheet:
Add the following statement to your index.js or your App.js file.
import 'bootstrap/dist/css/bootstrap.min.css';
- Link Stylesheet
Get the latest Bootstrap CDN to get the latest stylesheet. Add it to the head of your index.html.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
If you use Package Manager to add react-bootstrap, make sure you use an import statement to add a stylesheet. If you use CDN in the first step, then use CDN for adding a stylesheet.
Importing Components
Avoid importing the entire react-bootstrap library if you want to import a component. Only import what you need:
Single Component import from React Bootstrap
//this only imports what we need
import Alert from 'react-bootstrap/Alert';
//this imports the whole library and uses object destructuring to grab the Button object
import { Alert } from 'react-bootstrap';
If you want to import multiple components from react-bootstrap, you should go for object destructuring. It helps to keep your code dry.
//this
import { Alert, Form, Button, Card } from 'react-bootstrap';
//not this
import Alert from 'react-bootstrap/Alert';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
