Documentation

Find out what's included in your Bootstrap theme and how to compile source files. Includes live examples and code snippets for every new component.

Contents

Intro

Hey there! You’re looking at the docs for an Official Bootstrap Theme—thanks for your purchase! This theme has been lovingly crafted by Bootstrap’s founders and friends to help you build awesome projects on the web. Let’s dive in.

Each theme is designed as it’s own toolkit—a series of well designed, intuitive, and cohesive components—built on top of Bootstrap. If you’ve used Bootstrap itself, you’ll find this all super familiar, but with new aesthetics, new components, beautiful and extensive examples, and easy-to-use build tools and documentation.

Since this theme is based on Bootstrap, and includes nearly everything Bootstrap itself does, you’ll want to give the official project documentation a once over before continuing. There’s also the kitchen sink—a one-page view of all Bootstrap’s components restyled by this theme.

For everything else, including compiling and using this Bootstrap theme, read through the docs below.

Thanks, and enjoy!

What’s included

Within your Bootstrap theme you’ll find the following directories and files, grouping common resources and providing both compiled and minified distribution files, as well as raw source files.

theme/
  ├── v3
  └── v4
      ├── gulpfile.js
      ├── package.json
      ├── README.md
      ├── docs/
      ├── scss/
      │   ├── bootstrap/
      │   ├── custom/
      │   ├── variables.scss
      │   └── toolkit.scss
      ├── js/
      │   ├── bootstrap/
      │   └── custom/
      ├── fonts/
      │   ├── bootstrap-entypo.eot
      │   ├── bootstrap-entypo.svg
      │   ├── bootstrap-entypo.ttf
      │   ├── bootstrap-entypo.woff
      │   └── bootstrap-entypo.woff2
      └── dist/
          ├── toolkit.css
          ├── toolkit.css.map
          ├── toolkit.min.css
          ├── toolkit.min.css.map
          ├── toolkit.js
          └── toolkit.min.js

Getting started

At the top level of your bootstrap theme you’ll find a directory for each major Bootstrap version that’s supported (currently both v3 and v4). Within each directory you have all the relevant files for that version.

To view your Bootstrap Theme documentation, simply find the docs directory and open index.html in your favorite browser.

$ open docs/index.html

Gulpfile.js

If you’re after more customization we’ve also included a custom Gulp file, which can be used to quickly re-compile a theme’s CSS and JS. You’ll need to install both Node and Gulp before using our included gulpfile.js.

Once node is installed, run the following npm command to install Gulp.

$ npm install gulp -g

When you’re done, make sure you’ve installed the rest of the theme’s dependencies:

$ npm install

Now, modify your source files and run gulp to generate new local dist/ files automatically. Be aware that this replaces existing dist/ files, so proceed with caution.

Theme source code

The scss/, js/, and fonts/ directories contain the source code for our CSS, JS, and icon fonts (respectively). Within the scss/ and js/ directories you’ll find two subdirectories:

The dist/ folder includes everything above, built into single CSS and JS files that can easily be integrated into your project.

The docs/ folder includes the source code for our documentation, as well as a handful of live examples.

The remaining files not specifically mentioned above provide support for packages, license information, and development.

Custom builds

Leverage the included source files and gulpfile.js to customize your Bootstrap Theme for your exact needs. Change variables, exclude components, and more.

Basic template

The basic template is a guideline for how to structure your pages when building with a Bootstrap Theme. Included below are all the necessary bits for using the theme’s CSS and JS, as well as some friendly reminders.

Copy the example below into a new HTML file to get started with it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- These meta tags come first. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap Theme Example</title>

    <!-- Include the CSS -->
    <link href="dist/toolkit.min.css" rel="stylesheet">

  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Include jQuery (required) and the JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="dist/toolkit.min.js"></script>
  </body>
</html>

New components

Entypo

Entypo is an awesome, high quality set of icon glyphs made by Daniel Bruce. We’ve replaced Bootstrap’s default icon font, Glyhpicons, with the complete Entypo set and Entypo social extension.

