Columns

Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Plus, see how to use column classes to manage widths of non-grid elements.

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

Vertical alignment

One of three columns

            
            <Container class="text-center">
    <Row class="align-items-start">
        <Col>One of three columns</Col>
        <Col>One of three columns</Col>
        <Col>One of three columns</Col>
    </Row>
</Container>

One of three columns

            
            <Container class="text-center">
    <Row class="align-items-center">
        <Col>One of three columns</Col>
        <Col>One of three columns</Col>
        <Col>One of three columns</Col>
    </Row>
</Container>

One of three columns

            
            <Container class="text-center">
    <Row class="align-items-end">
        <Col>One of three columns</Col>
        <Col>One of three columns</Col>
        <Col>One of three columns</Col>
    </Row>
</Container>

One of three columns

            
            <Container class="text-center">
    <Row>
        <Col class="align-self-start">One of three columns</Col>
        <Col class="align-self-center">One of three columns</Col>
        <Col class="align-self-end">One of three columns</Col>
    </Row>
</Container>

Horizontal alignment

One of two columns

            
            <Container class="text-center">
    <Row class="justify-content-start">
        <Col sizing={4}>One of two columns</Col>
        <Col sizing={4}>One of two columns</Col>
    </Row>
    <Row class="justify-content-center">
        <Col sizing={4}>One of two columns</Col>
        <Col sizing={4}>One of two columns</Col>
    </Row>
    <Row class="justify-content-end">
        <Col sizing={4}>One of two columns</Col>
        <Col sizing={4}>One of two columns</Col>
    </Row>
    <Row class="justify-content-around">
        <Col sizing={4}>One of two columns</Col>
        <Col sizing={4}>One of two columns</Col>
    </Row>
    <Row class="justify-content-between">
        <Col sizing={4}>One of two columns</Col>
        <Col sizing={4}>One of two columns</Col>
    </Row>
    <Row class="justify-content-evenly">
        <Col sizing={4}>One of two columns</Col>
        <Col sizing={4}>One of two columns</Col>
    </Row>
</Container>

Column wrapping

.col-9

.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-6
Subsequent columns continue along the new line.

            
            <Container>
    <Row>
        <Col sizing={9}>.col-9</Col>
        <Col sizing={4}>
            .col-4<br />Since 9 + 4 = 13 &gt; 12, this 4-column-wide
            div gets wrapped onto a new line as one contiguous unit.
        </Col>
        <Col sizing={6}>
            .col-6<br />Subsequent columns continue along the new line.
        </Col>
    </Row>
</Container>

Column breaks

.col-6 .col-sm-3

            
            <Container class="text-center">
    <Row>
        <Col sizing={{ xs: 6, sm: 3 }}>.col-6 .col-sm-3</Col>
        <Col sizing={{ xs: 6, sm: 3 }}>.col-6 .col-sm-3</Col>

        <!-- Force next columns to break to new line -->
        <div class="w-100"></div>

        <Col sizing={{ xs: 6, sm: 3 }}>.col-6 .col-sm-3</Col>
        <Col sizing={{ xs: 6, sm: 3 }}>.col-6 .col-sm-3</Col>
    </Row>
</Container>

.col-6 .col-sm-4

            
            <Container class="text-center">
    <Row>
        <Col sizing={{ xs: 6, sm: 4 }}>.col-6 .col-sm-4</Col>
        <Col sizing={{ xs: 6, sm: 4 }}>.col-6 .col-sm-4</Col>

        <!-- Force next columns to break to new line
             at md breakpoint and up -->
        <div class="w-100 d-none d-md-block"></div>

        <Col sizing={{ xs: 6, sm: 4 }}>.col-6 .col-sm-4</Col>
        <Col sizing={{ xs: 6, sm: 4 }}>.col-6 .col-sm-4</Col>
    </Row>
</Container>

Order classes

First in DOM, no order applied

Second in DOM, with a larger order

Third in DOM, with an order of 1

            
            <Container class="text-center">
    <Row>
        <Col>First in DOM, no order applied</Col>
        <Col order={5}>Second in DOM, with a larger order</Col>
        <Col order={1}>Third in DOM, with an order of 1</Col>
    </Row>
</Container>

First in DOM, ordered last

Second in DOM, unordered

Third in DOM, ordered first

            
            <Container class="text-center">
    <Row>
        <Col order={'last'}>First in DOM, ordered last</Col>
        <Col>Second in DOM, unordered</Col>
        <Col order={'first'}>Third in DOM, ordered first</Col>
    </Row>
</Container>

Offset classes

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

            
            <Container class="text-center">
    <Row>
        <Col sizing={{ md: 4 }}>
            .col-md-4
        </Col>
        <Col sizing={{ md: 4 }} offset={{ md: 4 }}>
            .col-md-4 .offset-md-4
        </Col>
    </Row>
    <Row>
        <Col sizing={{ md: 3 }} offset={{ md: 3 }}>
            .col-md-3 .offset-md-3
        </Col>
        <Col sizing={{ md: 3 }} offset={{ md: 3 }}>
            .col-md-3 .offset-md-3
        </Col>
    </Row>
    <Row>
        <Col sizing={{ md: 6 }} offset={{ md: 3 }}>
            .col-md-6 .offset-md-3
        </Col>
    </Row>
</Container>

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

            
            <Container class="text-center">
    <Row>
        <Col sizing={{ sm: 5, md: 6 }}>
            .col-sm-5 .col-md-6
        </Col>
        <Col sizing={{ sm: 5, md: 6 }} offset={{ sm: 2, md: 0 }}>
            .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
        </Col>
    </Row>
    <Row>
        <Col sizing={{ sm: 6, md: 5, lg: 6 }}>
            .col-sm-6 .col-md-5 .col-lg-6
        </Col>
        <Col sizing={{ sm: 6, md: 5, lg: 6 }} offset={{ md: 2, lg: 0 }}>
            .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
        </Col>
    </Row>
</Container>

Margin utilities

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

            
            <Container class="text-center">
    <Row>
        <Col sizing={{ md: 4 }}>.col-md-4</Col>
        <Col sizing={{ md: 4 }} class="ms-auto">
            .col-md-4 .ms-auto
        </Col>
    </Row>
    <Row>
        <Col sizing={{ md: 3 }} class="ms-md-auto">
            .col-md-3 .ms-md-auto
        </Col>
        <Col sizing={{ md: 3 }} class="ms-md-auto">
            .col-md-3 .ms-md-auto
        </Col>
    </Row>
    <Row>
        <Col sizing="auto" class="me-auto">
            .col-auto .me-auto
        </Col>
        <Col sizing="auto">.col-auto</Col>
    </Row>
</Container>

Standalone column classes

.col-3: width of 25%

.col-sm-9: width of 75% above sm breakpoint

            
            <Col sizing={{ sm: 3 }} class="p-3 mb-2">
    .col-3: width of 25%
</Col>

<Col sizing={{ sm: 9 }} class="p-3">
    .col-sm-9: width of 75% above sm breakpoint
</Col>