Grid

Use the powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

The following examples replicate each of the examples from the Bootstrap documentation: https://getbootstrap.com/docs/5.3/layout/grid/

Basic Example

Column

            
            <Container class="text-center">
    <Row>
        <Col>Column</Col>
        <Col>Column</Col>
        <Col>Column</Col>
    </Row>
</Container>

Equal-width

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

            
            <Container class="text-center">
    <Row>
        <Col>1 of 2</Col>
        <Col>2 of 2</Col>
    </Row>
    <Row>
        <Col>1 of 3</Col>
        <Col>2 of 3</Col>
        <Col>3 of 3</Col>
    </Row>
</Container>

Setting one column width

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

            
            <Container class="text-center">
    <Row>
        <Col>1 of 3</Col>
        <Col sizing={6}>2 of 3 (wider)</Col>
        <Col>3 of 3</Col>
    </Row>
    <Row>
        <Col>1 of 3</Col>
        <Col sizing={5}>2 of 3 (wider)</Col>
        <Col>3 of 3</Col>
    </Row>
</Container>

Variable width content

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

            
            <Container class="text-center">
    <Row class="justify-content-md-center">
        <Col sizing={{ lg: 2 }}>1 of 3</Col>
        <Col sizing={{ md: 'auto' }}>Variable width content</Col>
        <Col sizing={{ lg: 2 }}>3 of 3</Col>
    </Row>
    <Row>
        <Col>1 of 3</Col>
        <Col sizing={{ md: 'auto' }}>Variable width content</Col>
        <Col sizing={{ lg: 2 }}>3 of 3</Col>
    </Row>
</Container>

All breakpoints

col

col-8

col-4

            
            <Container class="text-center">
    <Row>
        <Col>col</Col>
        <Col>col</Col>
        <Col>col</Col>
        <Col>col</Col>
    </Row>
    <Row>
        <Col sizing={8}>col-8</Col>
        <Col sizing={4}>col-4</Col>
    </Row>
</Container>

Stacked to horizontal

col-sm-8

col-sm-4

col-sm

            
            <Container class="text-center">
    <Row>
        <Col sizing={{ sm: 8 }}>col-sm-8</Col>
        <Col sizing={{ sm: 4 }}>col-sm-4</Col>
    </Row>
    <Row>
        <Col sizing={{ sm: '*' }}>col-sm</Col>
        <Col sizing={{ sm: '*' }}>col-sm</Col>
        <Col sizing={{ sm: '*' }}>col-sm</Col>
    </Row>
</Container>

Mix and match

col-md-8

col-6 .col-md-4

col-6

            
            <Container class="text-center">
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <Row>
        <Col sizing={{ md: 8 }}>col-md-8</Col>
        <Col sizing={{ xs: 6, md: 4 }}>col-6 .col-md-4</Col>
    </Row>

    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <Row>
        <Col sizing={{ xs: 6, md: 4 }}>col-6 .col-md-4</Col>
        <Col sizing={{ xs: 6, md: 4 }}>col-6 .col-md-4</Col>
        <Col sizing={{ xs: 6, md: 4 }}>col-6 .col-md-4</Col>
    </Row>

    <!-- Columns are always 50% wide, on mobile and desktop -->
    <Row>
        <Col sizing={6}>col-6</Col>
        <Col sizing={6}>col-6</Col>
    </Row>
</Container>

Row columns

Column

            
            <Container class="text-center">
    <Row cols={2}>
        <Col>Column</Col>
        <Col>Column</Col>
        <Col>Column</Col>
        <Col>Column</Col>
    </Row>
</Container>

Column

            
            <Container class="text-center">
    <Row cols={3}>
        <Col>Column</Col>
        <Col>Column</Col>
        <Col>Column</Col>
        <Col>Column</Col>
    </Row>
</Container>

Column

            
            <Container class="text-center">
    <Row cols="auto">
        <Col>Column</Col>
        <Col>Column</Col>
        <Col>Column</Col>
        <Col>Column</Col>
    </Row>
</Container>

Column

            
            <Container class="text-center">
    <Row cols={4}>
        <Col>Column</Col>
        <Col>Column</Col>
        <Col>Column</Col>
        <Col>Column</Col>
    </Row>
</Container>

Column

            
            <Container class="text-center">
    <Row cols={4}>
        <Col>Column</Col>
        <Col>Column</Col>
        <Col sizing={6}>Column</Col>
        <Col>Column</Col>
    </Row>
</Container>

Column

            
            <Container class="text-center">
    <Row cols={{ xs: 1, sm: 2, md: 4 }}>
        <Col>Column</Col>
        <Col>Column</Col>
        <Col>Column</Col>
        <Col>Column</Col>
    </Row>
</Container>

Nesting

Level 1: .col-sm-3

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

            
            <Container class="text-center">
    <Row>
        <Col sizing={{ sm: 3 }}>Level 1: .col-sm-3</Col>
        <Col sizing={{ sm: 9 }}>
            <Row>
                <Col sizing={{ xs: 8, sm: 6 }}>Level 2: .col-8 .col-sm-6</Col>
                <Col sizing={{ xs: 4, sm: 6 }}>Level 2: .col-4 .col-sm-6</Col>
            </Row>
        </Col>
    </Row>
</Container>