Introduction

The Gramex UI component library is a set of UI components that extend Bootstrap 4. These are to be used in all Gramex projects.

Quick start

To use it, add this to your gramex.yaml:

import:
  ui:
    path: $GRAMEXAPPS/ui/gramex.yaml    # Import the UI components
    YAMLURL: $YAMLURL/ui/               # ... at this URL

Then include this in your HTML:

<link rel="stylesheet" href="ui/bootstraptheme.css">

<script src="ui/jquery/dist/jquery.min.js"></script>
<script src="ui/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

Custom Bootstrap

ui/bootstraptheme.css is a customized version of Bootstrap with additional features.

Select the Change Theme button on at the top of this page to colors, fonts and style. Then link to the new URL. For example, ?primary=maroon changes the primary color to maroon. (Reset colors.)

There are also additional components and utilities in the library. See the sidebar for a full list.

Custom SASS

You can extend and modify the Gramex UI component library using SASS. This lets you add components, change defaults, and modify the behavior of Bootstrap.

The source for Gramex UI components is at bootstrap-theme.scss.

To serve your own SASS file (e.g. called style.scss) as CSS, use:

url:
  my-css-handler:
    pattern: ...
    handler: FunctionHandler
    kwargs:
      function: gramex.apps.ui.sass(handler, r"$YAMLPATH/style.scss")

This serves style.scss as a CSS file. Here's an example:

/* Define custom variables */
$color: black !default;
/* You can use Tornado templates. URL query parameters are available in `variables` */
$color: {{ variables.get('color', 'black') }};
/* Import UI components from the variable uicomponents_path */
@import "{{ uicomponents_path }}";
/* Or import Bootstrap directly from bootstrap_path */
@import "{{ bootstrap_path }}";
/* Add your custom components here */

Libraries

This app exposes a set of npm libraries under the ui/ directory that you can include in your application.

g1: Gramex UI library

<script src="ui/g1/dist/g1.min.js"></script>

cookie: cookie parser

<script src="ui/cookie_js/cookie.min.js"></script>

d3: low-level chart library

<script src="ui/d3/build/d3.min.js"></script>

daterangepicker: date selector

<link rel="stylesheet" href="ui/daterangepicker/daterangepicker.css">
<script src="ui/daterangepicker/daterangepicker.js"></script>

font-awesome: icons

<link rel="stylesheet" href="ui/font-awesome/css/font-awesome.min.css">

leaflet: map library

<link rel="stylesheet" href="ui/leaflet/dist/leaflet.css">
<script src="ui/leaflet/dist/leaflet.js"></script>

lodash: data processing

<script src="ui/lodash/lodash.min.js"></script>

moment: time processing

<script src="ui/moment/min/moment-with-locales.min.js"></script>

numeral: number formatting

<script src="ui/numeral/min/numeral.min.js"></script>

select2: filters as pills

<link rel="stylesheet" href="ui/select2/dist/css/select2.min.css">
<script src="ui/select2/dist/js/select2.min.js"></script>

bootstrap-select: styled select

<link rel="stylesheet" href="ui/bootstrap-select/dist/css/bootstrap-select.min.css">
<script src="ui/bootstrap-select/dist/js/bootstrap-select.min.js"></script>

shepherd: guided tour

<link rel="stylesheet" href="ui/tether-shepherd/dist/css/shepherd-theme-arrows.css">
<link rel="stylesheet" href="ui/tether-shepherd/dist/css/shepherd-theme-dark.css">
<script src="ui/tether-shepherd/dist/js/tether.js"></script>
<script src="ui/tether-shepherd/dist/js/shepherd.min.js"></script>

topojson: map library

<script src="ui/topojson/dist/topojson.min.js"></script>

morphdom: virtual DOM library

<script src="ui/morphdom/dist/morphdom-umd.min.js"></script>

Dropzone: Drag and Drop AJAX uploads

<link rel="stylesheet" href="ui/dropzone/dist/min/dropzone.min.css">
<script src="ui/dropzone/dist/min/dropzone.min.js"></script>

Utilities

Hover styles

Add .hover-bg-<theme-color> to add a background color on hover. Add .hover-fg-<theme-color> to add a foreground color on hover. Hover over the links below to test them.

.hover-bg-primary .hover-fg-light

.hover-bg-dark .hover-fg-light

.hover-bg-success.hover-fg-light

<div><a href="#na" class="hover-bg-primary hover-fg-light p-1">.hover-bg-primary .hover-fg-light</a></div>
<div><a href="#na" class="hover-bg-dark hover-fg-light p-1">.hover-bg-dark .hover-fg-light</a></div>
<div><a href="#na" class="hover-bg-success hover-fg-light p-1">.hover-bg-success.hover-fg-light</a></div>

.hover-bg-secondary .hover-fg-dark

.hover-bg-warning .hover-fg-dark

.hover-bg-warning .hover-fg-danger

<div><a href="#na" class="hover-bg-secondary hover-fg-dark p-1">.hover-bg-secondary .hover-fg-dark</a></div>
<div><a href="#na" class="hover-bg-warning hover-fg-dark p-1">.hover-bg-warning .hover-fg-dark</a></div>
<div><a href="#na" class="hover-bg-warning hover-fg-danger p-1">.hover-bg-warning .hover-fg-danger</a></div>

Focus styles

Add .focus-bg-<theme-color> to add a background color on focus. Add .focus-fg-<theme-color> to add a foreground color on focus. Click the links below to test them.

.focus-bg-primary .focus-fg-light

.focus-bg-dark .focus-fg-light

.focus-bg-success.focus-fg-light

<div><a href="#na" class="focus-bg-primary focus-fg-light p-1">.focus-bg-primary .focus-fg-light</a></div>
<div><a href="#na" class="focus-bg-dark focus-fg-light p-1">.focus-bg-dark .focus-fg-light</a></div>
<div><a href="#na" class="focus-bg-success focus-fg-light p-1">.focus-bg-success.focus-fg-light</a></div>

.focus-bg-secondary .focus-fg-dark

.focus-bg-warning .focus-fg-dark

.focus-bg-warning .focus-fg-danger

<div><a href="#na" class="focus-bg-secondary focus-fg-dark p-1">.focus-bg-secondary .focus-fg-dark</a></div>
<div><a href="#na" class="focus-bg-warning focus-fg-dark p-1">.focus-bg-warning .focus-fg-dark</a></div>
<div><a href="#na" class="focus-bg-warning focus-fg-danger p-1">.focus-bg-warning .focus-fg-danger</a></div>

Active styles

Add .active-bg-<theme-color> to add a background color on active. Add .active-fg-<theme-color> to add a foreground color on active. Click the links below to test them.

.active-bg-primary .active-fg-light

.active-bg-dark .active-fg-light

.active-bg-success.active-fg-light

<div><a href="#na" class="active-bg-primary active-fg-light p-1">.active-bg-primary .active-fg-light</a></div>
<div><a href="#na" class="active-bg-dark active-fg-light p-1">.active-bg-dark .active-fg-light</a></div>
<div><a href="#na" class="active-bg-success active-fg-light p-1">.active-bg-success.active-fg-light</a></div>

.active-bg-secondary .active-fg-dark

.active-bg-warning .active-fg-dark

.active-bg-warning .active-fg-danger

<div><a href="#na" class="active-bg-secondary active-fg-dark p-1">.active-bg-secondary .active-fg-dark</a></div>
<div><a href="#na" class="active-bg-warning active-fg-dark p-1">.active-bg-warning .active-fg-dark</a></div>
<div><a href="#na" class="active-bg-warning active-fg-danger p-1">.active-bg-warning .active-fg-danger</a></div>

Cursor

The .cursor-pointer class sets the cursor: pointer style. This helps users when you make a non-clickable element clickable (e.g. svg, span). (But prefer the a tag instead.)

.cursor-pointer

<div class="bg-primary text-light p-2 cursor-pointer">.cursor-pointer</div>

The .cursor-default class sets the cursor: default style. This helps when you make clickable elements non-clickable -- e.g. a non-clickable chart inside a card that hyperlinks to another page.

