wovoui

Grid system

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together.

Column
Column
Column

<Container>
    <Row>
        <Col class="border">
        Column
        </Col>
        <Col class="border">
        Column
        </Col>
        <Col class="border">
        Column
        </Col>
    </Row>
</Container>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Grid options

Bootstrap’s grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follow:

  • Extra small (xs)
  • Small (sm)
  • Medium (md)
  • Large (lg)
  • Extra large (xl)
  • Extra extra large (xxl)

Equal-width

For example, here are two grid layouts that apply to every device and viewport, from xs to xxl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3 

<Container>
    <Row>
        <Col class="border">
        1 of 2
        </Col>
        <Col class="border">
        2 of 2
        </Col>
    </Row>
    <Row>
        <Col class="border">
        1 of 3
        </Col>
        <Col class="border">
        2 of 3
        </Col>
        <Col class="border">
        3 of 3
        </Col>
    </Row>
</Container>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3 

<Container>
    <Row>
        <Col>
        1 of 3
        </Col>
        <Col :col="6">
        2 of 3 (wider)
        </Col>
        <Col>
        3 of 3
        </Col>
    </Row>
    <Row>
        <Col>
        1 of 3
        </Col>
        <Col :col="5">
        2 of 3 (wider)
        </Col>
        <Col>
        3 of 3
        </Col>
    </Row>
</Container>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Variable width content

Use col="auto",md="auto" or sm="auto" etc. to size columns based on the natural width of their content.

1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3 

<Container>
    <Row justify-content="md-center">
        <Col :lg="2">
        1 of 3
        </Col>
        <Col md="auto">
        Variable width content
        </Col>
        <Col :lg="2">
        3 of 3
        </Col>
    </Row>
    <Row>
        <Col>
        1 of 3
        </Col>
        <Col md="auto">
        Variable width content
        </Col>
        <Col :lg="2">
        3 of 3
        </Col>
    </Row>
</Container>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Row columns

Rows have same features like Columns. So, col, md, sm, lg all these props can be used in same manner like cols.

Column
Column
Column
Column 

<Container>
    <Row :cols="2">
        <Col>
        Column
        </Col>
        <Col>
        Column
        </Col>
        <Col>
        Column
        </Col>
        <Col>
        Column
        </Col>
    </Row>
</Container>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Nesting

Level 1: .col-sm-3
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6 

<Container>
    <Row>
        <Col :sm="3">
        Level 1: .col-sm-3
        </Col>
        <Col :sm="9">
        <Row>
            <Col :col="8" :sm="6">
            Level 2: .col-8 .col-sm-6
            </Col>
            <Col :col="4" :sm="6">
            Level 2: .col-4 .col-sm-6
            </Col>
        </Row>
        </Col>
    </Row>
</Container>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18