#### Grid

#### Grid Options

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
--- | --- | --- | --- | --- | --- | ---
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints
Max container width | None (auto) | 540px | 720px | 960px | 1140px | 1320px
Class prefix | `col-` | `col-sm-` | `col-md-` | `col-lg-` | `col-xl-` | `col-xxl-`
# of columns | 12
Gutter width | 24px (12px on each side of a column)
Custom gutters | Yes
Nestable | Yes
Offsets | Yes
Column ordering | Yes

#### Vertical alignment (align-items-start)

Show Code

Use `align-items-start` class to vertically align-items at the start.

col-sm-4
col-sm-4
col-sm-4

    <!-- Vertical alignment (align-items-start) -->
    <div class="row align-items-start">
        <div class="col-sm-4">
            ...
        </div>
        <div class="col-sm-4">
            ...
        </div>
        <div class="col-sm-4">
            ...
        </div>
    </div>

#### Vertical alignment (align-items-center)

Show Code

Use `align-items-center` class to vertically align-items at the center.

col-sm-4
col-sm-4
col-sm-4

    <!-- Vertical alignment (align-items-center) -->
    <div class="row align-items-center">
        <div class="col-sm-4">
            ...
        </div>
        <div class="col-sm-4">
            ...
        </div>
        <div class="col-sm-4">
            ...
        </div>
    </div>

#### Vertical alignment (align-items-end)

Show Code

Use `align-items-end` class to vertically align-items at the end.

col-sm-4
col-sm-4
col-sm-4

    <!-- Vertical alignment (align-items-end) -->
    <div class="row align-items-end">
        <div class="col-sm-4">
            ...
        </div>
        <div class="col-sm-4">
            ...
        </div>
        <div class="col-sm-4">
            ...
        </div>
    </div>

#### Align Self

Show Code

Use the `align-self-start`,`align-self-center`, or `align-self-end` class respectively to vertically align items with a different position.

align-self-start
align-self-center
align-self-end

    <!-- Align Self -->
    <div class="row">
        <div class="col-sm-4 align-self-start">
            ...
        </div>
        <div class="col-sm-4 align-self-center">
            ...
        </div>
        <div class="col-sm-4 align-self-end">
            ...
        </div>
    </div>

#### Horizontal Alignment

Show Code

Use the `justify-content-start`,`justify-content-center`, or `justify-content-end` class respectively to horizontally align items with a different position.

justify-content-start
justify-content-center
justify-content-end

    <!-- Horizontal Alignment -->
    <div class="row justify-content-start">
        <div class="col-sm-4">
            ...
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-sm-4">
            ...
        </div>
    </div>
    <div class="row justify-content-end">
        <div class="col-sm-4">
            ...
        </div>
    </div>

##### Theme Customizer

###### Layout

Choose your layout

##### Vertical

##### Horizontal

##### Two Column

###### Color Scheme

Choose Light or Dark Scheme.

##### Light

##### Dark

###### Layout Width

Choose Fluid or Boxed layout.

##### Fluid

##### Boxed

###### Layout Position

Choose Fixed or Scrollable Layout Position.

Fixed Scrollable

###### Topbar Color

Choose Light or Dark Topbar Color.

##### Light

##### Dark