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.

You can customize Bootstrap by modifying variable from the URL. For example: ui/bootstraptheme.css?primary=maroon creates a CSS that has the primary color as maroon. (See the effect on this page.)

See the list of Bootstrap variables you can change. Here are some examples:

In addition, any variable beginning with color is added as a theme color. For example, initially these buttons have no color:

But click on this link: ?color1=purple&color-abc=teal to add a new color1 and color-abc to the theme. All color methods like .bg-color1, .text-color-abc, etc work.

You can change some common variables from the Change Theme button on at the top of this page to colors, fonts and style. The styles include:

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

Custom Fonts

You can set change the fonts using these Bootstrap variables:

If you add &google-fonts=y to the URL, Google Fonts are automatically imported.

To use your own fonts, import them before bootstraptheme.css, like this:

<link rel="stylesheet" href="https://fontlibrary.org/face/bebasneueregular">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:ital,wght@0,300;0,700;1,300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="ui/bootstraptheme.css?font-family-base=BebasNeueRegular,Open Sans Condensed sans-serif">

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><!-- d3 v4 -->
... OR ...
<script src="ui/d3v5/dist/d3.min.js"></script><!-- d3 v5 -->
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"><!-- v4 icons -->
... OR ...
<link rel="stylesheet" href="ui/@fortawesome/fontawesome-free/css/all.min.css"><!-- v5 icons -->
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

Colors

Since Gramex v1.50, custom color classes are available. These extend theme colors like primary, success, etc.

<p>
<button class="btn btn-color1">color-1</button>
<button class="btn btn-color2">color-2</button>
<button class="btn btn-color3">color-3</button>
<button class="btn btn-color4">color-4</button>
<button class="btn btn-color5">color-5</button>
<button class="btn btn-color6">color-6</button>
</p>

The default Bootstrap theme colors are:

<p>
<button type="button" class="btn btn-primary">primary</button>
<button type="button" class="btn btn-secondary">secondary</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-info">info</button>
<button type="button" class="btn btn-light">light</button>
<button type="button" class="btn btn-dark">dark</button>
</p>

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.

This tooltip is from the rectangle Text hijacks mouse events from the rectangle behind This tooltip is from the text .pointer-events-none does not hijack click or hover
<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>

<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>
<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>
Sample image
<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>
<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>

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

Text size

.h1, .h2, etc. make fonts larger and bold. They have the same styles as h1, h2, etc.

.sm1, .sm2, etc. make fonts smaller. These are utility classes that can be combined with other classes.

.h1 » .sm1 .sm2 .sm3 .sm4 .sm5 .sm6
<div class="h1">.h1 &raquo;
<span class="sm1">.sm1</span> <span class="sm2">.sm2</span> <span class="sm3">.sm3</span>
<span class="sm4">.sm4</span> <span class="sm5">.sm5</span> <span class="sm6">.sm6</span>
</div>
.h2 » .sm1 .sm2 .sm3 .sm4 .sm5 .sm6
<div class="h2">.h2 &raquo;
<span class="sm1">.sm1</span> <span class="sm2">.sm2</span> <span class="sm3">.sm3</span>
<span class="sm4">.sm4</span> <span class="sm5">.sm5</span> <span class="sm6">.sm6</span>
</div>
.h3 » .sm1 .sm2 .sm3 .sm4 .sm5 .sm6
<div class="h3">.h3 &raquo;
<span class="sm1">.sm1</span> <span class="sm2">.sm2</span> <span class="sm3">.sm3</span>
<span class="sm4">.sm4</span> <span class="sm5">.sm5</span> <span class="sm6">.sm6</span>
</div>
.h4 » .sm1 .sm2 .sm3 .sm4 .sm5 .sm6
<div class="h4">.h4 &raquo;
<span class="sm1">.sm1</span> <span class="sm2">.sm2</span> <span class="sm3">.sm3</span>
<span class="sm4">.sm4</span> <span class="sm5">.sm5</span> <span class="sm6">.sm6</span>
</div>
.h5 » .sm1 .sm2 .sm3 .sm4 .sm5 .sm6
<div class="h5">.h5 &raquo;
<span class="sm1">.sm1</span> <span class="sm2">.sm2</span> <span class="sm3">.sm3</span>
<span class="sm4">.sm4</span> <span class="sm5">.sm5</span> <span class="sm6">.sm6</span>
</div>
.h6 » .sm1 .sm2 .sm3 .sm4 .sm5 .sm6
<div class="h6">.h6 &raquo;
<span class="sm1">.sm1</span> <span class="sm2">.sm2</span> <span class="sm3">.sm3</span>
<span class="sm4">.sm4</span> <span class="sm5">.sm5</span> <span class="sm6">.sm6</span>
</div>
Normal .sm1 .sm2 .sm3 .sm4 .sm5 .sm6
<div>Normal
<span class="sm1">.sm1</span>
<span class="sm2">.sm2</span>
<span class="sm3">.sm3</span>
<span class="sm4">.sm4</span>
<span class="sm5">.sm5</span>
<span class="sm6">.sm6</span>
</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" -->