Simply use the new icon class and an icon-{modifier} on an inline element. See the examples below for more details.

Available icons

Below are all the original and social icons from Entypo that you can choose from:

Examples

Entypo icons can be placed in just about any other element, so long as they are a separate HTML element (e.g., a <span>). See the examples below for how to put them to use.

<button class="btn btn-secondary" type="button">
  <span class="icon icon-thumbs-up"></span>
  Like
</button>
<button class="btn btn-primary" type="button">
  <span class="icon icon-thumbs-up"></span>
  Liked!
</button>
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">
      <span class="icon icon-chat"></span>
      Discussions
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <span class="icon icon-bell"></span>
      Notifications
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <span class="icon icon-users"></span>
      Members
    </a>
  </li>
</ul>

Pill buttons

Add .btn-pill to any button to make them more rounded.

<button type="button" class="btn btn-lg btn-pill btn-primary">Primary</button>
<button type="button" class="btn btn-lg btn-pill btn-secondary">Secondary</button>
<button type="button" class="btn btn-lg btn-pill btn-success">Success</button>
<button type="button" class="btn btn-lg btn-pill btn-info">Info</button>
<button type="button" class="btn btn-lg btn-pill btn-warning">Warning</button>
<button type="button" class="btn btn-lg btn-pill btn-danger">Danger</button>
<button type="button" class="btn btn-lg btn-pill btn-link">Link</button>
<button type="button" class="btn btn-pill btn-primary">Primary</button>
<button type="button" class="btn btn-pill btn-secondary">Secondary</button>
<button type="button" class="btn btn-pill btn-success">Success</button>
<button type="button" class="btn btn-pill btn-info">Info</button>
<button type="button" class="btn btn-pill btn-warning">Warning</button>
<button type="button" class="btn btn-pill btn-danger">Danger</button>
<button type="button" class="btn btn-pill btn-link">Link</button>
<button type="button" class="btn btn-sm btn-pill btn-primary">Primary</button>
<button type="button" class="btn btn-sm btn-pill btn-secondary">Secondary</button>
<button type="button" class="btn btn-sm btn-pill btn-success">Success</button>
<button type="button" class="btn btn-sm btn-pill btn-info">Info</button>
<button type="button" class="btn btn-sm btn-pill btn-warning">Warning</button>
<button type="button" class="btn btn-sm btn-pill btn-danger">Danger</button>
<button type="button" class="btn btn-sm btn-pill btn-link">Link</button>
<button type="button" class="btn btn-xs btn-pill btn-primary">Primary</button>
<button type="button" class="btn btn-xs btn-pill btn-secondary">Default</button>
<button type="button" class="btn btn-xs btn-pill btn-success">Success</button>
<button type="button" class="btn btn-xs btn-pill btn-info">Info</button>
<button type="button" class="btn btn-xs btn-pill btn-warning">Warning</button>
<button type="button" class="btn btn-xs btn-pill btn-danger">Danger</button>
<button type="button" class="btn btn-xs btn-pill btn-link">Link</button>

Blocks

Blocks are a brand new composing metaphor exclusively for use with our Marketing toolkit. Build your site up by stacking several blocks on top of each other to provide focused, attention grabbing units of content.

A basic block

Use these to package stackable, image driven content.

<div class="block text-center">
  <h1 class="block-title">A basic block</h1>
  <h4 class="text-muted">Use these to package stackable, image driven content.</h4>
  <button class="btn btn-primary mt-1">With a simple button</button>
</div>

We have several basic block types, including an inverse block.

An inverse block

Use the inverse modifier for working over dark images.

<div class="block block-inverse text-center">
  <h1 class="block-title">An inverse block</h1>
  <h4 class="text-muted">Use the inverse modifier for working over dark images.</h4>
  <button class="btn btn-primary mt-1">With a simple button</button>
</div>

We’ve also made it easy to integrate embeded content for more interactive block backgrounds.

