# 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.

Source: https://bootstrap-svelte.vercel.app/layout/grid — part of the Bootstrap Svelte documentation (index: https://bootstrap-svelte.vercel.app/llms.txt).

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

---

## Basic Example

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

## Equal-width

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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

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

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

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

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

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

```html
<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

```html
<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>
```