Colors


Bootstrap Docs >

Brand Colors

Brand Primary

.bg-primary
$primary: #4F74BC;

Brand Secondary

.bg-secondary
$secondary: #7491CA;

Brand Dark

.bg-dark
$dark: #222222;

Brand Light

.bg-light
$light: #F9F9F9;

Brand Info

.bg-info
$info: #43A090;

Brand Success

.bg-success
$success: #739E11;

Brand Danger

.bg-danger
$danger: #e6271a;

Brand Warning

.bg-warning
$warning: #C9C016;

Grays

Gray 1000

.bg-gray-1000

Gray 900

.bg-gray-900

Gray 800

.bg-gray-800

Gray 700

.bg-gray-700

Gray 600

.bg-gray-600

Gray 500

.bg-gray-500

Gray 400

.bg-gray-400

Gray 300

.bg-gray-300

Gray 200

.bg-gray-200

Gray 100

.bg-gray-100

Gray 50

.bg-gray-50

Brand Transparent

.bg-transparent

Typography


Bootstrap Docs >

Font Styles

Avenir Next
.font-family-sans-serif
$font-family-sans-serif
$font-family-base

Used for:

Body Copy / Base Font Family

Avenir Next Italic
.font-family-sans-serif .font-italic

Used for:

Italics font glyphs are loaded

ITC SLimbach Std Bold Italic
.headings-font-family
$headings-font-family

Used for:

Headings

Avenir Next Bold
.subheadings-font-family
$subheadings-font-family

Used for:

Sub Headings
Links

Headings


h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

Display Headings


Display 1

.display-1

Display 2

.display-2

Display 3

.display-3

Display 4

.display-4

Paragraph Styles


Lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

.lead

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Links

Text Link

Duis mollis, est non commodo luctus. Link In Paragraph Integer posuere erat a ante.

Font Sizing

Font size base 16px

$font-size-base
.font-size-base


Font size small 14px

$font-size-sm
.font-size-sm


Font size large 18px

$font-size-lg
.font-size-lg


Reversed


use the class .reversed on the parent element to reverse a section

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

Display Headings


Display 1

.display-1

Display 2

.display-2

Display 3

.display-3

Display 4

.display-4

Paragraph Styles


Lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

.lead

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Links

Text Link

Duis mollis, est non commodo luctus. Link In Paragraph Integer posuere erat a ante.

Font Sizing

Font size base 16px

$font-size-base
.font-size-base


Font size small 14px

$font-size-sm
.font-size-sm


Font size large 18px

$font-size-lg
.font-size-lg


Iconography


Add SVG files to assets/SVG with 'icon-' prefix to access in Liquid templates

{ % include 'icon-cart' % }

Custom Icons

Payment icons

Social icons

Iconography


Add SVG files to assets/SVG with 'icon-' prefix to access in Liquid templates

{ % include 'icon-cart' % }

Custom Icons

Payment icons

Social icons

Images


Bootstrap Docs >

Simple Responsive Image

Placeholder for style guide responsive image
<img src="..." class="img-fluid" alt="Placeholder for responsive image">

Picture Tag

Best used for art directing image sizes across breakpoints. Example: have a portrait image for portait devices and landscape images for landscape devices.

Placeholder for style guide picture tags

      ​<picture>
        <source media="(min-width: 1440px)" srcset="http://via.placeholder.com/2048x960" type="image/svg+xml">
        <source media="(min-width: 768px)" srcset="http://via.placeholder.com/1024x640" type="image/svg+xml">
        <source media="(min-width: 375px)" srcset="http://via.placeholder.com/640x960" type="image/svg+xml">
        <img src="http://via.placeholder.com/320x640" class="img-fluid" alt="Placeholder for picture tags">
      </picture>
      

Slate Responsive Image


      { % include 'responsive-image' with
        image: featured_image,
        image_class: "css-class",
        wrapper_class: "wrapper-css-class",
        max_width: 700,
        max_height: 800
      % }
      

Slate Responsive Background Image


      <div class="lazyload" data-bgset="{ % include 'responsive-bg-image', image: article.image % }"></div>
      

Figures

A generic square placeholder image with rounded corners in a figure.
A caption for the above image.

Forms


Use the .form-column class to wrap your <form>

We'll never share your email with anyone else. Form Text Link

Check Box styles

Choose One:

Radio styles

Choose One:



Inline Form



Form Validation

Choose One:
Example invalid feedback text
Pick one:
More example invalid feedback text
Example invalid custom select feedback
Example invalid custom file feedback

Forms


Use the .form-column class to wrap your <form>

We'll never share your email with anyone else. Form Text Link

Check Box styles

Pick One:

Radio styles

Pick One:



Inline Form



Form Validation

Example invalid feedback text
Pick one:
More example invalid feedback text
Example invalid custom select feedback
Example invalid custom file feedback

Buttons


.btn.btn-lg

.btn

.btn.btn-sm

.btn.btn-block

.btn.btn-icon

.btn.btn-icon-only

.btn.btn-link-icon

.btn..btn-sm.btn-link-icon

Buttons Reversed


.btn.btn-lg

.btn

.btn.btn-sm

.btn.btn-block

.btn.btn-icon

.btn.btn-icon-only

.btn.btn-link-icon

.btn..btn-sm.btn-link-icon

Tables


Bootstrap Docs >

Default Table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Spacing Examples


Bootstrap Docs >

.mb-1
.mb-2
.mb-3
.mb-4
.mb-5
.mt-5
.p-1
.p-2
.p-3
.p-4
.p-5

Grid Examples


Bootstrap Docs >

.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6