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>

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>

Avatar list

Join a series of icons into a single horizontal grouping.

<ul class="avatar-list">
  <li class="avatar-list-item">
    <img class="rounded-circle" src="../assets/img/avatar-dhg.png">
  </li>
  <li class="avatar-list-item">
    <img class="rounded-circle" src="../assets/img/avatar-mdo.png">
  </li>
  <li class="avatar-list-item">
    <img class="rounded-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="rounded-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 justify-content-center">
      <li class="nav-item">
        <a class="nav-link active" href="#">Photos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Others</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Anothers</a>
      </li>
    </ul>
  </nav>
</div>

Card profile

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

Jacob Thornton

Big belly rude boy, million dollar hustler. Unemployed.

Mark Otto

GitHub and Bootstrap. Formerly at Twitter. Huge nerd.

<div class="mt-2">
  <div class="row">
    <div class="col-lg-6">
      <div class="card card-profile">
        <div class="card-header" 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="card-body text-xs-center">
          <img class="card-profile-img" src="../assets/img/avatar-fat.jpg">
          <h5 class="card-title">Jacob Thornton</h5>
          <p class="mb-4">Big belly rude boy, million dollar hustler. Unemployed.</p>
          <button class="btn btn-outline-primary btn-sm">
            <span class="icon icon-add-user"></span> Follow
          </button>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="card card-profile">
        <div class="card-header" 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="card-body text-xs-center">
          <img class="card-profile-img" src="../assets/img/avatar-mdo.png">
          <h5 class="card-title">Mark Otto</h5>
          <p class="mb-4">GitHub and Bootstrap. Formerly at Twitter. Huge nerd.</p>
          <button class="btn btn-outline-primary btn-sm">
            <span class="icon icon-add-user"></span> Follow
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Simple card modifier for link lists.

© 2018 Bootstrap About Help Terms Privacy Cookies Ads Info Brand Blog Status Apps Jobs Advertise 
<div class="card card-link-list">
  <div class="card-body">
    © 2018 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 mb-3">
  <li class="media list-group-item p-4">
    <img class="media-object mr-3 align-self-start" src="../assets/img/avatar-mdo.png">
    <div class="media-body">
      <div class="media-heading">
        <small class="float-right text-muted">34 min</small>
        <h6>Mark Otto</h6>
      </div>
      <p>
        Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum.
      </p>
      <img class="media-body-inline-img" src="../assets/img/instagram_17.jpg">
      <ul class="media-list">
        <li class="media">
          <img class="media-object mr-3 align-self-start" src="../assets/img/avatar-dhg.png">
          <div class="media-body">
            <strong>Dave Gamache: </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 mt-3">
          <img class="media-object mr-3 align-self-start" src="../assets/img/avatar-fat.jpg">
          <div class="media-body">
            <strong>Jacob 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>
      </ul>
    </div>
  </li>
</ul>

Media list conversation

<ul class="media-list media-list-conversation c-w-md">
  <li class="media media-current-user mb-4">
    <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>
    <img class="rounded-circle media-object ml-3" src="../assets/img/avatar-dhg.png">
  </li>
  <li class="media mb-4">
    <img class="rounded-circle media-object mr-3" src="../assets/img/avatar-fat.jpg">
    <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 w-100">
      <img class="media-object rounded-circle mr-3" src="../assets/img/avatar-fat.jpg">
      <div class="media-body align-self-center">
        <button class="btn btn-outline-primary btn-sm float-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 w-100">
      <img class="media-object rounded-circle mr-3" src="../assets/img/avatar-dhg.png">
      <div class="media-body align-self-center">
        <button class="btn btn-outline-primary btn-sm float-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 w-100">
      <img class="media-object rounded-circle mr-3" src="../assets/img/avatar-mdo.png">
      <div class="media-body align-self-center">
        <button class="btn btn-outline-primary btn-sm float-right">
          <span class="icon icon-add-user"></span> Follow
        </button>
        <strong>Mark Otto</strong>
        <small>@mdo - San Francisco</small>
      </div>
    </div>
  </li>
</ul>

Custom Modals

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

Medium Modal

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.

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.

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.

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

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.

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.

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.

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.

<div class="modal">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Medium Modal</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </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.

Small modal

Modal body text...

<div class="modal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Small modal</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </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">
          <strong>Continue</strong>
        </button>
        <button type="button" class="btn-link modal-action" data-dismiss="modal">Cancel</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="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>

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