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/
  ├── gulpfile.js
  ├── package.json
  ├── README.md
  ├── docs/
  ├── less/
  │   ├── bootstrap/
  │   ├── custom/
  │   ├── variables.less
  │   └── toolkit.less
  ├── 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

Viewing your Bootstrap Theme documentation is now dead simple-simply find the docs directory and open index.html in your favorate 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 less/, js/, and fonts/ directories contain the source code for our CSS, JS, and icon fonts (respectively). Within the less/ 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>

Utilities

Utilities, or utility classes, are a series of single-purpose, immutable classes designed to reduce duplication in your compiled CSS. Each utility takes a common CSS property-value pair and turns it into a reusable class.

These utilities are in addition to those provided in Bootstrap.

Positioning

.pos-r { position: relative !important; }
.pos-a { position: absolute !important; }
.pos-f { position: fixed !important; }

Width

.w-sm   { width: 25% !important; }
.w-md   { width: 50% !important; }
.w-lg   { width: 75% !important; }
.w-full { width: 100% !important; }

Margin and padding

Assign margin or padding to an element or a subset of it’s sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, 20px.

.m-a-0 { margin:        0 !important; }
.m-t-0 { margin-top:    0 !important; }
.m-r-0 { margin-right:  0 !important; }
.m-b-0 { margin-bottom: 0 !important; }
.m-l-0 { margin-left:   0 !important; }

.m-a { margin:        @spacer !important; }
.m-t { margin-top:    @spacer-y !important; }
.m-r { margin-right:  @spacer-x !important; }
.m-b { margin-bottom: @spacer-y !important; }
.m-l { margin-left:   @spacer-x !important; }
.m-x { margin-right:  @spacer-x !important; margin-left: @spacer-x !important; }
.m-y { margin-top:    @spacer-y !important; margin-bottom: @spacer-y !important; }
.m-x-auto { margin-right: auto !important; margin-left: auto !important; }

.m-a-md { margin:        (@spacer-y * 1.5) !important; }
.m-t-md { margin-top:    (@spacer-y * 1.5) !important; }
.m-r-md { margin-right:  (@spacer-y * 1.5) !important; }
.m-b-md { margin-bottom: (@spacer-y * 1.5) !important; }
.m-l-md { margin-left:   (@spacer-y * 1.5) !important; }
.m-x-md { margin-right:  (@spacer-x * 1.5) !important; margin-left:   (@spacer-x * 1.5) !important; }
.m-y-md { margin-top:    (@spacer-y * 1.5) !important; margin-bottom: (@spacer-y * 1.5) !important; }

.m-a-lg { margin:        (@spacer-y * 3) !important; }
.m-t-lg { margin-top:    (@spacer-y * 3) !important; }
.m-r-lg { margin-right:  (@spacer-y * 3) !important; }
.m-b-lg { margin-bottom: (@spacer-y * 3) !important; }
.m-l-lg { margin-left:   (@spacer-y * 3) !important; }
.m-x-lg { margin-right:  (@spacer-x * 3) !important; margin-left:   (@spacer-x * 3) !important; }
.m-y-lg { margin-top:    (@spacer-y * 3) !important; margin-bottom: (@spacer-y * 3) !important; }
.p-a-0 { padding:        0 !important; }
.p-t-0 { padding-top:    0 !important; }
.p-r-0 { padding-right:  0 !important; }
.p-b-0 { padding-bottom: 0 !important; }
.p-l-0 { padding-left:   0 !important; }

.p-a { padding:        @spacer !important; }
.p-t { padding-top:    @spacer-y !important; }
.p-r { padding-right:  @spacer-x !important; }
.p-b { padding-bottom: @spacer-y !important; }
.p-l { padding-left:   @spacer-x !important; }
.p-x { padding-right:  @spacer-x !important; padding-left:   @spacer-x !important; }
.p-y { padding-top:    @spacer-y !important; padding-bottom: @spacer-y !important; }

