1 of 16

React Bootstrap

Web Technology

Rourab Paul, Subin Sahayam, Assistant Professor,

Department of Computer Science and Engineering

Shiv Nadar University

2 of 16

Introduction - Bootstrap

What is Bootstrap?

Bootstrap is an open-source front-end framework containing ready-made CSS classes and JavaScript components for building responsive websites and web applications.

K1

3 of 16

Introduction - Bootstrap

What is Bootstrap?

Framework CSS
By Twitter – Opensource
Built-in Themes
Custom Themes
Aimed – SPAs and Mobile Apps
Depends on JQuery (older Bootstrap versions were, but modern Bootstrap is not.)
Responsive
https://www.w3schools.com/whatis/tryit.asp?filename=trywhatis_bootstrap&stacked=h

K1

What is Bootstrap? – Bootstrap is a popular front-end framework used to create responsive and attractive websites and web applications quickly.
Framework CSS – It provides predefined CSS classes and components such as buttons, forms, cards, grids, and navigation bars.
By Twitter – Open Source – Bootstrap was originally developed by Twitter and is available as an open-source framework.
Built-in Themes – It provides ready-made styles and components that can be used without designing everything from scratch.
Custom Themes – Developers can modify Bootstrap's styles or create their own themes to match a website's requirements.
Aimed – SPAs and Mobile Apps – Bootstrap is suitable for Single Page Applications (SPAs) and mobile-friendly web applications.
Depends on jQuery – Older versions of Bootstrap (especially Bootstrap 4 and earlier) used jQuery for interactive JavaScript components; Bootstrap 5 no longer depends on jQuery.
Responsive – Bootstrap uses a responsive grid system and breakpoints to make websites adapt to different screen sizes such as mobiles, tablets, and desktops.

4 of 16

Introduction - React Bootstrap

What is React Bootstrap?

Reimplementation of Bootstrap – React Component
No JQuery or Javascript Dependency
Renders React Components

K1

React Bootstrap is a UI framework that provides Bootstrap components as React components. It allows developers to build responsive and attractive web interfaces using Bootstrap's styling while following React's component-based approach.

5 of 16

React Bootstrap - Installation

Three ways

Bootstrap Content Delivery Network (CDN)
Installing and Importing Bootstrap in React
Installing react-bootstrap

K1

6 of 16

React Bootstrap - Installation

Three ways

Bootstrap Content Delivery Network (CDN)
Installing and Importing Bootstrap in React
Installing react-bootstrap

Use react-bootstrap

K1

7 of 16

React Bootstrap - Installation

Three ways

Bootstrap Content Delivery Network (CDN)
Installing and Importing Bootstrap in React
Installing react-bootstrap or reactstrap

Use react-bootstrap

K3

8 of 16

React Bootstrap - Importing

From folder
Using {}
Default vs Multiple Components

K3

import Button from 'react-bootstrap/Button';

import Alert from 'react-bootstrap/Alert';

import Card from 'react-bootstrap/Card';

import Form from 'react-bootstrap/Form';

import Navbar from 'react-bootstrap/Navbar';

import Nav from 'react-bootstrap/Nav';

import Container from 'react-bootstrap/Container';

import Modal from 'react-bootstrap/Modal';

import Pagination from 'react-bootstrap/Pagination';

import Offcanvas from 'react-bootstrap/Offcanvas';

App.jsx

9 of 16

React Bootstrap - Example

K3

10 of 16

React Bootstrap - Example

K3

11 of 16

12 of 16

React Bootstrap - Example

K3

npm create vite@latest myapp -- --template react

cd myapp

npm install

npm install react-bootstrap bootstrap

npm run dev

See the default vite page

replace App.jsx and main.jsx in ./src folder

13 of 16

Syllabus

K1

14 of 16

Summary

Introduction – Bootstrap
Introduction – React Bootstrap
React Bootstrap – Installation
React Bootstrap – Example
Syllabus - Chapter - 1 and 2

K1

15 of 16

References

Robin Wieruch, “The Road to React: The ReactJS with Hooks”, Lean Publishing, 2023 Edition.
Online Sources

16 of 16

THANK YOU