Powerful Svelte-Bootstrap SaaS App Template

Admin CRM Application Template

Robust Next.js SaaS App Template

Powerful React-Bootstrap SaaS App Template

Modern Remix SaaS App Template

VueJS-Bootstrap SaaS App Template

Intuitive Nuxt-Bootstrap SaaS App Template

Grid System

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.

Basic Structure

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.

1 of 3

2 of 3

3 of 3

<div class="container">
	<div class="row">
		<div class="col">
		Column
		</div>
		<div class="col">
		Column
		</div>
		<div class="col">
		Column
		</div>
	</div>
</div>

import React from 'react';
import { Col, Container, Row } from 'react-bootstrap';
function BasicGrid() {
  return (
    <Container>
      <Row>
        <Col>1 of 3</Col>
        <Col>2 of 3</Col>
        <Col>3 of 3</Col>
      </Row>
    </Container>
  );
}
export default BasicGrid;

import { Col, Container, Row } from 'react-bootstrap';
const BasicGrid = () => {
  return (
    <Container>
      <Row>
        <Col>1 of 3</Col>
        <Col>2 of 3</Col>
        <Col>3 of 3</Col>
      </Row>
    </Container>
  );
}
export default BasicGrid;

<template>
  <div class="container">
    <div class="row">
      <div class="col">
      1 of 3
      </div>
      <div class="col">
      2 of 3
      </div>
      <div class="col">
      3 of 3
      </div>
    </div>
  </div>
</template>

<template>
  <BContainer>
    <BRow>
      <BCol>
        Column
      </BCol>
      <BCol>
        Column
      </BCol>
      <BCol>
        Column
      </BCol>
    </BRow>
  </BContainer>
</template>

<div class="container">
    <div class="row">
      <div class="col">
      1 of 3
      </div>
      <div class="col">
      2 of 3
      </div>
      <div class="col">
      3 of 3
      </div>
    </div>
  </div>

Grid System

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

	XS <576px	SM ≥576px	MD ≥768px	LG ≥992px	XL ≥1200px	XXL ≥1400px
Max container width	None (auto)	540px	720px	960px	1140px	1320px
Component/props	`Col`	`sm`	`md`	`lg`	`xl`	`xxl`
# of columns	12
Gutter width	1.5rem (.75rem on left and right)
Nestable	Yes
Column ordering	Yes

Tips: Bootstrap v5 added one more grid breakpoint class xxl for ≥1400 breakpoint.

Mix and match

Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

xs=12 md=8

xs=6 md=4

xs=12 md=8

xs=6 md=4

xs=6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>
  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>
  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

import React from 'react';
import { Col, Container, Row } from 'react-bootstrap';
function MixMatch() {
  return (
    <Container className="py-3">
        <Row className="mb-3">
            <Col xs={12} md={8} className="border bg-grey-light-5">
                <div className="p-2">xs=12 md=8</div>
            </Col>
            <Col xs={6} md={4} className="border bg-grey-light-5">
                <div className="p-2">xs=6 md=4</div>
            </Col>
        </Row>
        <Row className="mb-3">
            <Col xs={12} md={8} className="border bg-grey-light-5">
                <div className="p-2">xs=12 md=8</div>
            </Col>
            <Col xs={6} md={4} className="border bg-grey-light-5">
                <div className="p-2">xs=6 md=4</div>
            </Col>
        </Row>
        <Row className="mb-3">
            <Col xs={6} md={4} className="border bg-grey-light-5">
                <div className="p-2">xs=6 md=4</div>
            </Col>
            <Col xs={6} md={4} className="border bg-grey-light-5">
                <div className="p-2">xs=6 md=4</div>
            </Col>
            <Col xs={6} md={4} className="border bg-grey-light-5">
                <div className="p-2">xs=6 md=4</div>
            </Col>
        </Row>
        <Row>
            <Col xs={6} className="border bg-grey-light-5">
                <div className="p-2">xs=6</div>
            </Col>
            <Col xs={6} className="border bg-grey-light-5">
                <div className="p-2">xs=6</div>
            </Col>
        </Row>
    </Container>
  );
}
export default MixMatch;