.p-a-md { padding:        (@spacer-y * 1.5) !important; }
.p-t-md { padding-top:    (@spacer-y * 1.5) !important; }
.p-r-md { padding-right:  (@spacer-y * 1.5) !important; }
.p-b-md { padding-bottom: (@spacer-y * 1.5) !important; }
.p-l-md { padding-left:   (@spacer-y * 1.5) !important; }
.p-x-md { padding-right:  (@spacer-x * 1.5) !important; padding-left:   (@spacer-x * 1.5) !important; }
.p-y-md { padding-top:    (@spacer-y * 1.5) !important; padding-bottom: (@spacer-y * 1.5) !important; }

.p-a-lg { padding:        (@spacer-y * 3) !important; }
.p-t-lg { padding-top:    (@spacer-y * 3) !important; }
.p-r-lg { padding-right:  (@spacer-y * 3) !important; }
.p-b-lg { padding-bottom: (@spacer-y * 3) !important; }
.p-l-lg { padding-left:   (@spacer-y * 3) !important; }
.p-x-lg { padding-right:  (@spacer-x * 3) !important; padding-left:   (@spacer-x * 3) !important; }
.p-y-lg { padding-top:    (@spacer-y * 3) !important; padding-bottom: (@spacer-y * 3) !important; }

Responsive text alignment

Use these classes to easily switch text-align across viewports when designing responsive pages.

.text-xs-left   { text-align: left; }
.text-xs-right  { text-align: right; }
.text-xs-center { text-align: center; }

@media (min-width: @screen-sm-min) {
  .text-sm-left   { text-align: left; }
  .text-sm-right  { text-align: right; }
  .text-sm-center { text-align: center; }
}

@media (min-width: @screen-md-min) {
  .text-md-left   { text-align: left; }
  .text-md-right  { text-align: right; }
  .text-md-center { text-align: center; }
}

@media (min-width: @screen-lg-min) {
  .text-lg-left   { text-align: left; }
  .text-lg-right  { text-align: right; }
  .text-lg-center { text-align: center; }
}

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-default-outline" 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="active">
    <a href="#">
      <span class="icon icon-chat"></span>
      Discussions
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon icon-bell"></span>
      Notifications
    </a>
  </li>
  <li>
    <a href="#">
      <span class="icon icon-users"></span>
      Members
    </a>
  </li>
</ul>

Outline buttons

Replace the provided button variant classes like .btn-primary with .btn-primary-outline to switch from the solid gradient backgrounds buttons to outline ones.

<button type="button" class="btn btn-lg btn-default-outline">Default</button>
<button type="button" class="btn btn-lg btn-primary-outline">Primary</button>
<button type="button" class="btn btn-lg btn-success-outline">Success</button>
<button type="button" class="btn btn-lg btn-info-outline">Info</button>
<button type="button" class="btn btn-lg btn-warning-outline">Warning</button>
<button type="button" class="btn btn-lg btn-danger-outline">Danger</button>
<button type="button" class="btn btn-default-outline">Default</button>
<button type="button" class="btn btn-primary-outline">Primary</button>
<button type="button" class="btn btn-success-outline">Success</button>
<button type="button" class="btn btn-info-outline">Info</button>
<button type="button" class="btn btn-warning-outline">Warning</button>
<button type="button" class="btn btn-danger-outline">Danger</button>
<button type="button" class="btn btn-sm btn-default-outline">Default</button>
<button type="button" class="btn btn-sm btn-primary-outline">Primary</button>
<button type="button" class="btn btn-sm btn-success-outline">Success</button>
<button type="button" class="btn btn-sm btn-info-outline">Info</button>
<button type="button" class="btn btn-sm btn-warning-outline">Warning</button>
<button type="button" class="btn btn-sm btn-danger-outline">Danger</button>
<button type="button" class="btn btn-xs btn-default-outline">Default</button>
<button type="button" class="btn btn-xs btn-primary-outline">Primary</button>
<button type="button" class="btn btn-xs btn-success-outline">Success</button>
<button type="button" class="btn btn-xs btn-info-outline">Info</button>
<button type="button" class="btn btn-xs btn-warning-outline">Warning</button>
<button type="button" class="btn btn-xs btn-danger-outline">Danger</button>

Pill buttons

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