.cursor-default has no cursor .cursor-pointer has a cursor

<div class="bg-primary text-light p-2 cursor-pointer">
  <span class="cursor-default p-1 mr-3 bg-danger">.cursor-default has no cursor</span>
  .cursor-pointer has a cursor
</div>

The .pointer-events-none class sets the pointer-events: none style. For example, this helps make SVG text ignore click events while rectangles respond to the events.

<svg width="500" height="80">
  <rect x="0" y="0" width="500" height="80" fill="yellow" class="cursor-pointer">
    <title>This tooltip is from the rectangle</title>
  </rect>
  <text x="20" y="30">
    Text hijacks mouse events from the rectangle behind
    <title>This tooltip is from the text</title>
  </text>
  <text x="20" y="65" class="pointer-events-none">.pointer-events-none does not hijack click or hover</text>
</svg>

Round

Add the .round class to round the corners of an element.

Round pill Round pill link

<p>
  <button type="button" class="btn btn-primary round">
    <i class="fa fa-plus"></i>
  </button>
  <button type="button" class="btn btn-dark round">
    <i class="fa fa-home"></i> Button
  </button>
  <button type="button" class="btn btn-success round">
    Badge <span class="badge badge-light round">9</span>
  </button>
  <span class="badge badge-pill badge-primary round">Round pill</span>
  <a href="#" class="badge badge-primary round">Round pill link</a>
</p>

Round alert with an alert link.

<p class="alert alert-warning round" role="alert">
  <strong>Round alert</strong> with an <a class="alert-link" href="#">alert link</a>.
</p>
<p>
  <ol class="breadcrumb round">
    <li class="breadcrumb-item"><a href="#">Round</a></li>
    <li class="breadcrumb-item active" aria-current="page">Breadcrumb</li>
  </ol>
</p>
<form>
  <div class="form-group">
    <input type="search" class="form-control round" placeholder="Round form-control">
  </div>
</form>

Round
Pills

<ul class="nav nav-pills mb-3">
  <li class="nav-item">
    <a class="nav-link round active" href="#">Round</a>
  </li>
  <li class="nav-item">
    <a class="nav-link round" href="#">Pills</a>
  </li>
</ul>
<p class="navbar navbar-dark bg-dark round">
  <a class="navbar-brand" href="#">Round Navbar</a>
</p>
<div class="progress round mb-3">
  <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="mb-3">
  <img class="img w-25 bg-primary round" src="hdinsight.png" alt="Sample image">
</div>

Border radius sizes

<div class="row">
  <div class="col">
    <button type="button" class="btn btn-secondary round">.round</button>
    <button type="button" class="btn btn-secondary border-radius-xl">.border-radius-xl</button>
    <button type="button" class="btn btn-secondary border-radius-lg">.border-radius-lg</button>
    <button type="button" class="btn btn-secondary border-radius   ">.border-radius</button>
    <button type="button" class="btn btn-secondary border-radius-sm">.border-radius-sm</button>
    <button type="button" class="btn btn-secondary no-border-radius">.no-border-radius</button>
  </div>
</div>

Ripples

Add the .ripple class to add a ripple to an element.

<div class="mb-3">
  <button type="button" class="btn btn-primary ripple">Button</button>
  <button type="button" class="btn btn-dark ripple">Button</button>
  <button type="button" class="btn btn-success ripple">Button</button>
  <button type="button" class="btn btn-warning ripple">Button</button>
  <button type="button" class="btn btn-danger ripple">Button</button>
  <button type="button" class="btn btn-info ripple">Button</button>
  <button type="button" class="btn btn-success ripple">
    Badge <span class="badge badge-light">9</span>
  </button>
  <div class="dropdown d-inline">
    <button class="btn btn-dark dropdown-toggle ripple" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Ripple dropdown
    </button>
    <div class="dropdown-menu ripple" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
</div>

Ripple
Pills

<form>
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-secondary ripple active">
      <input type="checkbox" checked autocomplete="off"> Ripple
    </label>
    <label class="btn btn-secondary ripple">
      <input type="checkbox" autocomplete="off"> Checkbox 1
    </label>
    <label class="btn btn-secondary ripple">
      <input type="checkbox" autocomplete="off"> Checkbox 2
    </label>
    <label class="btn btn-secondary ripple">
      <input type="checkbox" autocomplete="off" disabled> Checkbox 3
    </label>
  </div>
</form>
<ul class="nav nav-pills mb-3">
  <li class="nav-item">
    <a class="nav-link ripple active" href="#">Ripple</a>
  </li>
  <li class="nav-item">
    <a class="nav-link ripple" href="#">Pills</a>
  </li>
</ul>

Border

Apart from the Bootstrap border classes, you can use .border-2 for a border twice as thick. Similarly, border-top-1, border-right-1, border-bottom-1, border-left-1 add a 1px border on each side.

Border

Border-2

Border-2 dark

Border-2 varied

<div class="row text-center">
  <div class="col"><div class="border">Border</div></div>
  <div class="col"><div class="border border-2">Border-2</div></div>
  <div class="col"><div class="border border-2 border-dark">Border-2 dark</div></div>
  <div class="col"><div class="border border-2 border-primary border-top-1 border-left-0 border-right-0">Border-2 varied</div></div>
</div>

Shadows

Add the .shadow class to add a shadow to an element.

Add the .shadow-none class to remove a shadow from an element.

Shadow pill Shadow pill link

<div class="mb-3">
  <button type="button" class="btn btn-primary shadow">
    <i class="fa fa-plus"></i>
  </button>
  <button type="button" class="btn btn-dark shadow">
    <i class="fa fa-home"></i> Button
  </button>
  <button type="button" class="btn btn-success shadow">
    Badge <span class="badge badge-light shadow">9</span>
  </button>
  <div class="dropdown d-inline">
    <button class="btn btn-outline-light text-dark dropdown-toggle shadow" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Shadow dropdown
    </button>
    <div class="dropdown-menu shadow" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
  <span class="badge badge-pill badge-primary shadow">Shadow pill</span>
  <a href="#" class="badge badge-primary shadow">Shadow pill link</a>
</div>

Shadow alert with an alert link.

<p class="alert alert-warning shadow" role="alert">
  <strong>Shadow alert</strong> with an <a class="alert-link" href="#">alert link</a>.
</p>
<p>
  <ol class="breadcrumb shadow">
    <li class="breadcrumb-item"><a href="#">Shadow</a></li>
    <li class="breadcrumb-item active" aria-current="page">Breadcrumb</li>
  </ol>
</p>

Shadow
Pills

<form>
  <div class="form-group">
    <input type="search" class="form-control shadow" placeholder="Shadow form-control">
  </div>
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-secondary shadow active">
      <input type="checkbox" checked autocomplete="off"> Shadow checkbox
    </label>
    <label class="btn btn-secondary shadow">
      <input type="checkbox" autocomplete="off"> Checkbox 2
    </label>
    <label class="btn btn-secondary shadow">
      <input type="checkbox" autocomplete="off"> Checkbox 3
    </label>
    <label class="btn btn-secondary shadow">
      <input type="checkbox" autocomplete="off" disabled> Checkbox 4
    </label>
  </div>
</form>
<ul class="nav nav-pills mb-3">
  <li class="nav-item">
    <a class="nav-link shadow active" href="#">Shadow</a>
  </li>
  <li class="nav-item">
    <a class="nav-link shadow" href="#">Pills</a>
  </li>
</ul>

<p class="navbar navbar-dark bg-dark shadow">
  <a class="navbar-brand" href="#">Shadow navbar</a>
</p>

Shadow card

Some quick example text to build on the card title and make up the bulk of the card's content.

Shadow list group
List item
List item

<div class="progress shadow mb-3">
  <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="mb-3">
  <img class="img w-25 shadow" src="hdinsight.png" alt="Sample image">
</div>

Text alignment

.text-middle vertically centers text in a block.

H1 text

centered

H2 text

centered

H3 text

centered

H4 text

centered

