Colors

Background Colors:

.bg-default

.bg-primary

.bg-secondary

.bg-white

.bg-light

.bg-dark

.bg-black

.bg-success

.bg-error

Font Family

.font-family-base

.font-family-sans

.font-family-serif

.font-family-mono

<p class="font-family-base">...</p>
<p class="font-family-sans">...</p>
<p class="font-family-serif">...</p>
<p class="font-family-mono">...</p>
            

Font Size

.text-xs

.text-sm

.text-base

.text-lg

.text-xl

.text-xxl

<p class="text-xs">...</p>   font-size: .75rem
<p class="text-sm">...</p>   font-size: .875rem
<p class="text-base">...</p> font-size: 1rem
<p class="text-lg">...</p>   font-size: 1.125rem
<p class="text-xl">...</p>   font-size: 1.25rem
<p class="text-xxl">...</p>  font-size: 1.5rem
            

Font Weights

.font-weight-hairline

.font-weight-thin

.font-weight-light

.font-weight-normal

.font-weight-medium

.font-weight-semibold

.font-weight-bold

.font-weight-extrabold

.font-weight-black

<p class="font-weight-hairline">...</p>
<p class="font-weight-thin">...</p>
<p class="font-weight-light">...</p>
<p class="font-weight-normal">...</p>
<p class="font-weight-medium">...</p>
<p class="font-weight-semibold">...</p>
<p class="font-weight-bold">...</p>
<p class="font-weight-extrabold">...</p>
<p class="font-weight-black">...</p>
            

Headings

Responsive Headline 1

Responsive Headline 2

Responsive Headline 3

Responsive Headline 4

Responsive Headline 5

Responsive Headline 6

<h1>Responsive Headline 1</h1>
<h2>Responsive Headline 2</h2>
<h3>Responsive Headline 3</h3>
<h4>Responsive Headline 4</h4>
<h5>Responsive Headline 5</h5>
<h6>Responsive Headline 6</h6>
            

.h1 through .h6 classes are also available

Responsive Headline 1

Responsive Headline 2

Responsive Headline 3

Responsive Headline 4

Responsive Headline 5

Responsive Headline 6

<p class="h1">Responsive Headline 1</p>
<p class="h2">Responsive Headline 2</p>
<p class="h3">Responsive Headline 3</p>
<p class="h4">Responsive Headline 4</p>
<p class="h5">Responsive Headline 5</p>
<p class="h6">Responsive Headline 6</p>
            

Lists

<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit
  <ul>
    <li>Phasellus iaculis neque</li>
    <li>Purus sodales ultricies</li>
  </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
</ul>
              

<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
</ol>
              

<dl>
  <dt>Term 1</dt>
  <dd>Consectetur adipiscing elit</dd>
  <dt>Term 2</dt>
  <dd>Faucibus porta lacus fringilla vel</dd>
</dl>
              

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit
  <ul>
    <li>Phasellus iaculis neque</li>
    <li>Purus sodales ultricies</li>
  </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
</ul>
              

  <ul class="list-inline">
    <li class="list-inline__item">Lorem ipsum</li>
    <li class="list-inline__item">Phasellus iaculis</li>
    <li class="list-inline__item">Nulla volutpat</li>
  </ul>
              

Paragraph

Lorem ipsum dolor sit amet, consectetur sample link adipisicing elit. Dolores explicabo architecto perferendis ut nemo! Sapiente, eum quidem placeat, blanditiis, maiores, labore.

Sample link

You can use the mark tag to highlight text.

This line of text is meant to be treated as no longer accurate.

This line of text will render as underlined

This line rendered as bold text.

This line rendered as italicized text.

<p>
Lorem ipsum dolor sit amet, consectetur sample link adipisicing elit. Dolores explicabo architecto perferendis ut nemo! Sapiente, eum quidem placeat, blanditiis, maiores, labore.
</p>
<p>
<a href="#">Sample link</a>
</p>
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><u>This line of text will render as underlined</u></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
            

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod atque accusamus voluptate optio ea! Pariatur ipsam nihil, maiores dignissimos blanditiis natus, nostrum voluptas eveniet accusantium iste recusandae cum laborum reiciendis.

