Abhay Singh Kathayat

Posted on Dec 18

Getting Started with Bootstrap in React: A Complete Guide

#javascript #bootstrap #react #abhay

Bootstrap with React is a combination of the popular CSS framework Bootstrap and the powerful JavaScript library React. While Bootstrap provides pre-built, responsive grid systems and UI components like buttons, modals, forms, and navbars, React allows you to build dynamic, interactive UIs using components. When you integrate Bootstrap with React, you can use these Bootstrap styles while still taking advantage of React’s component-based architecture for building reusable and stateful UI elements.

Key Features of Bootstrap with React:

Pre-styled Components: Bootstrap offers a wide range of pre-designed UI components, including buttons, cards, navbars, tables, modals, forms, etc. These components are responsive by default and work well across devices and screen sizes.
Flexibility: With Bootstrap’s responsive grid system and React’s ability to create reusable components, you can easily build complex layouts that are mobile-friendly.
Customizable: While Bootstrap provides a default design, it can be customized by modifying its themes or using utilities like CSS-in-JS or React Context to adjust the appearance of your application.
Integration with React: By using React-Bootstrap or other libraries, you can seamlessly integrate Bootstrap components with React components, managing state and events in a clean, declarative manner.
Bootstrap Grid System: The grid system is one of the most powerful features of Bootstrap. It allows developers to create flexible layouts that automatically adjust to different screen sizes. React components work seamlessly with this system.

How to Get Started with Bootstrap in React:

1. Installing Bootstrap in React

To use Bootstrap in a React application, you can either use the React-Bootstrap library (a React implementation of Bootstrap) or directly include Bootstrap’s CSS.

Option 1: Using React-Bootstrap

React-Bootstrap is a popular library that replaces Bootstrap’s JavaScript with React components, making it easy to use Bootstrap in React.

To install React-Bootstrap:

npm install react-bootstrap bootstrap

Then, import the required Bootstrap CSS file into your index.js or App.js:

import 'bootstrap/dist/css/bootstrap.min.css';

Option 2: Using Bootstrap's CDN

You can also use the standard Bootstrap CSS by adding the CDN link in your public/index.html file inside the <head> section:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

2. Using Bootstrap Components in React

Once Bootstrap is integrated, you can start using Bootstrap components in your React app.

Example 1: Using Bootstrap Button Component

import React from 'react';
import Button from 'react-bootstrap/Button';

function App() {
  return (
    <div style={{ padding: '20px' }}>
      <Button variant="primary">Primary Button</Button>
    </div>
  );
}

export default App;

In this example, we are using the Button component from react-bootstrap, which provides the same button styles as Bootstrap but in a React-friendly way.

Example 2: Bootstrap Grid System in React

You can use Bootstrap’s grid system with React to create responsive layouts.

import React from 'react';
import { Row, Col } from 'react-bootstrap';

function App() {
  return (
    <div style={{ padding: '20px' }}>
      <Row>
        <Col xs={12} md={6}>
          <div style={{ backgroundColor: '#f0f0f0', padding: '20px' }}>Column 1</div>
        </Col>
        <Col xs={12} md={6}>
          <div style={{ backgroundColor: '#dcdcdc', padding: '20px' }}>Column 2</div>
        </Col>
      </Row>
    </div>
  );
}

export default App;

In this example:

Row and Col are used to create a grid layout.
xs={12} ensures that the columns take full width on small screens (mobile).
md={6} ensures that the columns take up 6 out of 12 columns on medium and larger screens (tablet and desktop).

Example 3: Using Bootstrap Modal in React

import React, { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';

function App() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <div style={{ padding: '20px' }}>
      <Button variant="primary" onClick={handleShow}>
        Launch Modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal Heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>This is a Bootstrap modal example.</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

export default App;

In this example, we're using the Modal component from React-Bootstrap to display a modal dialog when the button is clicked. The modal's visibility is controlled using React's useState hook.

3. Customizing Bootstrap Styles

Bootstrap's default styles can be customized using React context, CSS-in-JS libraries like styled-components, or by overriding the default Bootstrap classes.

For example, using styled-components with Bootstrap:

npm install styled-components

Then, create a styled button:

import React from 'react';
import styled from 'styled-components';
import { Button } from 'react-bootstrap';

const StyledButton = styled(Button)`
  background-color: #4CAF50;
  &:hover {
    background-color: #45a049;
  }
`;

function App() {
  return (
    <div style={{ padding: '20px' }}>
      <StyledButton>Styled Bootstrap Button</StyledButton>
    </div>
  );
}

export default App;

In this example, the StyledButton component overrides the default button styles with custom colors while still keeping the Bootstrap button's functionality.

4. Using Bootstrap Icons in React

Bootstrap Icons can be used in React by installing the react-icons library or importing the icons directly from the Bootstrap Icons library.

Install react-icons:

npm install react-icons

Then, use an icon in your React component:

import React from 'react';
import { FaBeer } from 'react-icons/fa';

function App() {
  return (
    <div style={{ padding: '20px' }}>
      <h1>
        Let's go for a <FaBeer />!
      </h1>
    </div>
  );
}

export default App;

This uses Font Awesome icons within the React app.

Conclusion

Integrating Bootstrap with React enables developers to quickly build responsive and modern UIs using pre-designed Bootstrap components. The combination provides an efficient way to create professional web applications with minimal setup, while also allowing for easy customization and flexibility.

Whether you're using React-Bootstrap to integrate components or using the regular Bootstrap CSS and custom React components, this approach can significantly speed up development time and ensure that your app is both functional and aesthetically pleasing.

DEV Community