H5 text

centered

H6 text

centered

<div class="d-flex">
  <div class="text-middle h1 mr-2 p-2 bg-warning"><div>H1 text</div><div>centered</div></div>
  <div class="text-middle h2 mr-2 p-2 bg-warning"><div>H2 text</div><div>centered</div></div>
  <div class="text-middle h3 mr-2 p-2 bg-warning"><div>H3 text</div><div>centered</div></div>
  <div class="text-middle h4 mr-2 p-2 bg-warning"><div>H4 text</div><div>centered</div></div>
  <div class="text-middle h5 mr-2 p-2 bg-warning"><div>H5 text</div><div>centered</div></div>
  <div class="text-middle h6 mr-2 p-2 bg-warning"><div>H6 text</div><div>centered</div></div>
</div>
<!-- htmllint tag-bans="$previous" -->

Text shadow

.text-shadow adds a text shadow to inline text.

.text-shadow .text-shadow-none

<h3 class="text-shadow">.text-shadow <small class="text-shadow-none">.text-shadow-none</small></h3>

Tours

<button class="btn btn-primary tour-start">Start!</button>
<button class="btn btn-default first">First</button>
<button class="btn btn-default second">Second</button>
<button class="btn btn-default third">Last</button>

<script>
  // more: http://github.hubspot.com/shepherd/docs/welcome/
  var tour = new Shepherd.Tour({
    defaults: {
      classes: 'shepherd-theme-dark'
    }
  })

  var buttonActions = [{
      text: 'Back',
      classes: 'shepherd-button-secondary',
      action: tour.back
    }, {
      text: 'Next',
      classes: 'shepherd-button-example-primary',
      action: tour.next
  }, {
      text: 'Exit',
      classes: 'shepherd-button-secondary',
      action: tour.cancel
  }]

  var buttonExitActions = [{
      text: 'Back',
      classes: 'shepherd-button-secondary',
      action: tour.back
    }, {
      text: 'Exit',
      classes: 'shepherd-button-example-primary',
      action: tour.cancel
  }]

  tour.addStep('tour', {
    title: 'Welcome to Dashboard Tour!',
    text: 'Click Next',
    attachTo: '.first top',
    buttons: buttonActions
  })

  tour.addStep('middle', {
    title: '2nd step',
    text: 'Second step, click for final tour step',
    attachTo: '.second top',
    buttons: buttonActions
  })

  tour.addStep('final', {
    title: 'Last step',
    text: 'Exit',
    attachTo: '.third top',
    buttons: buttonExitActions
  })
  $('body').on('click', '.tour-start', function() {
    tour.start()
  })
</script>

Underline

<div class="d-flex">
  <input class="form-control mx-1 underline" placeholder=".underline">
  <input class="form-control mx-1 underline border-primary" placeholder=".underline.border-primary">
  <input class="form-control mx-1 underline border-success" placeholder=".underline.border-success">
  <input class="form-control mx-1 underline border-danger" placeholder=".underline.border-warning">
  <input class="form-control mx-1 underline border-warning" placeholder=".underline.border-warning">
</div>

H3.underline

H4.underline.border-primary

H5.underline.border-danger

<div class="d-flex">
  <h3 class="underline mx-3">H3.underline</h3>
  <h4 class="underline mx-3 border-primary">H4.underline.border-primary</h4>
  <h5 class="underline mx-3 border-danger">H5.underline.border-danger</h5>
</div>

Backgrounds

Background

.bg-no-repeat, .bg-space and .bg-round define the background-repeat behavior.

<div class="             d-inline-block bg-img-sm border"><svg width="160" height="90"></svg></div>
<div class="bg-no-repeat d-inline-block bg-img-sm border"><svg width="160" height="90"></svg></div>
<div class="bg-space     d-inline-block bg-img-sm border"><svg width="160" height="90"></svg></div>
<div class="bg-round     d-inline-block bg-img-sm border"><svg width="160" height="90"></svg></div>

.bg-cover and .bg-contain set the background size.

<div class="bg-cover     d-inline-block bg-img"><svg width="160" height="90"></svg></div>
<div class="bg-contain   d-inline-block bg-img"><svg width="160" height="90"></svg></div>

.bg-fixed controls the scrolling behaviour.

<div class="bg-fixed     d-inline-block bg-img bg-contain"><svg width="270" height="90"></svg></div>
<div class="bg-local     d-inline-block bg-img bg-contain"><svg width="160" height="90"></svg></div>

.bg-center centers the background. Other background positioning classes are available.

<div>
  <div class="bg-tl  d-inline-block bg-img-sm bg-no-repeat border"><svg width="160" height="90"></svg></div>
  <div class="bg-tc  d-inline-block bg-img-sm bg-no-repeat border"><svg width="160" height="90"></svg></div>
  <div class="bg-tr  d-inline-block bg-img-sm bg-no-repeat border"><svg width="160" height="90"></svg></div>
</div>
<div>
  <div class="bg-cl  d-inline-block bg-img-sm bg-no-repeat border"><svg width="160" height="90"></svg></div>
  <div class="bg-cc  d-inline-block bg-img-sm bg-no-repeat border"><svg width="160" height="90"></svg></div>
  <!-- .bg-center is an alias for .bg-cc -->
  <div class="bg-cr  d-inline-block bg-img-sm bg-no-repeat border"><svg width="160" height="90"></svg></div>
</div>
<div>
  <div class="bg-bl  d-inline-block bg-img-sm bg-no-repeat border"><svg width="160" height="90"></svg></div>
  <div class="bg-bc  d-inline-block bg-img-sm bg-no-repeat border"><svg width="160" height="90"></svg></div>
  <div class="bg-br  d-inline-block bg-img-sm bg-no-repeat border"><svg width="160" height="90"></svg></div>
</div>

.bg-parellax keeps the background fixed while the content scrolls. It is the same as .bg-center .bg-no-repeat .bg-fixed .bg-cover

Parellax effect

Scroll the page to view it

<div class="bg-img bg-parellax text-secondary">
  <h1 class="mx-5">Parellax effect</h1>
  <p class="mx-5">Scroll the page to view it</p>
</div>

Gradient

The .gradient-* classes creates darkening gradients in a specified direction.

<div>
  <svg width="80" height="60" class="gradient-tl bg-primary"></svg>
  <svg width="80" height="60" class="gradient-tc bg-primary"></svg>
  <svg width="80" height="60" class="gradient-tr bg-primary"></svg>
</div>
<div>
  <svg class="gradient-cl bg-primary" width="80" height="60"></svg>
  <svg class="            bg-primary" width="80" height="60"></svg>
  <svg class="gradient-cr bg-primary" width="80" height="60"></svg>
</div>
<div>
  <svg class="gradient-bl bg-primary" width="80" height="60"></svg>
  <svg class="gradient-bc bg-primary" width="80" height="60"></svg>
  <svg class="gradient-br bg-primary" width="80" height="60"></svg>
</div>

These gradients can be applied over any background color.

<svg class="gradient-bc bg-primary" width="40" height="40"></svg>
<svg class="gradient-bc bg-success" width="40" height="40"></svg>
<svg class="gradient-bc bg-warning" width="40" height="40"></svg>
<svg class="gradient-bc bg-danger" width="40" height="40"></svg>
<svg class="gradient-bc bg-light" width="40" height="40"></svg>
<svg class="gradient-bc bg-dark" width="40" height="40"></svg>

The .gradient-light modifier creates lightening gradients instead of darkening ones.

<div class="row">
  <svg class="gradient-tl gradient-light bg-primary m-1" width="80" height="60"></svg>
  <svg class="gradient-tc gradient-light bg-primary m-1" width="80" height="60"></svg>
  <svg class="gradient-tr gradient-light bg-primary m-1" width="80" height="60"></svg>
</div>
<div class="row">
  <svg class="gradient-cl gradient-light bg-primary m-1" width="80" height="60"></svg>
  <svg class="            gradient-light bg-primary m-1" width="80" height="60"></svg>
  <svg class="gradient-cr gradient-light bg-primary m-1" width="80" height="60"></svg>
