React JS 19 Tutorial in Hindi #37 Add Bootstrap with React js

  1. What is bootstrap
  2. How to install bootstrap
  3. Import and use bootstrap in React js
  4. Bootstrap examples e.g button, alerts
  5. Interview Question



Bootstrap is a popular, open-source CSS framework developed by Twitter for building responsive and mobile-first websites quickly and consistently.

It provides a set of predefined CSS classes, JavaScript components, and a grid system that helps developers design web pages without writing a lot of custom CSS or JavaScript.


import { Button } from "react-bootstrap"
import { Alert,Navbar,Container,NavDropdown,Nav } from "react-bootstrap"
function App() {

return (
<>
{/* */}

<Navbar expand="lg" className="bg-body-tertiary">
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">
Another action
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">
Separated link
</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>



{/* */}
<h1>Add Bootstrap in React js </h1>
<Alert variant="success" >Hello, BT installed</Alert>

<Button onClick={()=>alert("Bootstrap Button")} variant="danger">Bootstrap Button</Button>
<Button variant="success">Ok</Button>
<Button variant="warning">Ok</Button>
<button onClick={()=>alert("Simple Button")} >Simple Button</button>

</>
)
}

export default App