import React from 'react';
import { Col, Container, Row } from 'react-bootstrap';
function MixMatch() {
  return (
    <Container className="py-3">
        <Row className="mb-3">
            <Col xs={12} md={8} className="border bg-grey-light-5">
                <div className="p-2">xs=12 md=8</div>
            </Col>
            <Col xs={6} md={4} className="border bg-grey-light-5">
                <div className="p-2">xs=6 md=4</div>
            </Col>
        </Row>
        <Row className="mb-3">
            <Col xs={12} md={8} className="border bg-grey-light-5">
                <div className="p-2">xs=12 md=8</div>
            </Col>
            <Col xs={6} md={4} className="border bg-grey-light-5">
                <div className="p-2">xs=6 md=4</div>
            </Col>
        </Row>
        <Row className="mb-3">
            <Col xs={6} md={4} className="border bg-grey-light-5">
                <div className="p-2">xs=6 md=4</div>
            </Col>
            <Col xs={6} md={4} className="border bg-grey-light-5">
                <div className="p-2">xs=6 md=4</div>
            </Col>
            <Col xs={6} md={4} className="border bg-grey-light-5">
                <div className="p-2">xs=6 md=4</div>
            </Col>
        </Row>
        <Row>
            <Col xs={6} className="border bg-grey-light-5">
                <div className="p-2">xs=6</div>
            </Col>
            <Col xs={6} className="border bg-grey-light-5">
                <div className="p-2">xs=6</div>
            </Col>
        </Row>
    </Container>
  );
}
export default MixMatch;

<template>
  <div class="container text-center">
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    </div>
    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    </div>
    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div>
    </div>
  </div>
</template>

<template>
  <BContainer class="text-center">
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <BRow>
      <BCol md="8">md="8"</BCol>
      <BCol sm="6" md="4">sm="6" md="4"</BCol>
    </BRow>
    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <BRow>
      <BCol sm="6" md="4">sm="6" md="4"</BCol>
      <BCol sm="6" md="4">sm="6" md="4"</BCol>
      <BCol sm="6" md="4">sm="6" md="4"</BCol>
    </BRow>
    <!-- Columns are always 50% wide, on mobile and desktop -->
    <BRow>
      <BCol sm="6">sm="6"</BCol>
      <BCol sm="6">sm="6"</BCol>
    </BRow>
  </BContainer>
</template>

<div class="container text-center">
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    </div>
    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    </div>
    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div>
    </div>
  </div>

Gutters

Gutters are the gaps between column content, created by horizontal padding and vertical margin. bootstrap set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content.Gutters start at 1.5rem (24px) wide.

One of three columns

One of two columns

<!-- Gutter width 3rem with gx-5 -->
<div class="container">
  <div class="row gx-5">
    <div class="col">.col</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
  </div>
  <!-- Gutter width 3rem with gx-1 -->
  <div class="row gx-3">
    <div class="col">.col</div>
    <div class="col">.col</div>
  </div>
</div>

import React from 'react';
import { Col, Container, Row } from 'react-bootstrap';
function Gutters() {
  return (
    <Container>
        <Row className="gx-5 mb-3">
            <Col>
                <div className="border bg-grey-light-5 p-2">One of three columns</div>
            </Col>
            <Col>
                <div className="border bg-grey-light-5 p-2">One of three columns</div>
            </Col>
            <Col>
                <div className="border bg-grey-light-5 p-2">One of three columns</div>
            </Col>
        </Row>
        <Row className="gx-3">
            <Col>
                <div className="border bg-grey-light-5 p-2">One of two columns</div>
            </Col>
            <Col>
                <div className="border bg-grey-light-5 p-2">One of two columns</div>
            </Col>
        </Row>
    </Container>
  );
}
export default Gutters;

