Bootstrap responsive styling

Resize this webpage to see the difference, the responsiveness.

Viewport meta tag

By default, Bootstrap automatically includes the viewport meta tag. This tag is crucial for responsive design on mobile devices. It ensures proper rendering and zooming. It essentially tells the browser how to scale the page to fit the device's screen. But, it is always good mesure to double check this. Otherwse, you will be in for a lot of headaches.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Container fluid (full width)

Live Demo

fluid={true}

Full width until fluid="md"(≥768px). No full width if screen width is higher than 768px.

Code: ResponsiveStylingContainerFluid.jsx

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

export default function ResponsiveStylingContainerFluid() {
    return (
        <>
            <Container fluid={true} style={{ backgroundColor: "lightgreen" }}>
                <Row><Col>{`fluid={true}`}</Col></Row>
            </Container>

            <Container fluid="md" style={{ backgroundColor: "lightblue" }}>
                <Row><Col>Full width until fluid="md"(≥768px). No full width if screen width is higher than 768px.</Col></Row>
            </Container>
        </>
    );
}

Column grid system

Bootstrap uses a 12-column grid by default. To create three equal-width columns on medium (≥768px) or larger screens, give each <Col md={4}> so it spans 4 of the 12 columns. The <Col> component supports six breakpoints—xs, sm, md, lg, xl, and xxl—and you can specify a number (1–12) or use true for auto layout (e.g., <Col lg>).

Breakpoint sizes:

xs: Extra small (≤576px)
sm: Small (≥576px)
md: Medium (≥768px)
lg: Large (≥992px)
xl: Extra large (≥1200px)
xxl: Extra extra large (≥1400px)

Live Demo

1 of 3

**2 of 3**

3 of 3

Code: ResponsiveStylingColumWidth.jsx

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

export default function ResponsiveStylingColumWidth() {
    return (
        <>
            <Container>
                <Row>
                    {/* 12 equal-width columns for references */}
                    <Col className="border">1</Col> <Col className="border">2</Col> <Col className="border">3</Col> <Col className="border">4</Col>
                    <Col className="border">5</Col> <Col className="border">6</Col> <Col className="border">7</Col> <Col className="border">8</Col>
                    <Col className="border">9</Col> <Col className="border">10</Col> <Col className="border">11</Col> <Col className="border">12</Col>
                </Row>
            </Container>

            <Container>
                <Row>
                    {/* Columns with different sizes. */}
                    <Col className="border">1 of 3</Col>
                    <Col className="border" xs={1} sm={2} md={3} lg={4} xl={5}>**2 of 3**</Col>
                    <Col className="border">3 of 3</Col>
                </Row>
            </Container>
        </>
    );
}

Change flexbox direction based on width

Live Demo

Awards won

Award title

Best cake made in 2019

Award title

Winners of the national cake baking contest

Award title

Most satisfied customers award

Code: ResponsiveStylingAwards.jsx

export default function ResponsiveStylingAwards() {
    return (
        <div className="w-75 mx-auto">
            <h1 className="text-center my-3">Awards won</h1>

            <div className="d-flex flex-sm-column flex-lg-row justify-content-lg-around">

                <div className="d-flex flex-column col-sm-4 align-items-center">
                    <img src="https://placehold.co/100x100" width="150" height="150" className="award-img" />
                    <span> Award title </span>
                    <hr className="bg-dark w-50 m-0" />
                    <span className="w-75 text-center text-break">Best cake made in 2019</span>
                </div>

                <div className="d-flex flex-column col-sm-4 align-items-center">
                    <img src="https://placehold.co/75x75" width="150" height="150" className="award-img" />
                    <span> Award title </span>
                    <hr className="bg-dark w-50 m-0" />
                    <span className="w-75 text-center text-break">Winners of the national cake baking contest</span>
                </div>

                <div className="d-flex flex-column col-sm-4 align-items-center">
                    <img src="https://placehold.co/125x125" width="150" height="150" className="award-img" />
                    <span> Award title </span>
                    <hr className="bg-dark w-50 m-0" />
                    <span className="w-75 text-center text-break">Most satisfied customers award</span>
                </div>

            </div>
        </div>
    );
}