An embed block

Use block-background to integrate interactive backgrounds.

<div class="block block-inverse text-center">
  <div class="block-foreground">
    <h1 class="block-title">An embed block</h1>
    <h4 class="text-muted">Use block-background to integrate interactive backgrounds.</h4>
    <button class="btn btn-outline-secondary mt-1">With a simple button</button>
  </div>
  <div class="block-background">
    <iframe frameBorder="0" src="https://a.tiles.mapbox.com/v4/jacobthornton.6681fb42/attribution.html?access_token=pk.eyJ1IjoiamFjb2J0aG9ybnRvbiIsImEiOiJlMGRmZmJlNDZkNDhlN2EzMTQ0YWFiNjhlN2RiZWY1ZCJ9.hO-UNIIplnebJYkya-8TEQ"></iframe>
  </div>
</div>

Use different modifiers like block-bordered and block-angle to experiment with different visual treatments and flows between your blocks.

Join over 900,000 designers already using Bootstrap. Get Bootstrap free forever!

By clicking "get started – free Forever!" I agree to Bootstraps Terms of service

“Notice that simple inset border above. Isn't it lovely.”

Mark Otto, Huge Nerd 
<div class="block text-center">
  <div class="container-fluid">
    <h4 class="mb-4">
      Join over 900,000 designers already using Bootstrap. Get Bootstrap <strong>free</strong> forever!
    </h4>
    <form class="form-inline d-flex justify-content-center">
      <input class="form-control mb-3" placeholder="email address">
      <input class="form-control mb-3 mx-1" type="password" placeholder="Create a Password">
      <button class="btn btn-primary mb-3">Get started - free forever</button>
    </form>
    <small class="text-muted">
      By clicking "get started – free Forever!" I agree to Bootstraps
      <a href="#">Terms of service</a>
    </small>
  </div>
</div>
<div class="block block-bordered text-center">
  <div class="container-fluid">
   <blockquote class="pull-quote">
      <p>
        “Notice that simple inset border above. Isn't it lovely.”
      </p>
      <cite>Mark Otto, Huge Nerd</cite>
    </blockquote>
  </div>
</div>

Use the block-fill-height modifier to make your block fill a user’s screen, and then use the responsive alignment classes like block-xs-middle or block-md-bottom to align your content within the block.

“Started at the bottom… etc”

Drake, OVO 
<div class="block block-fill-height text-center">
  <div class="block-xs-bottom">
    <div class="container-fluid">
     <blockquote class="pull-quote">
        <p>
          “Started at the bottom… etc”
        </p>
        <cite>Drake, OVO</cite>
      </blockquote>
    </div>
  </div>
</div>

Text ribbons

Create culti-line, inline ribbons on your text. Useful for breaking up content and adding strong visual flourishes.

Gucci Flip flops

Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.

Gucci Flip flops

Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.

Gucci Flip flops

Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.

Gucci Flip flops

Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.

Gucci Flip flops

Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. 

<h2 class="mt-0">
  <strong class="text-ribbon text-ribbon-primary">
    <span>Gucci Flip flops</span>
  </strong>
</h2>
<p class="mt-4">
  <span class="text-ribbon text-ribbon-primary">
    <span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.</span>
  </span>
</p>

<h2 class="mt-5">
  <strong class="text-ribbon text-ribbon-success">
    <span>Gucci Flip flops</span>
  </strong>
</h2>
<p class="mt-4">
  <span class="text-ribbon text-ribbon-success">
    <span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.</span>
  </span>
</p>

<h2 class="mt-5">
  <strong class="text-ribbon text-ribbon-info">
    <span>Gucci Flip flops</span>
  </strong>
</h2>
<p class="mt-4">
  <span class="text-ribbon text-ribbon-info">
    <span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.</span>
  </span>
</p>

<h2 class="mt-5">
  <strong class="text-ribbon text-ribbon-warning">
    <span>Gucci Flip flops</span>
  </strong>