import React from 'react';
import { Col, Container, Row } from 'react-bootstrap';
function Gutters() {
  return (
    <Container>
        <Row className="gx-5 mb-3">
            <Col>
                <div className="border bg-grey-light-5 p-2">One of three columns</div>
            </Col>
            <Col>
                <div className="border bg-grey-light-5 p-2">One of three columns</div>
            </Col>
            <Col>
                <div className="border bg-grey-light-5 p-2">One of three columns</div>
            </Col>
        </Row>
        <Row className="gx-3">
            <Col>
                <div className="border bg-grey-light-5 p-2">One of two columns</div>
            </Col>
            <Col>
                <div className="border bg-grey-light-5 p-2">One of two columns</div>
            </Col>
        </Row>
    </Container>
  );
}
export default Gutters;

<template>
  <div class="container text-center">
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    </div>
    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    </div>
    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div>
    </div>
  </div>
</template>

<template>
  <BContainer>
  <!-- Gutter width 3rem with gutterX -->
    <BRow gutterX="5">
      <BCol>
        One of three columns
      </BCol>
      <BCol>
        One of three columns
      </BCol>
      <BCol>
        One of three columns
      </BCol>
    </BRow>
    <!-- Gutter width 3rem with gutterX -->
    <BRow gutterX="3">
      <BCol>
        One of two columns
      </BCol>
      <BCol>
        One of two columns
      </BCol>
    </BRow>
  </BContainer>
</template>

<div class="container text-center">
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    </div>
    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    </div>
    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div>
    </div>
  </div>

Reordering

The Col breakpoint props also have a more complicated object prop form: {span: number, order: number, offset: number} for specifying offsets and ordering effects.

You can use the order property to control the visual order of your content.

First, but unordered

Second, but last

Third, but second

<div class="container">
  <div class="row">
    <div class="col order-last">
    First in DOM, ordered last
    </div>
    <div class="col">
    Second in DOM, unordered
    </div>
    <div class="col order-first">
    Third in DOM, ordered first
    </div>
  </div>
</div>

import React from 'react';
import { Col, Container, Row } from 'react-bootstrap';
const Reordering = () => {
  return (
    <Container>
      <Row>
        <Col xs className="border bg-grey-light-5">
            <div className="p-2">First, but unordered</div>
        </Col>
        <Col xs={{ order: 2 }} className="border bg-grey-light-5">
            <div className="p-2">Second, but last</div>
        </Col>
        <Col xs={{ order: 1 }} className="border bg-grey-light-5">
            <div className="p-2">Third, but second</div>
        </Col>
      </Row>
    </Container>
  );
}
export default Reordering;

import React from 'react';
import { Col, Container, Row } from 'react-bootstrap';
const Reordering = () => {
  return (
    <Container>
      <Row>
        <Col xs className="border bg-grey-light-5">
            <div className="p-2">First, but unordered</div>
        </Col>
        <Col xs={{ order: 2 }} className="border bg-grey-light-5">
            <div className="p-2">Second, but last</div>
        </Col>
        <Col xs={{ order: 1 }} className="border bg-grey-light-5">
            <div className="p-2">Third, but second</div>
        </Col>
      </Row>
    </Container>
  );
}
export default Reordering;

<template>
  <div class="container">
      <div class="row">
          <div class="col">
            First in DOM, no order applied
          </div>
          <div class="col order-2">
            Second in DOM, with a larger order
          </div>
          <div class="col order-1">
            Third in DOM, with an order of 1
          </div>
      </div>
  </div>
</template>

<template>
  <BContainer>
    <BRow>
      <BCol order="2" order-lg="3">
        First in DOM, with an order of 2
      </BCol>
      <BCol order="3" order-lg="2">
        Second in DOM, with an order of 3
      </BCol>
      <BCol order="1" order-lg="1">
        Last in DOM, with an order of 1
      </BCol>
    </BRow>
  </BContainer>
