Grid system

Use our 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.

On this page

Example

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.

tip

New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.

Column

vue

<template>
  <Container>
    <Row>
      <Col>Column</Col>
      <Col>Column</Col>
      <Col>Column</Col>
    </Row>
  </Container>
</template>

The above example creates three equal-width columns across all devices and viewports using our predefined grid classes.

Those columns are centered in the page with the parent Container.

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)

As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers.

Here's how the grid changes across these breakpoints:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Container `max-width`	None (auto)	540px	720px	960px	1140px	1320px
Col attribute		`col="sm"`	`col="md"`	`col="lg"`	`col="xl"`	`col="xxl"`
# of columns	12
Gutter width	1.5rem (.75rem on left and right)
Custom gutters	Yes
NeTable	Yes
Column ordering	Yes

Auto-layout columns

Utilize breakpoint-specific column properties for easy column sizing without an explicit numbered properties like sm="6".

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 properties for each breakpoint you need and every column will be the same width.

1 of 2

2 of 2

1 of 2

2 of 2

3 of 3

vue

<template>
  <Container>
    <Row>
      <Col>1 of 2</Col>
      <Col>2 of 2</Col>
    </Row>
    <Row>
      <Col>1 of 2</Col>
      <Col>2 of 2</Col>
      <Col>3 of 3</Col>
    </Row>
  </Container>
</template>

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 properties (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

vue

<template>
  <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>
</template>

Variable width content

Use size="auto" property or {breakpoint}="auto" properties to size columns based on the natural width of their content.

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

vue

<template>
  <Container>
    <Row justify-content="md-center">
      <Col col="lg-2">
        1 of 3
      </Col>
      <Col col="md-auto">
        2 of 3 (wider)
      </Col>
      <Col col="lg-2">
        3 of 3
      </Col>
    </Row>
    <Row>
      <Col>1 of 3</Col>
      <Col col="md-auto">
        2 of 3 (wider)
      </Col>
      <Col>3 of 3</Col>
    </Row>
  </Container>
</template>

Responsive classes

Bootstrap's grid includes six tiers of predefined classes for building complex responsive layouts.

Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

All breakpoints

For grids that are the same from the smallest of devices to the largest, use the col tag.

Specify a numbered properties when you need a particularly sized column; otherwise, feel free to stick to col.

1 of 3

3 of 3

col-sm

2 of 3 (wider)

3 of 3

vue

<template>
  <Container>
    <Row>
      <Col>1 of 3</Col>
      <Col>3 of 3</Col>
    </Row>
    <Row>
      <Col>col-sm</Col>
      <Col>2 of 3 (wider)</Col>
      <Col>3 of 3</Col>
    </Row>
  </Container>
</template>

Stacked to horizontal

Using a single set of <Col sm=""> tags, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (sm).

1 of 3

3 of 3

col-sm

2 of 3 (wider)

3 of 3

vue

<template>
  <Container>
    <Row>
      <Col>1 of 3</Col>
      <Col>3 of 3</Col>
    </Row>
    <Row>
      <Col>col-sm</Col>
      <Col>2 of 3 (wider)</Col>
      <Col>3 of 3</Col>
    </Row>
  </Container>
</template>

Mix and match

Don't want your columns to simply stack in some grid tiers?

Use a combination of different properties for each tier as needed. See the example below for a better idea of how it all works.

.col-md-8

.col-6 .col-md-4

.col-6

vue

<template>
  <Container>
    <Row>
      <Col col="md-8">
        .col-md-8
      </Col>
      <Col col="6 md-4">
        .col-6 .col-md-4
      </Col>
    </Row>
    <Row>
      <Col col="6 md-4">
        .col-6 .col-md-4
      </Col>
      <Col col="6 md-4">
        .col-6 .col-md-4
      </Col>
      <Col col="6 md-4">
        .col-6 .col-md-4
      </Col>
    </Row>
    <Row>
      <Col col="6">
        .col-6
      </Col>
      <Col col="6">
        .col-6
      </Col>
    </Row>
  </Container>
</template>

Row columns

Use the responsive <Row columns=""> classes to quickly set the number of columns that best render your content and layout.

Whereas normal Col classes apply to the individual columns (e.g.,<Col :md="4">）, the row columns classes are set on the parent Row as a shortcut.

With <bsGridRow columns="auto">） you can give the columns their natural width.

Use these row columns classes to quickly create basic grid layouts or to control your card layouts.

Column

vue

<template>
  <Container>
    <Row columns="2">
      <Col>Column</Col>
      <Col>Column</Col>
      <Col>Column</Col>
      <Col>Column</Col>
    </Row>
  </Container>
</template>

Column

vue

<template>
  <Container>
    <Row columns="3">
      <Col>Column</Col>
      <Col>Column</Col>
      <Col>Column</Col>
      <Col>Column</Col>
    </Row>
  </Container>
</template>

Column

vue

<template>
  <Container>
    <Row auto>
      <Col>Column</Col>
      <Col>Column</Col>
      <Col>Column</Col>
      <Col>Column</Col>
    </Row>
  </Container>
</template>

Column

vue

<template>
  <Container>
    <Row columns="4">
      <Col>Column</Col>
      <Col>Column</Col>
      <Col>Column</Col>
      <Col>Column</Col>
    </Row>
  </Container>
</template>

Column

vue

<template>
  <Container>
    <Row columns="4">
      <Col>Column</Col>
      <Col>Column</Col>
      <Col col="6">
        Column
      </Col>
      <Col>Column</Col>
    </Row>
  </Container>
</template>

Column

vue

<template>
  <Container>
    <Row columns="1 sm-2 md-4">
      <Col>Column</Col>
      <Col>Column</Col>
      <Col>Column</Col>
      <Col>Column</Col>
    </Row>
  </Container>
</template>

Nesting

To nest your content with the default grid, add a new <Row> and set of <Col sm=""> columns within an existing <Col sm=""> column.

Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).