</h2>
<p class="mt-4">
  <span class="text-ribbon text-ribbon-warning">
    <span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.</span>
  </span>
</p>

<h2 class="mt-5">
  <strong class="text-ribbon text-ribbon-danger">
    <span>Gucci Flip flops</span>
  </strong>
</h2>
<p class="mt-4">
  <span class="text-ribbon text-ribbon-danger">
    <span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.</span>
  </span>
</p>

Transparent navbar

Use the new .navbar-transparent variation for placing navbars over backgrounds and interactive content.

<div class="py-5 px-1" style="background: url(../assets/img/kanye.jpg) top center; background-size: cover">


  <nav class="navbar navbar-transparent navbar-padded navbar-expand-sm">
    <a class="navbar-brand" href="#">
      <h4 class="text-uppercase my-0">Project Name</h4>
    </a>

    <button
      class="navbar-toggler navbar-toggler-right d-md-none"
      type="button"
      data-toggle="collapse"
      data-target="#navbarResponsive"
      aria-controls="navbarResponsive"
      aria-expanded="false"
      aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="nav navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div><!--/.nav-collapse -->
  </nav>

</div>

The bordered nav builds on Bootstrap’s .nav base styles with a new, bolder variation to nav links.

<ul class="nav nav-bordered">
  <li class="nav-item">
    <a class="nav-link active" href="#">Bold</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Minimal</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Components</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Docs</a>
  </li>
</ul>

Bordered nav links can also be stacked:

<ul class="nav nav-bordered nav-stacked flex-column">
  <li class="nav-header">Examples</li>
  <li class="nav-item">
    <a class="nav-link active" href="#">Bold</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Minimal</a>
  </li>
  
  <li class="nav-header">Sections</li>

  <li class="nav-item">
    <a class="nav-link" href="#">Grid</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Pricing</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">About</a>
  </li>
</ul>

The light carousel is a modified version of Bootstrap’s default carousel, using lighter styles on all carousel controls.

<div id="carousel-example-generic-2" class="carousel carousel-light slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic-2" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic-2" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic-2" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="https://placehold.it/1140x500/fff/333" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="https://placehold.it/1140x500/fff/333" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="https://placehold.it/1140x500/fff/333" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carousel-example-generic-2" role="button" data-slide="prev">
    <span class="icon icon-chevron-thin-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carousel-example-generic-2" role="button" data-slide="next">
    <span class="icon icon-chevron-thin-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Callouts

Use callouts to quickly draw attention to specific actions with an extended explanation.

Explore this thing. Learn more about this thing. 
<div class="callout">
  <div class="callout-content">
    <strong>Explore this thing.</strong> Learn more about this thing.
  </div>

  <div class="callout-secondary">
    <button class="btn btn-primary">Get started</button>
  </div>
</div>

Featured lists are common marketing components used for associating visual icons with a list of topics.

  • Save things

    Use dropbox to save things in the "cloud" because throwing things away is stressful and this way you don't have to.

  • Fork things

    Use github to share things on the internet then change them. Make things better. Free software? But not as in beer.

  • Write things

    Use Medium to write things down and sound smart. Also when you write, your writings looks pretty and that is cool.

  • Tweet things

    Use twitter to share 140 characters worth of anything you want. Pictures, videos, etc. It doesn't really matter. 