</div>
<div class="row">
  <svg class="gradient-bl gradient-light bg-primary m-1" width="80" height="60"></svg>
  <svg class="gradient-bc gradient-light bg-primary m-1" width="80" height="60"></svg>
  <svg class="gradient-br gradient-light bg-primary m-1" width="80" height="60"></svg>
</div>

Text opacity

10% opacity

20% opacity

30% opacity

40% opacity

50% opacity

60% opacity

70% opacity

80% opacity

90% opacity

<div class="row">
  <div class="col opacity-10">10% opacity</div>
  <div class="col opacity-20">20% opacity</div>
  <div class="col opacity-30">30% opacity</div>
  <div class="col opacity-40">40% opacity</div>
  <div class="col opacity-50">50% opacity</div>
  <div class="col opacity-60">60% opacity</div>
  <div class="col opacity-70">70% opacity</div>
  <div class="col opacity-80">80% opacity</div>
  <div class="col opacity-90">90% opacity</div>
</div>

.opacity-10 sets opacity to 10%. Other classes have similar behavior.

Positioning

Overlay

The .overlay-black and .overlay-white classes overlay a light or dark layer on top of a relatively positioned element.

.overlay-black

.overlay-white

<div class="bg-primary d-inline-block position-relative text-white">
  <svg width="400" height="150"></svg>
  <div class="overlay-black pos-t py-2 text-light text-center">.overlay-black</div>
  <div class="overlay-white pos-b py-2 text-dark text-center">.overlay-white</div>
</div>

Overlay panel

UIComponents library extends .modal as overlay panel. Overlay panel's position can be controlled by .modal-left and .modal-right.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-overlay-sm-left">.modal.modal-left</button>
<div class="modal fade bd-overlay-sm-left modal-left" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content no-border-radius">
      <div class="modal-header">
        <h5 class="modal-title">Left Overlay</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Left panel content here.</p>
      </div>
      <div class="modal-footer text-muted justify-content-center">
        Copyright information
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-overlay-sm-right">.modal.modal-right</button>
<div class="modal fade bd-overlay-sm-right modal-right" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content no-border-radius">
      <div class="modal-header">
        <h5 class="modal-title">Right Overlay</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Left panel content here.</p>
      </div>
      <div class="modal-footer text-muted justify-content-center">
        Copyright information
      </div>
    </div>
  </div>
</div>

Position

The .pos-* classes position elements absolutely inside a relatively positioned element.

.pos-tl positions on the top left
.pos-tc positions on the top center
.pos-tr positions on the top right
.pos-cl positions on the center left
.pos-cc positions on the center
.pos-cr positions on the center right
.pos-bl positions on the bottom left
.pos-bc positions on the bottom center
.pos-br positions on the bottom right

.pos-tl

.pos-tc

.pos-tr

.pos-cl

.pos-cc

.pos-cr

.pos-bl

.pos-bc

.pos-br

<div class="bg-primary d-inline-block position-relative text-white">
  <svg width="250" height="250"></svg>
  <div class="pos-tl overlay-black p-2">.pos-tl</div>
  <div class="pos-tc overlay-black p-2">.pos-tc</div>
  <div class="pos-tr overlay-black p-2">.pos-tr</div>
  <div class="pos-cl overlay-black p-2">.pos-cl</div>
  <div class="pos-cc overlay-black p-2">.pos-cc</div>
  <div class="pos-cr overlay-black p-2">.pos-cr</div>
  <div class="pos-bl overlay-black p-2">.pos-bl</div>
  <div class="pos-bc overlay-black p-2">.pos-bc</div>
  <div class="pos-br overlay-black p-2">.pos-br</div>
</div>

The Bootstrap margin utility classes can be applied to these. The blocks below use .m-3.

.pos-tl

.pos-tc

.pos-tr

.pos-cl

.pos-cc

.pos-cr

.pos-bl

.pos-bc

.pos-br

<div class="bg-success d-inline-block position-relative text-white">
  <svg width="250" height="250"></svg>
  <div class="pos-tl overlay-black p-2 m-3">.pos-tl</div>
  <div class="pos-tc overlay-black p-2 m-3">.pos-tc</div>
  <div class="pos-tr overlay-black p-2 m-3">.pos-tr</div>
  <div class="pos-cl overlay-black p-2 m-3">.pos-cl</div>
  <div class="pos-cc overlay-black p-2 m-3">.pos-cc</div>
  <div class="pos-cr overlay-black p-2 m-3">.pos-cr</div>
  <div class="pos-bl overlay-black p-2 m-3">.pos-bl</div>
  <div class="pos-bc overlay-black p-2 m-3">.pos-bc</div>
  <div class="pos-br overlay-black p-2 m-3">.pos-br</div>
</div>

.pos

<div class="bg-danger d-inline-block position-relative text-white">
  <svg width="250" height="250"></svg>
  <div class="pos overlay-black p-2 m-3 text-center text-middle">.pos</div>
</div>

.pos-t positions on the top
.pos-l positions on the left
.pos-r positions on the right
.pos-b positions on the bottom
.pos-c positions on the center

.pos-c

.pos-t

.pos-r

.pos-b

.pos-l

<div class="bg-info d-inline-block position-relative text-white">
  <svg width="250" height="250"></svg>
  <div class="pos-c overlay-black p-2 text-center">.pos-c</div>
  <div class="pos-t overlay-black p-2 text-center">.pos-t</div>
  <div class="pos-r overlay-black p-2 text-middle">.pos-r</div>
  <div class="pos-b overlay-black p-2 text-center">.pos-b</div>
  <div class="pos-l overlay-black p-2 text-middle">.pos-l</div>
</div>

The Bootstrap margin utility classes can be applied to these. The blocks below use .m-3.

.pos-t

.pos-r

.pos-b

.pos-l

<div class="bg-warning d-inline-block position-relative text-white">
  <svg width="250" height="250"></svg>
  <div class="pos-t overlay-black p-2 m-3 text-center">.pos-t</div>
  <div class="pos-r overlay-black p-2 m-3 text-middle">.pos-r</div>
  <div class="pos-b overlay-black p-2 m-3 text-center">.pos-b</div>
  <div class="pos-l overlay-black p-2 m-3 text-middle">.pos-l</div>
</div>

Components

Arrow

The .arrow-<color> classes create an arrow shape. Height can be controlled by adding a .h1, .h2, ... tag.

H1

.h1

Centered

Shadow

H2

.h2

Centered

Shadow

H3

.h3

Centered

Shadow

H4

.h4

Centered

Shadow

<div class="row">
  <div class="col"><h1 class="arrow-primary">H1                   </h1></div>
  <div class="col"><div class="h1 arrow-info">.h1                 </div></div>
  <div class="col"><h1 class="arrow-success text-center">Centered </h1></div>
  <div class="col"><h1 class="arrow-warning shadow">Shadow        </h1></div>
</div>
<div class="row">
  <div class="col"><h2 class="arrow-primary">H2                   </h2></div>
  <div class="col"><div class="h2 arrow-info">.h2                 </div></div>
  <div class="col"><h2 class="arrow-success text-center">Centered </h2></div>
  <div class="col"><h2 class="arrow-warning shadow">Shadow        </h2></div>
</div>
<div class="row">
  <div class="col"><h3 class="arrow-primary">H3                   </h3></div>
  <div class="col"><div class="h3 arrow-info">.h3                 </div></div>
  <div class="col"><h3 class="arrow-success text-center">Centered </h3></div>
  <div class="col"><h3 class="arrow-warning shadow">Shadow        </h3></div>
</div>
<div class="row">
  <div class="col"><h4 class="arrow-primary">H4                   </h4></div>
  <div class="col"><div class="h4 arrow-info">.h4                 </div></div>
  <div class="col"><h4 class="arrow-success text-center">Centered </h4></div>
  <div class="col"><h4 class="arrow-warning shadow">Shadow        </h4></div>
</div>

For large heights, use the .display-* classes.

Display-1

Display-2

Display-3