- John Doe

<blockquote>
  <p>...</p>
  <cite>...</cite>
</blockquote>
            

Style & Decorations

.italic

.uppercase

.lowercase

.capitalize

.normal-case

.underline

.line-through

.no-underline

<p class="italic">...</p>
<p class="uppercase">...</p>
<p class="lowercase">...</p>
<p class="capitalize">...</p>
<p class="normal-case">...</p>
<p class="underline">...</p>
<p class="line-through">...</p>
<p class="no-underline">...</p>
            

Text Alignment

.text-left

.text-center

.text-right

.text-justify

<p class="text-left">...</p>
<p class="text-center">...</p>
<p class="text-right">...</p>
<p class="text-justify">...</p>
            

Spacing

Utilities for controlling an element's padding and margin.

All:

.{property}{side}-{size}

Breakpoints: sm, md, lg, xl

.{breakpoint}-{property}{side}-{size}

Example:

• .m-1 would add 1rem of margin to the each side of the element.
• .mb-4 would add 4rem of margin to the bottom of the element.
• .pt-025 would add .25rem of padding to the top of the element.
• .mb-2 sm-mb-3 md-mb-4 lg-mb-5 xl-mb-6 would add 2rem, sm: 3rem, md: 4rem, lg: 5rem, xl: 6rem of margin to the bottom of the element.
• .mx-auto would add margin-left: auto; margin-right: auto; to the element.

Example

<div class="mb-0"></div>      margin-bottom: 0;
<div class="mb-025"></div>    margin-bottom: .25rem;
<div class="mb-050"></div>    margin-bottom: .50rem;
<div class="mb-075"></div>    margin-bottom: .75rem;
<div class="mb-1"></div>      margin-bottom: 1rem;
<div class="mb-2"></div>      margin-bottom: 2rem;
...
            

Responsive

<p class="mb-2 sm-mb-3 md-mb-4 lg-mb-5 xl-mb-6">

margin-bottom: 2rem;
@media screen and (min-width: 576px) { margin-bototm: 3rem; }
@media screen and (min-width: 768px) { margin-bototm: 4rem; }
@media screen and (min-width: 992px) { margin-bototm: 5rem; }
@media screen and (min-width: 1200px){ margin-bototm: 6rem; }
            

Module: Navbar

Default:

<nav class="navbar">...</nav>
            

Fixed to top:

<nav class="navbar navbar--fixed">...</nav>
            

Fixed to top with "transparent animation":
Navbar becomes transparent when scrolling down.
It fires when we scroll more than 150px from to the top.

<nav class="navbar navbar--fixed navbar--fixed-transparent" data-js="navbar">...</nav>
            

Fixed to top with "show / hide animation":
Navbar slides out of view when scrolling down and slides back in when scrolling up.
It fires when we scroll more than 150px from to the top.

<nav class="navbar navbar--fixed navbar--fixed-toggle" data-js="navbar">...</nav>
            

Module: Flickity Carousel Docs

Fade in carousel for no Flash Of Unstyled Content (FOUC)

<div class="carousel is-hidden" data-js="carousel">
  <div class="carousel-cell">...</div>
  <div class="carousel-cell">...</div>
  <div class="carousel-cell">...</div>
</div>
            

Module: Search Overlay

Most likely it could be used in e.g. navbar.
When an overlay is opened, we focus on input field.
The overlay can be closed clicking "x" close icon or Escape key.

Open an overlay

<a href="#" role="button" data-js="search-trigger">
  Open an overlay
</a>
<div class="search-overlay is-hidden" data-js="search-target">
  <a href="#" role="button" class="search-overlay__close" data-js="search-close">x</a>
  <form action="" class="search-overlay__form">
    <input class="search-overlay__input" type="text" name="q" id="" placeholder="Search..." data-js="search-input">
    <button class="search-overlay__btn btn btn-link">
      Search
    </button>
  </form>