<div class="container-fluid">
  <div class="row my-4">
    <div class="col-sm-6">
      <ul class="featured-list featured-list-bordered">
        <li class="mb-5">
          <div class="featured-list-icon">
            <span class="icon icon-dropbox"></span>
          </div>

          <h3>Save things</h3>
          <p>
            Use dropbox to save things in the "cloud" because throwing things away is stressful and this way you don't have to.
          </p>
        </li>

        <li>
          <div class="featured-list-icon">
            <span class="icon icon-github"></span>
          </div>
          <h3>Fork things</h3>
          <p>
            Use github to share things on the internet then change them. Make things better. Free software? But not as in beer.
          </p>
        </li>
      </ul>
    </div>
    <div class="col-sm-6">
      <ul class="featured-list featured-list-bordered">
        <li class="mb-5">
          <div class="featured-list-icon">
            <span class="icon icon-medium"></span>
          </div>

          <h3>Write things</h3>
          <p>
            Use Medium to write things down and sound smart. Also when you write, your writings looks pretty and that is cool.
          </p>
        </li>

        <li>
          <div class="featured-list-icon">
            <span class="icon icon-twitter"></span>
          </div>
          <h3>Tweet things</h3>
          <p>
            Use twitter to share 140 characters worth of anything you want. Pictures, videos, etc. It doesn't really matter.
          </p>
        </li>
      </ul>
    </div>
  </div>
</div>

Pull Quotes

Transform normal blockquotes into stylized pull quotes.

“They need to stop sleeping on me and get some understanding about this here game I spit!”

Mark Otto, Huge Nerd 
<blockquote class="pull-quote">
  <img class="rounded-circle" src="../assets/img/avatar-mdo.png">
  <p>
    “They need to stop sleeping on me and get some understanding about this here game I spit!”
  </p>
  <cite>Mark Otto, Huge Nerd</cite>
</blockquote>

Icon list

Use an icon list to place custom icons next to a list of items.

  • Single
  • Taken
  • Pokémon Master 
<ul class="iconlist">
  <li>
    <span class="icon icon-check"></span>
    Single
  </li>
  <li>
    <span class="icon icon-check"></span>
    Taken
  </li>
  <li class="active">
    <span class="icon icon-check"></span>
    Pokémon Master
  </li>
</ul>

Stat cards

Use stat cards to easily display large numbers, great for any kind of simple metrics and dashboard content.

12,938

Page views

758

Downloads

1,293

Sign-ups 
<div class="statcard p-3">
  <h3 class="statcard-number">12,938</h3>
  <span class="statcard-desc">Page views</span>
</div>
<div class="statcard p-3 text-xs-center">
  <h3 class="statcard-number">758</h3>
  <span class="statcard-desc">Downloads</span>
</div>
<div class="statcard p-3 text-xs-right">
  <h3 class="statcard-number">1,293</h3>
  <span class="statcard-desc">Sign-ups</span>
</div>

With optional carets:

12,938 5%

Page views

758 1.3%

Downloads 
<div class="statcard p-3">
  <h3 class="statcard-number">
    12,938
    <small class="delta-indicator delta-positive">5%</small>
  </h3>
  <span class="statcard-desc">Page views</span>
</div>
<div class="statcard p-3">
  <h3 class="statcard-number">
    758
    <small class="delta-indicator delta-negative">1.3%</small>
  </h3>
  <span class="statcard-desc">Downloads</span>
</div>

With background variations:

12,938 5%

Page views

758 1.3%

Downloads

758 1.3%

Downloads

1,293 6.75%

Sign-ups

1,293 6.75%

Sign-ups 
<div class="statcard statcard-primary p-4 mb-2">
  <h3 class="statcard-number">
    12,938
    <small class="delta-indicator delta-positive">5%</small>
  </h3>
  <span class="statcard-desc">Page views</span>
</div>
<div class="statcard statcard-success p-4 mb-2">
  <h3 class="statcard-number">
    758
    <small class="delta-indicator delta-negative">1.3%</small>
  </h3>
  <span class="statcard-desc">Downloads</span>
</div>
<div class="statcard statcard-info p-4 mb-2">
  <h3 class="statcard-number">
    758
    <small class="delta-indicator delta-negative">1.3%</small>
  </h3>
  <span class="statcard-desc">Downloads</span>
</div>
<div class="statcard statcard-danger p-4 mb-2">
  <h3 class="statcard-number">
    1,293
    <small class="delta-indicator delta-positive">6.75%</small>
  </h3>
  <span class="statcard-desc">Sign-ups</span>