<button type="button" class="btn btn-lg btn-pill btn-default">Default</button>
<button type="button" class="btn btn-lg btn-pill btn-primary">Primary</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-default">Default</button>
<button type="button" class="btn btn-pill btn-primary">Primary</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-default">Default</button>
<button type="button" class="btn btn-sm btn-pill btn-primary">Primary</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-default">Default</button>
<button type="button" class="btn btn-xs btn-pill btn-primary">Primary</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>

Avatar list

Join a series of icons into a single horizontal grouping.

<ul class="avatar-list">
  <li class="avatar-list-item">
    <img class="img-circle" src="../assets/img/avatar-dhg.png">
  </li>
  <li class="avatar-list-item">
    <img class="img-circle" src="../assets/img/avatar-mdo.png">
  </li>
  <li class="avatar-list-item">
    <img class="img-circle" src="../assets/img/avatar-fat.jpg">
  </li>
</ul>

Growl

Use the Growl plugin to turn any Bootstrap alert into an OS X style notification. Growls are fixed to the top right of your viewport and can be dismissed, just like normal Bootstrap alerts.

<div class="growl growl-static">
  <div class="alert alert-dark alert-dismissable" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">×</span>
    </button>
    <strong>Well done!</strong> You successfully read this important alert message.
  </div>
</div>

Profile header

Simple profile headers to show off a user’s profile information

Dave Gamache

I wish i was a little bit taller, wish i was a baller, wish i had a girl… also.

<div class="profile-header text-center" style="background-image: url(../assets/img/iceland.jpg); ">
  <div class="container-fluid">
    <div class="container-inner">
      <img class="img-circle media-object" src="../assets/img/avatar-dhg.png">
      <h3 class="profile-header-user">Dave Gamache</h3>
      <p class="profile-header-bio">I wish i was a little bit taller, wish i was a baller, wish i had a girl… also.</p>
    </div>
  </div>
  <nav class="profile-header-nav">
    <ul class="nav nav-tabs">
      <li class="active"><a href="#">Photos</a></li>
      <li><a href="#">Others</a></li>
      <li><a href="#">Anothers</a></li>
    </ul>
  </nav>
</div>

Panel profile

Feature a user’s profile with the .panel-profile variant.

Jacob Thornton

Big belly rude boy, million dollar hustler. Unemployed.

Mark Otto

GitHub and Bootstrap. Formerly at Twitter. Huge nerd.

<div class="m-t">
  <div class="row">
    <div class="col-md-6">
      <div class="panel panel-default panel-profile">
        <div class="panel-heading" style="background-image: url(https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xfa1/t51.2885-15/11312291_348657648678007_1202941362_n.jpg);"></div>
        <div class="panel-body text-center">
          <img class="panel-profile-img" src="../assets/img/avatar-fat.jpg">
          <h5 class="panel-title">Jacob Thornton</h5>
          <p class="m-b-md">Big belly rude boy, million dollar hustler. Unemployed.</p>
          <button class="btn btn-primary-outline btn-sm">
            <span class="icon icon-add-user"></span> Follow
          </button>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="panel panel-default panel-profile">
        <div class="panel-heading" style="background-image: url(https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/11240760_365538423656311_112029877_n.jpg);"></div>
        <div class="panel-body text-center">
          <img class="panel-profile-img" src="../assets/img/avatar-mdo.png">
          <h5 class="panel-title">Mark Otto</h5>
          <p class="m-b-md">GitHub and Bootstrap. Formerly at Twitter. Huge nerd.</p>
          <button class="btn btn-primary-outline btn-sm">
            <span class="icon icon-add-user"></span> Follow
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Simple panel modifier for link lists.

<div class="panel panel-default panel-link-list">
  <div class="panel-body">
    © 2015 Bootstrap

    <a href="#">About</a>
    <a href="#">Help</a>
    <a href="#">Terms</a>
    <a href="#">Privacy</a>
    <a href="#">Cookies</a>
    <a href="#">Ads </a>

    <a href="#">info</a>
    <a href="#">Brand</a>
    <a href="#">Blog</a>
    <a href="#">Status</a>
    <a href="#">Apps</a>
    <a href="#">Jobs</a>
    <a href="#">Advertise</a>
  </div>
