ITATS Design System - Grid System

Breakpoints

Bootstrap includes six default breakpoints for building responsively.

Breakpoint	Class infix	Dimensions
Extra small	None	< 576px
Small	`sm`	≥ 576px
Medium	`md`	≥ 768px
Large	`lg`	≥ 992px
Extra large	`xl`	≥ 1200px
Extra extra large	`xxl`	≥ 1400px

Equal-width Columns

Use .col for equal-width columns across all breakpoints.

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

1 of 4

2 of 4

3 of 4

4 of 4

Show Code

<div class="container">
  <div class="row">
    <div class="col">1 of 2</div>
    <div class="col">2 of 2</div>
  </div>
  <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>

Fixed-width Columns

Use .col-{n} to specify exact column widths (1–12). Other columns resize automatically.

col-4

col (auto)

col

col-6

col

col-3

Show Code

<div class="container">
  <div class="row">
    <div class="col-4">col-4</div>
    <div class="col">col (auto)</div>
    <div class="col">col (auto)</div>
  </div>
  <div class="row">
    <div class="col">col</div>
    <div class="col-6">col-6</div>
    <div class="col">col</div>
  </div>
</div>

Responsive Columns

Use breakpoint-specific classes to control column widths at different screen sizes.

col-12 / sm-6 / md-4 / lg-3

col-12 / sm-6 / md-12 / lg-3

Show Code

<div class="row">
  <div class="col-12 col-sm-6 col-md-4 col-lg-3">...</div>
  <div class="col-12 col-sm-6 col-md-4 col-lg-3">...</div>
  <div class="col-12 col-sm-6 col-md-4 col-lg-3">...</div>
  <div class="col-12 col-sm-6 col-md-12 col-lg-3">...</div>
</div>

Offset Columns

Move columns to the right using .offset-{n} or .offset-{bp}-{n}.

col-4

col-4 offset-4

col-3 offset-3

col-6 offset-3

Show Code

<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-4 offset-4">col-4 offset-4</div>
</div>
<div class="row">
  <div class="col-3 offset-3">col-3 offset-3</div>
  <div class="col-3 offset-3">col-3 offset-3</div>
</div>

Gutters

Gutters are the padding between columns. Use .g-{n}, .gx-{n} (horizontal), or .gy-{n} (vertical).

g-0 (no gutter)

col

g-2

col

g-4

col

Show Code

<!-- No gutter -->
<div class="row g-0">...</div>

<!-- Horizontal gutter only -->
<div class="row gx-4">...</div>

<!-- Vertical gutter only -->
<div class="row gy-2">...</div>

<!-- Both axes -->
<div class="row g-3">...</div>

Alignment

Use flexbox alignment utilities on rows and columns.

Horizontal: justify-content-*

start

center

end

between

Show Code

<!-- Horizontal alignment -->
<div class="row justify-content-start">...</div>
<div class="row justify-content-center">...</div>
<div class="row justify-content-end">...</div>
<div class="row justify-content-between">...</div>
<div class="row justify-content-around">...</div>
<div class="row justify-content-evenly">...</div>

<!-- Vertical alignment -->
<div class="row align-items-start">...</div>
<div class="row align-items-center">...</div>
<div class="row align-items-end">...</div>