Letter spacing

The .ls-* classes set the letter spacing.

The .ls-n* classes set negative letter spacing.

.ls-1 have small positive letter spacing.
.ls-2 have medium positive letter spacing.
.ls-3 have large positive letter spacing.
.ls-4 have extra positive negative letter spacing.
This is normal letter spacing.
.ls-n1 have small negative letter spacing.
.ls-n2 have medium negative letter spacing.
.ls-n3 have large negative letter spacing.
.ls-n4 have extra large negative letter spacing.
<div class="text-uppercase">
<div class="ls-1"><code>.ls-1</code> have small positive letter spacing.</div>
<div class="ls-2"><code>.ls-2</code> have medium positive letter spacing.</div>
<div class="ls-3"><code>.ls-3</code> have large positive letter spacing.</div>
<div class="ls-4"><code>.ls-4</code> have extra positive negative letter spacing.</div>
<div>This is normal letter spacing.</div>
<div class="ls-n1"><code>.ls-n1</code> have small negative letter spacing.</div>
<div class="ls-n2"><code>.ls-n2</code> have medium negative letter spacing.</div>
<div class="ls-n3"><code>.ls-n3</code> have large negative letter spacing.</div>
<div class="ls-n4"><code>.ls-n4</code> have extra large negative letter spacing.</div>
</div>

You can customize the letter spacings using these variables:

Line height

The .lh-* classes set the line height.

.lh-1. Default: 1. Here is some sample text for reference.
.lh-2. Default: 1.1. Here is some sample text for reference.
.lh-3. Default 1.25. Here is some sample text for reference.
Normal. Default: 1.5. Here is some sample text for reference.
.lh-4. Default: 2. Here is some sample text for reference.
<div class="row">
<div class="col-md lh-1"><code>.lh-1</code>. Default: 1. Here is some sample text for reference.</div>
<div class="col-md lh-2"><code>.lh-2</code>. Default: 1.1. Here is some sample text for reference.</div>
<div class="col-md lh-3"><code>.lh-3</code>. Default 1.25. Here is some sample text for reference.</div>
<div class="col-md">Normal. Default: 1.5. Here is some sample text for reference.</div>
<div class="col-md lh-4"><code>.lh-4</code>. Default: 2. Here is some sample text for reference.</div>
</div>

You can customize the line heights using these variables:

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>

Z Index

To place elements on top of other elements, use .z-9:

.z-9 sets a z-index of 9000
<div class="z-9 bg-light"><code>.z-9</code> sets a z-index of 9000</div>

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>
/* globals Shepherd */
// 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

Underlines add a single border-bottom to the element.

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>

When applied to form-control elements, it also removes the border/outline when focused or active. Instead, the underline becomes thicker on focus.

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

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>

Full height

To ensure that a page background occupies full height of the screen, use:

<body class="h-full">

This sets min-height: 100vh.

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

This uses the bootstrap-select library.

<script src="../ui/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script>
// https://github.com/snapappointments/bootstrap-select/issues/2107
$.fn.selectpicker.Constructor.BootstrapVersion = '4'
</script>

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.)

<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

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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

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

<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-light">Default</button>
<button type="button" class="btn btn-sm btn-light">Default</button>
<button type="button" class="btn btn-light">Default</button>
<button type="button" class="btn btn-lg btn-light">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.

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

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 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 -->
Team image

Abagael Enno

aenno@gramener.com
Product Manager
Invite
13
Pending
05
Graph Title
Large sample graph
<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

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)
Print sequence Rajan
<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
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>

Custom inputs

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

<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>
  • CASA TD
  • IPG
  • OPS
  • Hooks
  • Contactability
  • 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>
/* globals Noty */
$('body')
.off('click.loading')
.on('click.loading', '[data-url]', function() {
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

<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
Graph
Account Breakup by Critical Robots
Graph

Sales/Volume Analysis

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

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

Products2016, C12016, C22017, C12017, C2Trend
Product 110%11%20%13%...
Product 210%11%20%13%...
Product 310%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

DefaultWith HTMLWith ChartCustom 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>