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: #B34700;
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 >

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

Responsive image
<img src="..." class="img-fluid" alt="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.

...

      ​<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="...">
      </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
Radio styles



Inline Form



Form Validation

Example invalid feedback text
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
Radio styles



Inline Form



Form Validation

Example invalid feedback text
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 >

# 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