Display-4

<h1 class="display-1 arrow-warning w-50 text-uppercase shadow">Display-1</h1>
<h1 class="display-2 arrow-warning w-50 text-uppercase shadow">Display-2</h1>
<h1 class="display-3 arrow-warning w-50 text-uppercase shadow">Display-3</h1>
<h1 class="display-4 arrow-warning w-50 text-uppercase shadow">Display-4</h1>

Stages

To create phases / stages, add a .arrow-tail class to add a tail to the arrow.

First

Second

Third

Fourth

<div class="d-flex">
  <h5 class="mr-4 ml-3 arrow-primary">First</h5>
  <h5 class="mr-4 arrow-info arrow-tail">Second</h5>
  <h5 class="mr-4 arrow-success arrow-tail">Third</h5>
  <h5 class="mr-4 arrow-warning arrow-tail">Fourth</h5>
</div>

TODO: Allow arrows to overlap.

Divider

Content before divider

Content after divider

<p>Content before divider</p>
<div class="divider"></div>
<p>Content after divider</p>

Divider colors

<div class="divider border-primary"></div>
<div class="divider border-secondary"></div>
<div class="divider border-success"></div>
<div class="divider border-info"></div>
<div class="divider border-warning"></div>
<div class="divider border-danger"></div>
<div class="divider border-dark"></div>
<div class="divider border-light"></div>

Divider with content

Text

Icons

Buttons

<h3>Divider with content</h3>
<div class="divider">Text</div>
<div class="divider border-dark"><i class="fa fa-2x fa-twitter mr-2"></i> Icons</div>
<div class="divider border-primary"><div class="btn btn-primary round">Buttons</div></div>

Tail

Add a .tail-<position> class to add a tail to a container.

Tail backgrounds

tail-bc.bg-primary

tail-bc.bg-success

tail-bc.bg-warning

<div class="row">
  <div class="col"><div class="mb-3 bg-primary tail-bc"><div class="p-3 text-middle text-center">tail-bc.bg-primary</div></div></div>
  <div class="col"><div class="mb-3 bg-success tail-bc"><div class="p-3 text-middle text-center">tail-bc.bg-success</div></div></div>
  <div class="col"><div class="mb-3 bg-warning tail-bc"><div class="p-3 text-middle text-center">tail-bc.bg-warning</div></div></div>
</div>

Tail borders

tail-bc.border-primary

tail-bc.border-dark

tail-bc.border-danger

<div class="row">
  <div class="col"><div class="mb-3 border border-primary tail-bc"><div class="p-3 text-middle text-center">tail-bc.border-primary</div></div></div>
  <div class="col"><div class="mb-3 border border-dark tail-bc"><div class="p-3 text-middle text-center">tail-bc.border-dark</div></div></div>
  <div class="col"><div class="mb-3 border border-danger tail-bc"><div class="p-3 text-middle text-center">tail-bc.border-danger</div></div></div>
</div>

Tail borders with backgrounds

tail-bc.border-primary.bg-white

tail-bc.border-dark.bg-white

tail-bc.border-danger.bg-white

tail-bc.bg-light.border-primary

tail-bc.bg-primary.border-dark

tail-bc.bg-warning.border-danger

<div class="row">
  <div class="col"><div class="mb-3 bg-white border border-primary tail-bc"><div class="p-3 text-middle text-center">tail-bc.border-primary.bg-white</div></div></div>
  <div class="col"><div class="mb-3 bg-white border border-dark tail-bc"><div class="p-3 text-middle text-center">tail-bc.border-dark.bg-white</div></div></div>
  <div class="col"><div class="mb-3 bg-white border border-danger tail-bc"><div class="p-3 text-middle text-center">tail-bc.border-danger.bg-white</div></div></div>
</div>
<div class="row">
  <div class="col"><div class="mb-3 bg-light border border-primary tail-bc"><div class="p-3 text-middle text-center">tail-bc.bg-light.border-primary</div></div></div>
  <div class="col"><div class="mb-3 bg-primary border border-dark tail-bc"><div class="p-3 text-middle text-center">tail-bc.bg-primary.border-dark</div></div></div>
  <div class="col"><div class="mb-3 bg-warning border border-danger tail-bc"><div class="p-3 text-middle text-center">tail-bc.bg-warning.border-danger</div></div></div>
</div>

Tail styles

tail-bc.shadow

tail-bc.rounded

tail-bc.round

<div class="row">
  <div class="col"><div class="mb-3 bg-warning shadow tail-bc"><div class="p-3 text-middle text-center">tail-bc.shadow</div></div></div>
  <div class="col"><div class="mb-3 bg-warning rounded tail-bc"><div class="p-3 text-middle text-center">tail-bc.rounded</div></div></div>
  <div class="col"><div class="mb-3 bg-warning round tail-bc"><div class="p-3 text-middle text-center">tail-bc.round</div></div></div>
</div>

Tail position

.tail-tl

.tail-tc

.tail-tr

.tail-bl

.tail-bc

.tail-br

.tail-lt

.tail-lc

.tail-lb

.tail-rt

.tail-rc

.tail-rb

<div class="row">
  <div class="col"><div class="mb-3 bg-warning tail-tl"><div class="p-5 text-middle text-center">.tail-tl</div></div></div>
  <div class="col"><div class="mb-3 bg-warning tail-tc"><div class="p-5 text-middle text-center">.tail-tc</div></div></div>
  <div class="col"><div class="mb-3 bg-warning tail-tr"><div class="p-5 text-middle text-center">.tail-tr</div></div></div>
</div>
<div class="row">
  <div class="col"><div class="mb-3 bg-warning tail-bl"><div class="p-5 text-middle text-center">.tail-bl</div></div></div>
  <div class="col"><div class="mb-3 bg-warning tail-bc"><div class="p-5 text-middle text-center">.tail-bc</div></div></div>
  <div class="col"><div class="mb-3 bg-warning tail-br"><div class="p-5 text-middle text-center">.tail-br</div></div></div>
</div>
<div class="row">
  <div class="col"><div class="mb-3 bg-warning tail-lt"><div class="p-5 text-middle text-center">.tail-lt</div></div></div>
  <div class="col"><div class="mb-3 bg-warning tail-lc"><div class="p-5 text-middle text-center">.tail-lc</div></div></div>
  <div class="col"><div class="mb-3 bg-warning tail-lb"><div class="p-5 text-middle text-center">.tail-lb</div></div></div>
</div>
<div class="row w-75">
  <div class="col"><div class="mb-3 bg-warning tail-rt"><div class="p-5 text-middle text-center">.tail-rt</div></div></div>
  <div class="col"><div class="mb-3 bg-warning tail-rc"><div class="p-5 text-middle text-center">.tail-rc</div></div></div>
  <div class="col"><div class="mb-3 bg-warning tail-rb"><div class="p-5 text-middle text-center">.tail-rb</div></div></div>
</div>

Inputs

Select

Select via bootstrap-select

Single, multiple, color variants

<select class="select-multiple w-100" name="states[]" multiple="multiple">
  <option value="AP" selected>Andhra Pradesh</option>
  <option value="ML">Meghalaya</option>
  <option value="TS">Telangana</option>
</select>

<select class="select-multiple-groups w-100" name="states[]" multiple="multiple">
  <optgroup label="South">
    <option value="AP">Andhra Pradesh</option>
    <option value="TS">Telangana</option>
  </optgroup>
  <optgroup label="North East">
    <option value="ML" selected>Meghalaya</option>
    <option value="NL">Nagaland</option>
    <option value="MN">Manipur</option>
  </optgroup>
</select>

<h4>Select via bootstrap-select</h4>
<p>Single, multiple, color variants</p>
<select class="selectpicker" data-style="btn-primary">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<select class="selectpicker" multiple data-style="btn-warning">
  <option value="opt1">Option 1</option>
  <option value="opt2">Option 2</option>
  <option value="opt3">Option 3</option>
</select>
<select class="selectpicker" data-style="btn-success">
  <option value="o1">Option 1</option>
  <option value="o2">Option 2</option>
  <option value="o3">Option 3</option>
