Bootstrap responsive styling

Resize this webpage to see the difference, the responsiveness.

Note: By default, Bootstrap automatically includes the viewport meta tag. This tag is crucial for responsive design on mobile devices, ensuring 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 a lot of headache.

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

Container fluid (full width)

fluid={true}

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

See codes

<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 with

Column classes indicate the number of columns you’d like to use out of the possible 12 per row.
So, if you want three equal-width columns across, you can use .col-4.
- xs: The number of columns to span on extra small devices (≤576px).
- sm: The number of columns to span on extra small devices (≥576px).
- md: The number of columns to span on extra small devices (≥768px).
- lg: The number of columns to span on extra small devices (≥992px).
- xl: The number of columns to span on extra small devices (≥1200px).
- xxl: The number of columns to span on extra small devices (≥1400px).
Cell 2 of 3 will expand accordingly. Allocate number of columns according to screen size(<Col xs={1} sm={2} md={3} lg={4} xl={5}>). If screen size ≥768px, span 3 columns.

1
2
3
4
5
6
7
8
9
10
11
12

1 of 3
2 of 3
3 of 3
See codes
```
<Container>
    <Row>
        <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

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