</div>
<div class="statcard statcard-warning p-4 mb-2">
  <h3 class="statcard-number">
    1,293
    <small class="delta-indicator delta-positive">6.75%</small>
  </h3>
  <span class="statcard-desc">Sign-ups</span>
</div>

And use the grid system to size and align them:

12,938 5%

Page views

758 1.3%

Downloads 
<div class="row">
  <div class="col-sm-6">
    <div class="statcard statcard-primary p-4">
      <h3 class="statcard-number">
        12,938
        <small class="delta-indicator delta-positive">5%</small>
      </h3>
      <span class="statcard-desc">Page views</span>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="statcard statcard-success p-4">
      <h3 class="statcard-number">
        758
        <small class="delta-indicator delta-negative">1.3%</small>
      </h3>
      <span class="statcard-desc">Downloads</span>
    </div>
  </div>
</div>

Plugins

Zoom

The zoom plugin provides simple image zoom functionality. Add a data-action="zoom" attribute to any image you want to make zoomable. Zoomed images can be closed by scroll, esc, or click. Use the meta key to open raw element in new tab.

Data API

<img data-action="zoom" style="width: 150px;" src="../assets/img/avatar-mdo.png">

Enter

Enter is a brand new plugin built to transition elements into view on scroll and offer subtle visual flourishes. Simply add a data-transition="entrance" attribute and a transform style to any element that you’d like to enter in when a user scrolls the element into view.

Options

JavaScript API

$('.js-enter').enter()

Data API

Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. 

<div style="overflow: hidden">
  <div data-transition="entrance" style="transform: translateY(50px)">
    <p>
      Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    </p>
    <p>
      Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
    </p>
  </div>
</div>

Image grids

Use the image grid plugin to quickly layout multi sized images in a grid. For the image grid to work properly, it needs to get the raw image sizes (either from a data attribute, like data-width and data-height or you need to wait for image load before calling .imageGrid).

Options

JavaScript API

$('.myGrid').imageGrid() 
$('.myGrid').imageGrid()

Data Api

<div data-grid="images">
  <img data-width="350" data-height="300" src="https://placehold.it/350x300/EEE04A/ffffff">
  <img data-width="420" data-height="320" src="https://placehold.it/420x320/5cb85c/ffffff">
  <img data-width="320" data-height="380" src="https://placehold.it/320x380/5bc0de/ffffff">
  <img data-width="472" data-height="500" src="https://placehold.it/472x500/f0ad4e/ffffff">
  <img data-width="540" data-height="360" src="https://placehold.it/540x360/FF3167/ffffff">
</div>

Stage

Use the stage plugin to reveal a hidden “shelf” of content, like some common offscreen navigation. Stage will slide in your hidden content—from the left (default) or right—and shift your page contents.

Add data-toggle="stage" and a data-target to any clickable element that you want to trigger a stage transition. When sliding in from the right, use a negative distance like data-distance="-250".

Options

Customizing

Stage shelves—the hidden content areas—can house just about any content, but you’ll likely have to tweak some styles depending on what you place within them.

Be sure to match any data-distance values with the CSS-based width on the .stage-shelf.

Example

For an interactive demo, refer to the Menu button at the top of this page. The example below shows the minimal required markup.

<div class="stage">
  <button class="btn btn-link stage-toggle" data-target=".stage" data-toggle="stage">
    <span class="icon icon-menu"></span>
    Menu
  </button>

  <div class="stage-shelf">
    <!-- Hidden shelf content -->
  </div>

  <!-- All other page content -->
</div>

For a right-aligned stage shelf and button, the minimal required markup looks like this:

<div class="stage">
  <button class="btn btn-link stage-toggle stage-toggle-right" data-target=".stage" data-toggle="stage" data-distance="-250">
    <span class="icon icon-menu"></span>
    Menu
  </button>

  <div class="stage-shelf stage-shelf-right">
    <!-- Hidden shelf content -->
  </div>

  <!-- All other page content -->
</div>