</template>

<div class="container">
      <div class="row">
          <div class="col">
            First in DOM, no order applied
          </div>
          <div class="col order-2">
            Second in DOM, with a larger order
          </div>
          <div class="col order-1">
            Third in DOM, with an order of 1
          </div>
      </div>
  </div>

Column widths in Row

The Row lets you specify column widths across 6 breakpoint sizes (xs, sm, md, lg, xl and xxl). For every breakpoint, you can specify the amount of columns that will fit next to each other. You can also specify auto to set the columns to their natural widths.

Five

Seven

Nine

<!-- Column-5 -->
<div class="container">
<div class="row row-cols-xl-5">
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
</div>
<!-- Column-7 -->
<div class="row row-cols-xl-7">
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
</div>
<!-- Column-9 -->
<div class="row row-cols-xl-9">
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
</div>
</div>

import React from 'react';
import { Col, Container, Row } from 'react-bootstrap';
const RowColumns = () => {
  return (
 <Container>
     <Row xl={5} className="mb-3" >
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Five </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Five </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Five </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Five </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Five </div>
         </Col>
     </Row>
     <Row xl={7} className="mb-3" >
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Seven </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Seven </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Seven </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Seven </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Seven </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Seven </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Seven </div>
         </Col>
     </Row>
     <Row xl={9} className="mb-3" >
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
     </Row>
 </Container>
  );
}
export default RowColumns;

import React from 'react';
import { Col, Container, Row } from 'react-bootstrap';
const RowColumns = () => {
  return (
 <Container>
     <Row xl={5} className="mb-3" >
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Five </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Five </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Five </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Five </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Five </div>
         </Col>
     </Row>
     <Row xl={7} className="mb-3" >
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Seven </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Seven </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Seven </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Seven </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Seven </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Seven </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Seven </div>
         </Col>
     </Row>
     <Row xl={9} className="mb-3" >
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
         <Col className="border bg-grey-light-5" >
             <div className="p-2">Nine </div>
         </Col>
     </Row>
 </Container>
  );
}
export default RowColumns;

<template>
  <div class="container">
    <!-- Column-5 -->
    <div class="row row-cols-xl-5">
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
    </div>
    <!-- Column-7 -->
    <div class="row row-cols-xl-7">
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
    </div>
    <!-- Column-9 -->
    <div class="row row-cols-xl-9">
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
    </div>
  </div>
</template>

<template>
  <BContainer>
    <!-- Column-5 -->
    <BRow colsXl="5">
      <BCol>Five</BCol>
      <BCol>Five</BCol>
      <BCol>Five</BCol>
      <BCol>Five</BCol>
      <BCol>Five</BCol>
    </BRow>
    <!-- Column-7 -->
    <BRow colsXl="7">
      <BCol>Seven</BCol>
      <BCol>Seven</BCol>
      <BCol>Seven</BCol>
      <BCol>Seven</BCol>
      <BCol>Seven</BCol>
      <BCol>Seven</BCol>
      <BCol>Seven</BCol>
    </BRow>
    <!-- Column-9 -->
    <BRow colsXl="9">
      <BCol>Nine</BCol>
      <BCol>Nine</BCol>
      <BCol>Nine</BCol>
      <BCol>Nine</BCol>
      <BCol>Nine</BCol>
      <BCol>Nine</BCol>
      <BCol>Nine</BCol>
      <BCol>Nine</BCol>
      <BCol>Nine</BCol>
    </BRow>
  </BContainer>
</template>

<div class="container">
    <!-- Column-5 -->
    <div class="row row-cols-xl-5">
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
    </div>
    <!-- Column-7 -->
    <div class="row row-cols-xl-7">
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
    </div>
    <!-- Column-9 -->
    <div class="row row-cols-xl-9">
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
    </div>
  </div>

Basic Structure
Grid System
Mix and match
Gutters
Reordering
Row Column