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.

tip

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

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

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:

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

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.

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

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.

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

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

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

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.

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.

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

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

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

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.

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

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.

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

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

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

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

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

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

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