</div>

Media list steam

<ul class="media-list media-list-stream c-w-md">
  <li class="media p-a">
    <a class="media-left" href="#">
      <img class="media-object img-circle" src="../assets/img/avatar-dhg.png">
    </a>
    <div class="media-body">
      <div class="media-heading">
        <small class="pull-right">4 min</small>
        <h5 class="m-b-0">Dave Gamache</h5>
      </div>
      <p>
        Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      </p>
      <img class="media-body-inline-img" src="../assets/img/instagram_17.jpg">
      <ul class="media-list m-b">
        <li class="media">
          <a class="media-left" href="#">
            <img class="media-object img-circle" src="../assets/img/avatar-fat.jpg">
          </a>
          <div class="media-body">
            <strong>Jacon Thornton:</strong>
            Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
          </div>
        </li>
        <li class="media">
          <a class="media-left" href="#">
            <img class="media-object img-circle" src="../assets/img/avatar-mdo.png">
          </a>
          <div class="media-body">
            <strong>Mark Otto:</strong>
            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.
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>

Media list conversation

<ul class="media-list media-list-conversation c-w-md">
  <li class="media media-current-user m-b-md">
    <div class="media-body">
      <div class="media-body-text">
        Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis.
      </div>
      <div class="media-footer">
        <small class="text-muted">
          <a href="#">Dave Gamache</a> at 4:20PM
        </small>
      </div>
    </div>
    <a class="media-right" href="#">
      <img class="img-circle media-object" src="../assets/img/avatar-dhg.png">
    </a>
  </li>
  <li class="media m-b-md">
    <a class="media-left" href="#">
      <img class="img-circle media-object" src="../assets/img/avatar-fat.jpg">
    </a>
    <div class="media-body">
      <div class="media-body-text">
       Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
      </div>
      <div class="media-body-text">
       Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
      </div>
      <div class="media-body-text">
       Cras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.
      </div>
      <div class="media-footer">
        <small class="text-muted">
          <a href="#">Fat</a> at 4:28PM
        </small>
      </div>
    </div>
  </li>
</ul>

Media list users

<ul class="media-list media-list-users list-group">
  <li class="list-group-item">
    <div class="media">
      <a class="media-left" href="#">
        <img class="media-object img-circle" src="../assets/img/avatar-fat.jpg">
      </a>
      <div class="media-body">
        <button class="btn btn-primary-outline btn-sm pull-right">
          <span class="icon icon-add-user"></span> Follow
        </button>
        <strong>Jacob Thornton</strong>
        <small>@fat - San Francisco</small>
      </div>
    </div>
  </li>
  <li class="list-group-item">
    <div class="media">
      <a class="media-left" href="#">
        <img class="media-object img-circle" src="../assets/img/avatar-dhg.png">
      </a>
      <div class="media-body">
        <button class="btn btn-primary-outline btn-sm pull-right">
          <span class="icon icon-add-user"></span> Follow
        </button>
        <strong>Dave Gamache</strong>
        <small>@dhg - Palo Alto</small>
      </div>
    </div>
  </li>
  <li class="list-group-item">
    <div class="media">
      <a class="media-left" href="#">
        <img class="media-object img-circle" src="../assets/img/avatar-mdo.png">
      </a>
      <div class="media-body">
        <button class="btn btn-primary-outline btn-sm pull-right">
          <span class="icon icon-add-user"></span> Follow
        </button>
        <strong>Mark Otto</strong>
        <small>@mdo - San Francisco</small>
      </div>
    </div>
  </li>
</ul>

Custom form controls

Custom select menus can be easily created for browsers that support the styles.

<select class="custom-select">
  <option>Default</option>
  <option>First option</option>
  <option>Another option</option>
  <option>Alternative</option>
  <option>Last one</option>
</select>

<select class="custom-select custom-select-sm">
  <option>Default</option>
  <option>First option</option>
  <option>Another option</option>
  <option>Alternative</option>
  <option>Last one</option>
</select>

Custom selects support the disabled attribute as well.