</select>

<script>
$(function() {
  $('.select-multiple').select2()
  $('.select-multiple-groups').select2()

  $('.selectpicker').selectpicker()
  // hack - bootstrap-select 1.13.0-beta doesn't address the text contrast
  $('.selectpicker + button').addClass('text-light')
})
</script>

Sliders

Deprecated in favour of Bootstrap 4.2 .custom-range.

<div class="row mt-3 mb-3">
  <div class="col"><input type="range" class="form-control slider" min="0" max="100" step="10" value="10"></div>
  <div class="col"><input type="range" class="form-control slider shadow" min="0" max="100" step="10" value="20"></div>
  <div class="col"><input type="range" class="form-control slider round" min="0" max="100" step="10" value="30"></div>
</div>

Switch

Deprecated in favour of Bootstrap 4.2 .custom-switch. (Note: it doesn't support colors. But still, avoid this component.)

Off

<label for="sw1">On</label>
<div class="switch-primary round">
  <input type="checkbox" id="sw1" name="sw1" checked>
  <label for="sw1"></label>
</div>
<label for="sw1">Off</label>

Switch colors

<div class="round switch-success"  ><input type="checkbox" id="sw2" checked><label for="sw2"></label></div>
<div class="round switch-danger"   ><input type="checkbox" id="sw3" checked><label for="sw3"></label></div>
<div class="round switch-warning"  ><input type="checkbox" id="sw4" checked><label for="sw4"></label></div>
<div class="round switch-info"     ><input type="checkbox" id="sw5" checked><label for="sw5"></label></div>
<div class="round switch-secondary"><input type="checkbox" id="sw6" checked><label for="sw6"></label></div>

Switch border radius

<div class="switch-primary                 "><input type="checkbox" id="sw7" checked><label for="sw7"></label></div>
<div class="switch-primary border-radius-sm"><input type="checkbox" id="sw8" checked><label for="sw8"></label></div>
<div class="switch-primary border-radius   "><input type="checkbox" id="sw9" checked><label for="sw9"></label></div>
<div class="switch-primary border-radius-lg"><input type="checkbox" id="swa" checked><label for="swa"></label></div>
<div class="switch-primary border-radius-xl"><input type="checkbox" id="swb" checked><label for="swb"></label></div>
<div class="switch-primary round           "><input type="checkbox" id="swc" checked><label for="swc"></label></div>

Switch size

<div class="switch-primary w-25"><input type="checkbox" id="swd" checked><label for="swd"></label></div>

Upload

Upload your file

<input type="file" class="upload" id="file-input">
<label for="file-input" class="bg-warning p-3">
  <h3>Upload your file</h3>
  <p><button tabindex="-1" class="btn btn-primary w-100">Click anywhere</button></p>
</label>

Bootstrap

Accordion

Note: The data-parent attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.

Item 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Item 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Item 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<style scoped>
  .card-header > a:before {
    float: right !important;
    font-family: FontAwesome;
    content:"\f068";
    padding-right: 5px;
  }
  .card-header > a.collapsed:before {
    float: right !important;
    content:"\f067";
  }
  .panel-title > a:hover,
  .panel-title > a:active,
  .panel-title > a:focus  {
    text-decoration:none;
  }
</style>
<h2 class="toc">Accordion</h2>
<div class="container">
  <p>
    <strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all
    collapsible elements under the specified parent will be closed when one of the collapsible item is shown.
  </p>
  <div id="accordion">
    <div class="card">
      <div class="card-header">
        <a class="card-link" data-toggle="collapse" href="#collapseOne">Item 1</a>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">Item 2</a>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">Item 3</a>
      </div>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>
    </div>
  </div>
</div>

Alerts

Danger alert with an alert link.

Warning alert with an alert link.

Success alert with an alert link.

<p><button class="btn btn-primary" data-toggle="collapse" data-target=".alert">Click to toggle Bootstrap alert</button></p>

<div class="alert alert-danger collapse" role="alert">
  <strong>Danger alert</strong> with an <a class="alert-link" href="#">alert link</a>.
  <button type="button" class="close" data-toggle="collapse" data-target=".alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="alert alert-warning collapse" role="alert">
  <strong>Warning alert</strong> with an <a class="alert-link" href="#">alert link</a>.
  <button type="button" class="close" data-toggle="collapse" data-target=".alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="alert alert-success collapse" role="alert">
  <strong>Success alert</strong> with an <a class="alert-link" href="#">alert link</a>.
  <button type="button" class="close" data-toggle="collapse" data-target=".alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

We use Bootstrap Toasts for notifications.

Hello, world! This is a toast message.

<p>We use <a href="https://getbootstrap.com/docs/4.2/components/toasts/">Bootstrap Toasts</a> for notifications.</p>
<p><button type="button" class="show-toast btn btn-primary" data-target=".toast">Show toast</button></p>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
  <div class="toast-header">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>
<script>
  $('.show-toast').on('click', function() {
    $($(this).data('target')).toast('show')
  })
</script>

Buttons

Buttons support size and color variations. These can be combined in any way.

Button Sizes

<p>
  <button type="button" class="btn btn-xs btn-default">Default</button>
  <button type="button" class="btn btn-sm btn-default">Default</button>
  <button type="button" class="btn        btn-default">Default</button>
  <button type="button" class="btn btn-lg btn-default">Default</button>
</p>

Button Colors

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>

Button variations

<p>
  <button type="button" class="btn btn-primary round">Round</button>
  <button type="button" class="btn btn-primary round shadow">Round shadow</button>
  <button type="button" class="btn btn-outline-primary">Outline</button>
  <button type="button" class="btn btn-primary active">Active</button>
  <button type="button" class="btn btn-primary" disabled>Disabled</button>
  <button type="button" class="btn btn-primary"><i class="fa fa-plus"></i> Icon</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-block">Block</button>
</p>

Button groups

<p class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-outline-primary active">Category</button>
  <button type="button" class="btn btn-outline-primary">Advertiser</button>
  <button type="button" class="btn btn-outline-primary">Brand</button>
</p>

Cards

Card

Some quick example text to build on the card title and make up the bulk of the card's content.

Last updated 3 mins ago

<div class="card shadow">
  <div class="card-body">
    <h4 class="card-title">Card</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div><!-- .card-body -->
  <div class="card-footer">
    <small class="text-muted">Last updated 3 mins ago</small>
  </div><!-- .card-footer -->
</div><!-- .card -->

Card groups

Sub card group

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Sub card group

This card has supporting text below as a natural lead-in to additional content.

Sub card group

Short card text.

<div class="card-group">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Sub card group</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little
        bit longer.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Sub card group</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Sub card group</h4>
      <p class="card-text">Short card text.</p>
    </div>
  </div>
</div>

Card group spacing

To add spacing between card groups, use `.ml-* border-left` on the second card group item onwards.

Sub card group

Short card text

Sub card group

Short card text

Sub card group

Shot card text

<div class="card-group">
  <div class="card">
    <div class="card-body border-left">
      <h4 class="card-title">Sub card group</h4>
      <p class="card-text">Short card text</p>
    </div>
  </div>
  <div class="card ml-2 border-left">
    <div class="card-body">
      <h4 class="card-title">Sub card group</h4>
      <p class="card-text">Short card text</p>
    </div>
  </div>
  <div class="card ml-2 border-left">
    <div class="card-body">
      <h4 class="card-title">Sub card group</h4>
      <p class="card-text">Shot card text</p>
    </div>
  </div>
</div>

Main card

Sub card group

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Sub card group

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Sub card group

Short card text.

Last updated 3 mins ago

<div class="card shadow mt-3">
  <div class="card-body">
    <h4 class="card-title">Main card</h4>
      <div class="card-group">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Sub card group</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
          <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Sub card group</h4>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
          </div>
          <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Sub card group</h4>
            <p class="card-text">Short card text.</p>
          </div>
          <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
          </div>
        </div>
      </div>
  </div><!-- .card-body -->
</div><!-- .card -->

Abagael Enno

aenno@gramener.com

Product Manager

Invite 13	Pending 05
Graph Title

<div class="card shadow col-md-6 col-lg-3 mt-3">
  <div class="card-img-top">
    <div class="row">
      <div class="col-3 mt-3">
        <img src="team.svg" class="rounded" alt="Team image">
      </div>
      <div class="col-9">
        <h4>Abagael Enno</h4>
        <div class="card-subtitle mt-1 mb-1">aenno@gramener.com</div>
        <div class="card-subtitle mt-1 mb-1">Product Manager</div>
      </div><!-- .col-9 -->
    </div><!-- .row -->
  </div><!-- .card-img-top -->
  <div class="card-body">
    <table class="table table-sm table-bordered">
      <thead>
        <tr>
          <th class="text-center" scope="col"><small>Invite</small>  <div class="support-text text-info">13</div> </th>
          <th class="text-center" scope="col"><small>Pending</small> <div class="support-text text-danger"><i class="fa fa-circle"></i> 05</div> </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="2">
            <div scope="col"><small>Graph Title</small></div>
            <img width="100%" src="big-graph.png" alt="Large sample graph">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Dashboards

Quiz app!

Date picker

<div class="daterange-container" class="pull-right bg-light w-100">
  <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
  <span></span>
</div>
<script>
$(function() {
  // initialize daterange
  var start = moment().subtract(29, 'days');
  var end = moment();

  // TODO: rewrite this better
  function cb(start, end) {
    $('.daterange-container span').html(
      start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
  }

  $(".daterange-container").daterangepicker({
    startDate: start,
    endDate: end,
    ranges: {
      'Today': [moment(), moment()],
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
      'This Month': [moment().startOf('month'), moment().endOf('month')],
      'Last Month': [moment().subtract(1, 'month').startOf('month'),
        moment().subtract(1, 'month').endOf('month')]
    }
  }, cb)
  cb(start, end)
})
</script>

Dropdowns

All India	All India (divider)	Sales (split)	Kandivalli (Dark blue)
Action Another action Something else here	Action Another action Something else here	Action Another action Something else here Separated link	Action Another action Something else here

Print sequence	Rajan
Action Another action Something else here	Action Another action Something else here

<table class="table table-hover" data-item="Dropdowns">
  <thead>
    <th>Print sequence</th>
    <th>Rajan</th>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="dropdown">
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Print sequence
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
      <td>
        <!-- Example icon button -->
        <div class="dropdown">
          <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-user-circle fa-1x"></i> Rajan
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Forms

Inputs

by .form-control-sm(lg) classes

OR by .col-* classes

<p class="text-muted">by <code class="highlighter-rouge">.form-control-sm(lg)</code> classes</p>
<div class="row">
  <div class="col"><input class="form-control" type="text" placeholder="input default"></div>
  <div class="col"><input class="form-control form-control-sm" type="text" placeholder="input small"></div>
  <div class="col"><input class="form-control form-control-lg" type="text" placeholder="input large"></div>
</div>
<p class="text-muted">OR by <code class="highlighter-rouge">.col-*</code> classes</p>
<div class="row">
  <div class="col"><input class="form-control" type="text" placeholder="input default"></div>
  <div class="col-3"><input class="form-control" type="text" placeholder="input .col-3"></div>
  <div class="col-5"><input class="form-control" type="text" placeholder="input .col-5"></div>
</div>

Inputs - minimalistic

<div class="d-flex">
  <input class="form-control mx-1 underline" placeholder=".underline">
  <input class="form-control mx-1 underline border-primary" placeholder=".underline.border-primary">
  <input class="form-control mx-1 underline border-success" placeholder=".underline.border-success">
  <input class="form-control mx-1 underline border-danger" placeholder=".underline.border-warning">
  <input class="form-control mx-1 underline border-warning" placeholder=".underline.border-warning">
</div>

Forms - Helper text

Valid entry

Invalid entry

<div class="row">
  <div class="col">
    <input type="text" class="form-control is-valid">
    <div class="valid-feedback">
      Valid entry
    </div>
  </div>
  <div class="col">
    <input type="text" class="form-control is-invalid">
    <div class="invalid-feedback">
      Invalid entry
    </div>
  </div>
</div>

Email/password sign-in

<form class="form-inline">
  <div class="form-row align-items-center">
    <div class="col-auto">
      <input class="form-control" type="text" placeholder="Email">
      <input class="form-control" type="password" placeholder="Password">
    </div>
    <div class="col-auto">
      <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="checkbox">Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Grids

Equal height columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Short text

<div class="row my-4">
  <div class="col">
    <div class="border h-100 p-2">Lorem ipsum dolor sit amet,
    consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
    officia deserunt mollit anim id est laborum. </div>
  </div>
  <div class="col">
    <div class="border h-100 p-2">Short text</div>
  </div>
  <div class="col">
    <div class="border h-100 p-2">Short text</div>
  </div>
</div>

Input groups

Custom checkbox

<p>
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-label"></span>
    <span class="custom-control-description">Custom checkbox</span>
  </label>
</p>

Custom Radio 1 Custom Radio 2

<p>
  <label class="custom-control custom-radio">
    <input id="radio1" name="radio" type="radio" class="custom-control-input">
    <span class="custom-control-label"></span>
    <span class="custom-control-description">Custom Radio 1</span>
  </label>
  <label class="custom-control custom-radio">
    <input id="radio2" name="radio" type="radio" class="custom-control-input">
    <span class="custom-control-label"></span>
    <span class="custom-control-description">Custom Radio 2</span>
  </label>
</p>

Input Groups

<p>
  <div class="input-group mb-2 mb-sm-0">
    <div class="input-group-prepend">
      <span class="input-group-text">@</span>
    </div>
    <input type="text" class="form-control border-left-0" id="inlineFormInputGroup" placeholder="Username">
  </div>
</p>

Priority
Non-Priority
Both

.00

<div class="row">
  <div class="col-3">
    <ul class="list-group">
      <li class="list-group-item"><input type="checkbox" name="radio"> CASA TD</li>
      <li class="list-group-item"><input type="checkbox" name="radio"> IPG</li>
      <li class="list-group-item"><input type="checkbox" name="radio"> OPS</li>
      <li class="list-group-item"><input type="checkbox" name="radio"> Hooks</li>
      <li class="list-group-item"><input type="checkbox" name="radio"> Contactability</li>
    </ul>
  </div>
  <div class="col-2">
    <ul class="list-group">
      <li class="list-group-item list-group-item-dark">Priority</li>
      <li class="list-group-item">Non-Priority</li>
      <li class="list-group-item">Both</li>
    </ul>
  </div>
  <div class="col-4">
    <button type="button" class="btn btn-secondary">Zones</button>
    <button type="button" class="btn btn-danger">States</button>
    <button type="button" class="btn btn-secondary">Branches</button>
  </div>
  <div class="col-3">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">$</span>
      </div>
      <input type="text" class="form-control" aria-label="Amount">
      <div class="input-group-append">
        <span class="input-group-text">.00</span>
      </div>
    </div>
  </div>
</div>

Search

<div class="row">
  <div class="col">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-secondary" type="submit">Search</button>
      </span>
    </div>
  </div>
  <div class="col">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search">
      <div class="input-group-append">
        <span class="input-group-text"><i class="fa fa-search"></i></span>
      </div>
    </div>
  </div>
  <div class="col">
    <input type="text" class="form-control underline text-center" placeholder="minimal search">
  </div>
</div>

Loading

<p>
  <button class="btn btn-primary" data-class="ajax-request-success" data-url="index.html">
    Successful request
  </button>
  <button class="btn btn-danger" data-class="ajax-request-failure" data-url="nonexistent">
    Bad request
  </button>
</p>

<script>
  $('body')
    .off('click.loading')
    .on('click.loading', '[data-url]', function() {
      var container = $(this).attr('class')
      var $icon = $('<i class="fa fa-spinner fa-2x fa-fw align-middle"></i>').appendTo(this)
      $.ajax($(this).data('url'), {
        data: {'data': 'test data'},
        beforeSend: function() {  },
        success: function() { new Noty({type: 'success', text: "Loaded AJAX request"}).show() },
        error: function() { new Noty({type: 'error', text: "Failed to load AJAX request"}).show() },
        complete: function() { $icon.fadeOut() }
      })
    })
</script>

Login

Remember me

Forgot Password ?

<div class="row mt-3 justify-content-center">
  <div class="col-6">
    <div class="card">
      <div class="card-body">
        <div class="col">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text"><i class="fa fa-user" aria-hidden="true"></i></span>
            </div>
            <input type="text" class="form-control" placeholder="Username" aria-label="Username">
          </div>
          <div class="input-group mt-3">
            <div class="input-group-prepend">
              <span class="input-group-text"><i class="fa fa-lock" aria-hidden="true"></i></span>
            </div>
            <input type="password" class="form-control" placeholder="Password" aria-label="Password">
          </div>
          <div class="row justify-content-between mt-2">
            <div class="col-6">
              <label class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input">
                <span class="custom-control-label"></span>
                <span class="custom-control-description">Remember me</span>
              </label>
            </div>
            <div class="col-6 text-right">
              <p><a href="#">Forgot Password ?</a></p>
            </div>
          </div>
          <div class="row">
            <button type="button" class="col-11 mx-auto btn btn-primary">Login</button>
          </div>
        </div>
      </div>
    </div>
  </div><!-- /.col -->
</div>

Modal

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <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 goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <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 goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-full">Extra large modal</button>
<div class="modal fade bd-example-modal-full" tabindex="-1" role="dialog" aria-labelledby="myFullModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <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 goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Panels

Alert Breakup

Account Breakup by Critical Robots

Sales/Volume Analysis

color scale

<div class="row mt-3">
  <div class="col">
    <div class="card">
      <div class="card-header">
        <div class="pull-left">
          <div class="row mt-2">
            <h3>Sales/Volume Analysis</h3>
          </div>
          <div class="row mt-2">
            <div class="btn-group" role="group" aria-label="Basic example">
              <button type="button" class="btn btn-primary">Category</button>
              <button type="button" class="btn btn-info">Advertiser</button>
              <button type="button" class="btn btn-info">Brand</button>
              <button type="button" class="btn btn-info">Sub Brand</button>
            </div>
          </div>
        </div>
        <div class="pull-right">
          <div class="row mt-2">
            <div class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Sales
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
          </div>
          <div class="row mt-2">color scale</div>
        </div> <!-- .pull-right -->
      </div>
      <div class="card-body">
        <img src="heatgrid.png" alt="Graph">
      </div>
    </div>
  </div>
</div>

Robot Utilisation

Tables

Zones	16TonH 5016	16TonH 5016
All Geos
Vol	1000	1000	1000
MVC	51	51	51
GC	4%	4%	4%

Category	GRP	CPT	PT:NPT	WD:WE	WOV	Trend	SOE
Category-1	123 9%	...	...	...	110	trendline	110 8%
Category-1	123 9%	...	...	...	110	trendline	110 8%
Category-1	123 9%	...	...	...	110	trendline	110 8%

Export Additional Info - 2016

Country	Export	% Growth	India's total Export	% Share
Belgium	19, 513 m	17.0%	219,513	7.0%
Belgium	19, 513 m	17.0%	219,513	7.0%
Belgium	19, 513 m	17.0%	219,513	7.0%
Belgium	19, 513 m	17.0%	219,513	7.0%
Belgium	19, 513 m	17.0%	219,513	7.0%

Products By

Products	2016, C1	2016, C2	2017, C1	2017, C2	Trend
Product 1	10%	11%	20%	13%	...
Product 2	10%	11%	20%	13%	...
Product 3	10%	11%	20%	13%	...

<div class="row mt-3">
  <div class="card col-8">
    <div class="card-header">
      <div class="row">
        <h3 class="col-4">Products By</h3>
        <div class="col-4 btn-group" role="group" aria-label="Basic example">
          <button type="button" class="btn btn-primary">Market Share</button>
          <button type="button" class="btn btn-secondary">Price Per Product</button>
        </div>
        <div class="col-4">
          <i class="pull-right fa fa-bar-chart" aria-hidden="true"></i>
          <i class="pull-right fa fa-th" aria-hidden="true"></i>
        </div>
      </div>
    </div>
    <div class="card-body">
      <table class="table table-striped">
        <thead>
          <tr><th scope="col">Products</th><th scope="col">2016, C1</th><th scope="col">2016, C2</th><th scope="col">2017, C1</th><th scope="col">2017, C2</th><th scope="col">Trend</th>
          </tr>
        </thead>
        <tbody>
          <tr><th scope="row">Product 1</th><td>10%</td><td>11%</td><td>20%</td><td>13%</td><td>...</td></tr>
          <tr><th scope="row">Product 2</th><td>10%</td><td>11%</td><td>20%</td><td>13%</td><td>...</td></tr>
          <tr><th scope="row">Product 3</th><td>10%</td><td>11%</td><td>20%</td><td>13%</td><td>...</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Quick Estimate of Total Export July 2017 in INR (cr)

Commodities	Value July 2016 vs July 2017	Change vs July 2016 (Change %)	% of Total Export
Petrolium Crude & Products	6,820.34 7,844.94	1,024.6(15.02%)	23.08%
Petrolium Crude & Products	6,820.34 7,844.94	1,024.6(15.02%)	23.08%
Petrolium Crude & Products	6,820.34 7,844.94	1,024.6(15.02%)	23.08%
Petrolium Crude & Products	6,820.34 7,844.94	1,024.6(15.02%)	23.08%

Tooltip

Default	With HTML	With Chart	Custom positions
Here is a BS Tooltip	Table in a BS Tooltip	Chart in a BS Tooltip	Table right. Household

<table class="table table-striped table-inverse table-hover" data-item="Tooltips">
  <thead><tr><th>Default</th><th>With HTML</th><th>With Chart</th><th>Custom positions</th></tr></thead>
  <tbody>
    <tr>
      <td><a href="#" id="just-tooltip" data-toggle="tooltip" title="Tooltip title">Here</a> is a BS Tooltip</td>
      <td><a href="#" id="tooltip-html" data-toggle="tooltip">Table in a BS Tooltip</a></td>
      <td><a href="#" id="tooltip-chart" data-toggle="tooltip">Chart in a BS Tooltip</a></td>
      <td>
        <span><a href="#" id="custom-right" data-toggle="tooltip">Table right</a></span>.
        <span><a href="#" id="custom-household" data-toggle="tooltip">Household</a></span>
      </td>
    </tr>
  </tbody>
</table>

Popover

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="I am a nice popover on the top. Toggle to dismiss.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="I am a nice popover to the right. Toggle to dismiss.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="I am a nice popover on the bottom. Toggle to dismiss.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="I am a nice popover to the left. Toggle to dismiss.">
  Popover on left
</button>

Introduction

Quick start

Custom Bootstrap

Custom SASS

Libraries

Utilities

Hover styles

Focus styles

Active styles

Cursor

Round

Border radius sizes

Ripples

Border

Shadows

Shadow card

Text size

Text alignment

Text shadow

.text-shadow .text-shadow-none

Tours

Underline

H3.underline

H4.underline.border-primary

H5.underline.border-danger

Backgrounds

Background

Parellax effect

Gradient

Text opacity

Positioning

Overlay

Overlay panel

Position

Components

Arrow

H1

Centered

Shadow

H2

Centered

Shadow

H3

Centered

Shadow

H4

Centered

Shadow

Display-1

Display-2

Display-3

Display-4

Stages

First

Second

Third

Fourth

Divider

Divider colors

Divider with content

Tail

Tail backgrounds

Tail borders

Tail borders with backgrounds

Tail styles

Tail position

Inputs

Select

Select via bootstrap-select

Sliders

Switch

Switch colors

Switch border radius

Switch size

Upload

Upload your file

Bootstrap

Accordion

Alerts

Buttons