</div>
            

JS Component: Collapse Docs

Read More

<div class="collapse collapse-more-1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident doloribus, eos rem. Nostrum possimus reiciendis, neque iure repudiandae explicabo hic veritatis ad, deleniti provident soluta, facere, voluptates tenetur quae. Maiores!
</div>
<p>
  <a
    href="#"
    data-toggle="collapse"
    data-target=".collapse.collapse-more-1"
    data-text-closed="Read More"
    data-text-opened="Read Less"
    role="button">Read More</a>
</p>
            

JS Component: Smooth Scroll Docs

Scroll to the next JS component

Scroll to top

<a href="#buttons" data-scroll role="button">Scroll to buttons section</a>
<div id="buttons">Introduction</div>
...
<a href="#" data-scroll="0" role="button">Scroll to top</a>
            

JS Component: Toggle Element Docs

Toggle element

Here's some text we want to toggle visibility of. Let's do it!

<p>
  <a href="#example" role="button" data-js="toggle-element">Toggle element</a>
</p>
<p id="example" class="is-hidden">
  Here's some text we want to toggle visibility of. Let's do it!
</p>
            

Bootstrap Display Docs

Quickly and responsively toggle the display value of components and more with our display utilities.

Bootstrap Flex Docs

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.

Bootstrap Grid Docs

<div class="row">
  <div class="col-sm">
    One of three columns
  </div>
  <div class="col-sm">
    One of three columns
  </div>
  <div class="col-sm">
    One of three columns
  </div>
</div>
            

Bootstrap Responsive Breakpoints
Media Queries Docs

CSS:

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

@include media-breakpoint-between(md, xl) { ... }
            

Mixins / Utilities

@include aspect-ratio(16,9);
              

<div class="ratio-4-3" style="background-image: url('...')"></div>
<div class="ratio-16-9" style="background-image: url('...')"></div>
              

@include center;
              

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
              

Mixin: Clearfix

CSS

@include clearfix;
              

HTML

<div class="clearfix"></div>
              

Mixin: Max Width Center

Set max width for an element and make it centered

CSS

@include max-width-center(600px);
              

Mixin: Overlay

Absolute element with top,right,bottom,left = 0

CSS

@include overlay();
              

Mixin: Pseudo

Pseudo elements after / before

CSS

 @include pseudo;
              

Mixin: Rem

Px to rem

CSS

font-size: rem(20)
margin: rem(40) rem(40);
              

Mixin: Responsive Font Size

Responsive font size for various media query breakpoints

CSS

@include font-size(xs, sm, md, lg, xl);
@include font-size(12px, 14px, 16px, 18px, 20px);

If you want to omit specific breakpoint please use ''
@include font-size(12px, '', '', '', 20px);
              

Mixin: Responsive Size

Responsive size for various media query breakpoints

CSS

Type:
h    : height,
minh : min-height,
maxh : max-height,
w    : width,
minw : min-width,
maxw : max-width

@include size('type', xs, sm, md, lg, xl);
@include size('h', 10px, 20px, 30px, 40px, 50px);

If you want to omit specific breakpoint please use ''
@include size('h', 10px, '', '', 40px, 50px);
              

Mixin: Responsive Spacing

Responsive spacing for various media query breakpoints

CSS

@include space('type', xs, sm, md, lg, xl);
@include space('mb', 10px, 20px, 30px, 40px, 50px);

If you want to omit specific breakpoint please use ''
@include space('mb', 10px, '', '', 40px, 50px);

Type:
m  : margin
mt : margin-top
mr : margin-right
mb : margin-bottom
ml : margin-left
mx : (horizontal) margin-left and margin-right
my : (vertical) margin-top and margin bottom

p  : padding
pt : padding-top
pr : padding-right
pb : padding-bottom
pl : padding-left
px : (horizontal) padding-left and padding-right
py : (vertical) padding-top and padding bottom