<select class="custom-select" disabled>
  <option>Default</option>
  <option>First option</option>
  <option>Another option</option>
  <option>Alternative</option>
  <option>Last one</option>
</select>

<select class="custom-select custom-select-sm" disabled>
  <option>Default</option>
  <option>First option</option>
  <option>Another option</option>
  <option>Alternative</option>
  <option>Last one</option>
</select>

Custom checkboxes and radios are built on the default Bootstrap checkboxes and radios. Add a couple extra classes and the indicator and you should be all set.

<div class="checkbox custom-control custom-checkbox">
  <label>
    <input type="checkbox">
    <span class="custom-control-indicator"></span>
    Check this custom checkbox
  </label>
</div>
<div class="checkbox custom-control custom-checkbox">
  <label>
    <input type="checkbox" checked>
    <span class="custom-control-indicator"></span>
    This custom checkbox is checked
  </label>
</div>
<div class="checkbox custom-control custom-checkbox">
  <label>
    <input type="checkbox" disabled>
    <span class="custom-control-indicator"></span>
    This custom checkbox is disabled
  </label>
</div>

They can be done inline, too.

<div class="checkbox-inline custom-control custom-checkbox">
  <label>
    <input type="checkbox">
    <span class="custom-control-indicator"></span>
    Check this custom checkbox
  </label>
</div>
<div class="checkbox-inline custom-control custom-checkbox">
  <label>
    <input type="checkbox" checked>
    <span class="custom-control-indicator"></span>
    This custom checkbox is checked
  </label>
</div>

Same goes with radio inputs.

<div class="radio custom-control custom-radio">
  <label>
    <input type="radio" id="radio1" name="radio">
    <span class="custom-control-indicator"></span>
    Toggle this custom radio
  </label>
</div>
<div class="radio custom-control custom-radio">
  <label>
    <input type="radio" id="radio2" name="radio">
    <span class="custom-control-indicator"></span>
    Or toggle this other custom radio
  </label>
</div>

And they can also be inline.

<div class="radio-inline custom-control custom-radio">
  <label>
    <input type="radio" id="radio1" name="radio">
    <span class="custom-control-indicator"></span>
    Toggle this custom radio
  </label>
</div>
<div class="radio-inline custom-control custom-radio">
  <label>
    <input type="radio" id="radio2" name="radio">
    <span class="custom-control-indicator"></span>
    Or toggle this other custom radio
  </label>
</div>

Custom Modals

Support for multiple, stackable modal bodies and scrolling bodies using the new .modal-body-scroller modifier.

<div class="modal">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Medium Modal</h4>
      </div>
      <div class="modal-body modal-body-scroller">
        <p>Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>

        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo.</p>

        <p>Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.</p>

        <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>

        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo.</p>

        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo.</p>

        <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.</p>
      </div>

      <div class="modal-body">
        <input type="text" class="form-control" placeholder="Message">
      </div>
    </div>
  </div>
</div>

Also, drop the regular footer for a new two-up set of actions using the .modal-actions component.

<div class="modal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Small modal</h4>
      </div>
      <div class="modal-body">
        <p>Modal body text...</p>
      </div>
      <div class="modal-actions">
        <button type="button" class="btn-link modal-action" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn-link modal-action" data-dismiss="modal">
          <strong>Continue</strong>
        </button>
      </div>
    </div>
  </div>
</div>

Custom containers

We’ve introduced a new component for vertically aligning content with .container-content-middle and .container-content-bottom. This is particularly useful for sign in and other simple pages.

Vertically centered content.
<div class="container-fill-height">
  <div class="container-content-middle">
    Vertically centered content.
  </div>
</div>

Plugins

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="http://placehold.it/350x300/EEE04A/ffffff">
  <img data-width="420" data-height="320" src="http://placehold.it/420x320/5cb85c/ffffff">
  <img data-width="320" data-height="380" src="http://placehold.it/320x380/5bc0de/ffffff">
  <img data-width="472" data-height="500" src="http://placehold.it/472x500/f0ad4e/ffffff">
  <img data-width="540" data-height="360" src="http://placehold.it/540x360/FF3167/ffffff">
</div>

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">