React — Bootstrap

Installing Bootstrap

npm install react-bootstrap bootstrap

Basic Usage

import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, Container, Row, Col } from 'react-bootstrap';

function App() {
    return (
        <Container>
            <Row>
                <Col>
                    <Button variant="primary">Click me</Button>
                </Col>
            </Row>
        </Container>
    );
}

Components

import {
    Navbar,
    Nav,
    Card,
    Form,
    Table,
    Alert,
    Modal
} from 'react-bootstrap';

function App() {
    return (
        <div>
            <Navbar bg="dark" variant="dark">
                <Navbar.Brand href="#home">My App</Navbar.Brand>
                <Nav className="mr-auto">
                    <Nav.Link href="#home">Home</Nav.Link>
                    <Nav.Link href="#features">Features</Nav.Link>
                </Nav>
            </Navbar>

            <Container className="mt-4">
                <Card>
                    <Card.Header>Card Title</Card.Header>
                    <Card.Body>
                        <Card.Text>Card content</Card.Text>
                        <Button variant="primary">Go somewhere</Button>
                    </Card.Body>
                </Card>
            </Container>
        </div>
    );
}

Bootstrap Examples

// Form with validation
function ContactForm() {
    const [validated, setValidated] = useState(false);

    const handleSubmit = (e) => {
        e.preventDefault();
        const form = e.currentTarget;
        if (form.checkValidity() === false) {
            e.stopPropagation();
        }
        setValidated(true);
    };

    return (
        <Form noValidate validated={validated} onSubmit={handleSubmit}>
            <Form.Group>
                <Form.Label>Name</Form.Label>
                <Form.Control required type="text" placeholder="Name" />
                <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
            </Form.Group>

            <Form.Group>
                <Form.Label>Email</Form.Label>
                <Form.Control required type="email" placeholder="Email" />
                <Form.Control.Feedback type="invalid">
                    Please enter a valid email.
                </Form.Control.Feedback>
            </Form.Group>

            <Button type="submit">Submit</Button>
        </Form>
    );
}

// Responsive grid
function ProductGrid() {
    return (
        <Container>
            <Row>
                <Col xs={12} md={6} lg={4}>
                    <Card>
                        <Card.Img variant="top" src="product1.jpg" />
                        <Card.Body>
                            <Card.Title>Product 1</Card.Title>
                            <Button variant="primary">Buy</Button>
                        </Card.Body>
                    </Card>
                </Col>
                <Col xs={12} md={6} lg={4}>
                    <Card>
                        <Card.Img variant="top" src="product2.jpg" />
                        <Card.Body>
                            <Card.Title>Product 2</Card.Title>
                            <Button variant="primary">Buy</Button>
                        </Card.Body>
                    </Card>
                </Col>
            </Row>
        </Container>
    );
}

Mini Practice

Write React code that:

1. Installs and imports Bootstrap
2. Uses Bootstrap components
3. Creates a responsive layout
4. Implements form validation

Up Next

Next: Learn about Tailwind CSS in React.