React Bootstrap

by
Previous
Next

Bootstrap is a powerful CSS framework known for its responsive and mobile-friendly design system (like buttons, cards, grids, etc.).

React is a JavaScript library for building user interface with reusable components.

Developers Build web pages and apps using ready-made UI components like buttons, forms, modals, etc. It helps developers to create beautiful, mobile-friendly UI faster by combining the Bootstrap and React.

Why Use React Bootstrap?

React Bootstrap offers several advantages, like:

  1. Responsive Design: React Bootstrap’s components are mobile-friendly and responsive. the UI elements (like buttons, forms, navbars) automatically adjust to different screen sizes (mobile, tablet, desktop).
  2. Component-Based Architecture: React Bootstrap provide a fully customizable and reusable components, helping developers for coding and you can reuse this components anywhere in your app.
  3. No jQuery: Traditional Bootstrap used jQuery for modals and dropdowns. but React Bootstrap remove this types dependency and give result in smaller file size, better performance and more modern code.
  4. Ease of Customization: You can change the look and behavior of components by passing props (like variant=”primary” or size=”lg”). no need to write a lot of CSS, customization is simple and built-in.

Installation of React Bootstrap

To get started with React Bootstrap, you’ll need to install the library and Bootstrap itself.

Install React Bootstrap with this command:

npm install react-bootstrap bootstrap

Import Bootstrap CSS in your application, in index.js or App.js:

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

Once installed, you are ready to use React Bootstrap components in your project.

Core React Bootstrap Components with Examples

React Bootstrap provides a range of pre-built components, including Buttons, Modals, Forms and more. Below are some common components and how to use them.

1. Buttons

Buttons are most common elements in any interface. React Bootstrap allow you to quickly add styled buttons with customizable colors, sizes and functionalities.

Example:

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

function ActionTrigger() {
  return (
    <Button variant="success" size="lg">
      Press Here
    </Button>
  );
}

export default ActionTrigger;
  • variant: The variant prop controls the style and color theme of the button. like primary, secondary, danger, etc.
  • size: Controls the button size. available options like sm for small, lg for large and default for normal size.

2. Forms

React Bootstrap includes ready-made form components (like text inputs, checkboxes, radio buttons, dropdowns, etc.). you don’t need to write custom CSS to style form fields. components (like <Form.Control>, <Form.Check>, <Form.Select>) come pre-styled using Bootstrap.

Example:

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

function UserCredentialsForm() {
  return (
    <Form>
      <Form.Group controlId="userEmailInput">
        <Form.Label>User Email</Form.Label>
        <Form.Control type="email" placeholder="Enter your email" />
      </Form.Group>

      <Form.Group controlId="userPasswordInput">
        <Form.Label>User Password</Form.Label>
        <Form.Control type="password" placeholder="Enter your password" />
      </Form.Group>

      <Button variant="primary" type="submit">
        Log In
      </Button>
    </Form>
  );
}

export default UserCredentialsForm;
  • Form.Control: Used to create input elements with consistent styling.
  • Form.Group: Organizes input fields and labels in a structured way.

3. Navigation Bar (Navbar)

A navigation bar usually placed at the top of the website or application, it is responsive and adjusts automatically for mobile, tablet and desktop screens.

Example:

import React from 'react';
import { Navbar, Nav, Container } from 'react-bootstrap';

function AppNavigation() {
  return (
    <Navbar bg="primary" variant="dark" expand="lg">
      <Container>
        <Navbar.Brand href="#dashboard">SiteTitle</Navbar.Brand>
        <Navbar.Toggle aria-controls="main-navbar-nav" />
        <Navbar.Collapse id="main-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="#dashboard">Dashboard</Nav.Link>
            <Nav.Link href="#services">Services</Nav.Link>
            <Nav.Link href="#support">Support</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default AppNavigation;
  • bg and variant: Control the background and color theme.
  • expand: Controls responsiveness, example: expand=”lg” make it responsive on large screens.

4. Modals

Modals are overlays that display content in a popup window. They are used for dialogs, alerts, and forms that require focused user interaction.

Example:

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

function PopupBox() {
  const [isVisible, setIsVisible] = useState(false);

  const closePopup = () => setIsVisible(false);
  const openPopup = () => setIsVisible(true);

  return (
    <>
      <Button variant="success" onClick={openPopup}>
        Launch Dialog
      </Button>

      <Modal show={isVisible} onHide={closePopup}>
        <Modal.Header closeButton>
          <Modal.Title>Notification Panel</Modal.Title>
        </Modal.Header>
        <Modal.Body>This is a custom message displayed in the popup.</Modal.Body>
        <Modal.Footer>
          <Button variant="outline-secondary" onClick={closePopup}>
            Dismiss
          </Button>
          <Button variant="success" onClick={closePopup}>
            Confirm
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

export default PopupBox;
  • show and onHide: Control the visibility and behavior of the modal.
  • Modal.Header, Modal.Body, Modal.Footer: Sections of the modal layout.

5. Grid System

React Bootstrap includes a grid system for creating responsive layouts. It’s based on a 12-column layout and uses rows and columns to structure the content.

Example:

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

function LayoutSection() {
  return (
    <Container>
      <Row>
        <Col sm={8}>
          <div style={{ backgroundColor: '#e3f2fd', padding: '15px' }}>
            Content Area
          </div>
        </Col>
        <Col sm={4}>
          <div style={{ backgroundColor: '#f8f9fa', padding: '15px' }}>
            Info Panel
          </div>
        </Col>
      </Row>
    </Container>
  );
}

export default LayoutSection;
  • Container: The main wrapper for the grid system.
  • Row and Col: Rows and columns for arranging content, with breakpoints like sm, md, lg to control the layout across different screen sizes.

Advantages of Using React Bootstrap

  1. Speed of Development: Pre-made components make it quicker to build and deploy applications.
  2. Consistency: The Bootstrap library provides a consistent style across different components, which helps in creating a cohesive design.
  3. Responsive by Default: Components are mobile-first and adapt automatically across device sizes.
  4. Flexible Customization: React Bootstrap components can be customized using props, CSS, or even extended to suit specific requirements.

Best Practices When Using React Bootstrap

  1. Customize Responsibly: If you don’t need so do not add any custom CSS. Avoid heavy override CSS to keep code clean and adept your design within bootstrap structure.
  2. Use Props Over CSS Where Possible: Use props for styling instead of adding extra CSS. This help in keep the code more React-oriented.
  3. Limit External Dependencies: Only use the necessary components to keep your application lightweight.
  4. Stay Updated: React Bootstrap regularly updates with Bootstrap’s latest version, so keeping dependencies up-to-date ensures you have access to the latest features and fixes.

Previous
Next

Leave a Comment