Awin Logo

UI Style guide

A standard HTML markup and style reference for the Awin interface

A few tips to consider when adding or editing pages in the interface:

  • Avoid the use of inline styles. Its use undermines the purpose of this framework
  • Avoid adding new custom classes, please speak to the UX team before doing so
  • Keep the HTML markup separated from the logic. Ideally use templates
  • Use //styleguide.awin.com/dist/awin.css to include CSS. Do not create duplicated CSS files
  • For a new page in the Provider area use newUIoverride.css only
  • Use existing templates for components where possible
  • In suggested markup there might be some extra wrappers that may not be required in certain cases. You can ignore these on need to need basis
  • If you need any help email UserExperience@awin.com or use slack channel #user-experience

Grid System

Single Column Layout

Layout Single Column

Paragraph

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"boxLtGrey"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container-fluid"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row page-header"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;h1&gt;</span><span class="pln">Layout Single Column</span><span class="tag">&lt;/h1&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-12"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;h2&gt;</span><span class="pln">Layout Single Column </span><span class="tag">&lt;/h2&gt;</span><span class="pln"> </span><span class="tag">&lt;p&gt;</span><span class="pln">Paragraph</span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Two Column Layout

Column Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget est erat. Etiam odio lacus, ornare non lectus vel, malesuada lobortis tortor. Aenean egestas placerat molestie.

Column Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget est erat.

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"boxLtGrey"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row page-header"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;h1&gt;</span><span class="pln">Two Column Layout</span><span class="tag">&lt;/h1&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;h2&gt;</span><span class="pln">Column Title</span><span class="tag">&lt;/h2&gt;</span><span class="pln"> </span><span class="tag">&lt;p&gt;</span><span class="pln">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-4"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;h2&gt;</span><span class="pln">Column Title</span><span class="tag">&lt;/h2&gt;</span><span class="pln"> </span><span class="tag">&lt;p&gt;</span><span class="pln">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Widgets

Widget header

Widget content

Widget header

Widget content

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row row-widget"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-4 wrapper-widget"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"widget"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"header"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;h2&gt;</span><span class="pln">Widget header</span><span class="tag">&lt;/h2&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div&gt;</span><span class="pln"> </span><span class="tag">&lt;p&gt;</span><span class="pln">Widget content</span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8 wrapper-widget"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"widget"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"header"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;h2&gt;</span><span class="pln">Widget header</span><span class="tag">&lt;/h2&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div&gt;</span><span class="pln"> </span><span class="tag">&lt;p&gt;</span><span class="pln">Widget content</span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Widget with List Group

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row row-widget"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-4 wrapper-widget"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"widget"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"header"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;h2&gt;</span><span class="pln">To Do List</span><span class="tag">&lt;/h2&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group list-group-icons"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;&lt;/a&gt;</span><span class="pln"> </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;&lt;/a&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Widget with table of contents

Account Overview

Average Payment Time 12 days
Pending Sales 6
Value of Pending Sales GBP 85.09
<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row row-widget"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-4 wrapper-widget"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"widget"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"header"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;h2&gt;</span><span class="pln">Account Overview</span><span class="tag">&lt;/h2&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-striped align-middle"</span><span class="tag">&gt;&lt;/table&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Search Widget

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"search-widget "</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;form&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"Search Advertisers"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group-btn"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"Search"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fa-regular fa-search"</span><span class="pln"> </span><span class="atn">aria-hidden</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> </span><span class="tag">&lt;/button&gt;</span><span class="pln"> </span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/form&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Typography

Headers

h1 - Special. Awin Title

h1. Awin Title

h2. Awin Title

h3. Awin Title

h4. Awin Title

h5. Awin Title
h6. Awin Title
<span class="pln"> </span><span class="tag">&lt;h1</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"special"</span><span class="tag">&gt;</span><span class="pln">h1 - Special. Awin Title</span><span class="tag">&lt;/h1&gt;</span><span class="pln"> </span><span class="tag">&lt;h1&gt;</span><span class="pln">h1. Awin Title</span><span class="tag">&lt;/h1&gt;</span><span class="pln"> </span><span class="tag">&lt;h2&gt;</span><span class="pln">h2. Awin Title</span><span class="tag">&lt;/h2&gt;</span><span class="pln"> </span><span class="tag">&lt;h3&gt;</span><span class="pln">h3. Awin Title</span><span class="tag">&lt;/h3&gt;</span><span class="pln"> </span><span class="tag">&lt;h4&gt;</span><span class="pln">h4. Awin Title</span><span class="tag">&lt;/h4&gt;</span><span class="pln"> </span><span class="tag">&lt;h5&gt;</span><span class="pln">h5. Awin Title</span><span class="tag">&lt;/h5&gt;</span><span class="pln"> </span><span class="tag">&lt;h6&gt;</span><span class="pln">h6. Awin Title</span><span class="tag">&lt;/h6&gt;</span>

Text Style

Paragraph

Text Strong

Text muted

Text danger

Text warning

Text success

Text info

Text badge

<span class="pln"> </span><span class="tag">&lt;p&gt;</span><span class="pln">Paragraph</span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;p&gt;&lt;strong&gt;</span><span class="pln">Strong</span><span class="tag">&lt;/strong&gt;&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-muted"</span><span class="tag">&gt;</span><span class="pln">Text muted</span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-danger"</span><span class="tag">&gt;</span><span class="pln">Text danger</span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-warning"</span><span class="tag">&gt;</span><span class="pln">Text warning</span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-success"</span><span class="tag">&gt;</span><span class="pln">Text success</span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-info"</span><span class="tag">&gt;</span><span class="pln">Text info</span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;p&gt;</span><span class="pln">Text </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"badge"</span><span class="tag">&gt;</span><span class="pln">badge</span><span class="tag">&lt;/span&gt;&lt;/p&gt;</span>

Example copy placeholder

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"copy-code-placeholder"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;p&gt;</span><span class="pln">Example copy placeholder</span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Headers

Page Header

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row page-header"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;h1&gt;</span><span class="pln">Page Title</span><span class="tag">&lt;/h1&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Page Header with Link

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row page-header"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;h1&gt;</span><span class="pln">My Offers</span><span class="tag">&lt;/h1&gt;</span><span class="pln"> </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"Link title"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"CSS class for icon if required"</span><span class="pln"> </span><span class="atn">aria-hidden</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> Link</span><span class="tag">&lt;/a&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Tables

Table Layout

Table header Table header
Table data Table data
Table data Table data
Table data Table data
<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table-responsive"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-striped"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;thead&gt;</span><span class="pln"> </span><span class="tag">&lt;tr&gt;</span><span class="pln"> </span><span class="tag">&lt;th&gt;</span><span class="pln">Table header</span><span class="tag">&lt;/th&gt;</span><span class="pln"> </span><span class="tag">&lt;th&gt;</span><span class="pln">Table header</span><span class="tag">&lt;/th&gt;</span><span class="pln"> </span><span class="tag">&lt;/tr&gt;</span><span class="pln"> </span><span class="tag">&lt;/thead&gt;</span><span class="pln"> </span><span class="tag">&lt;tbody&gt;</span><span class="pln"> </span><span class="tag">&lt;tr&gt;</span><span class="pln"> </span><span class="tag">&lt;td&gt;</span><span class="pln">Table data</span><span class="tag">&lt;/td&gt;</span><span class="pln"> </span><span class="tag">&lt;td&gt;</span><span class="pln">Table data</span><span class="tag">&lt;/td&gt;</span><span class="pln"> </span><span class="tag">&lt;/tr&gt;</span><span class="pln"> </span><span class="tag">&lt;tr&gt;</span><span class="pln"> </span><span class="tag">&lt;td&gt;</span><span class="pln">Table data</span><span class="tag">&lt;/td&gt;</span><span class="pln"> </span><span class="tag">&lt;td&gt;</span><span class="pln">Table data</span><span class="tag">&lt;/td&gt;</span><span class="pln"> </span><span class="tag">&lt;/tr&gt;</span><span class="pln"> </span><span class="tag">&lt;tr&gt;</span><span class="pln"> </span><span class="tag">&lt;td&gt;</span><span class="pln">Table data</span><span class="tag">&lt;/td&gt;</span><span class="pln"> </span><span class="tag">&lt;td&gt;</span><span class="pln">Table data</span><span class="tag">&lt;/td&gt;</span><span class="pln"> </span><span class="tag">&lt;/tr&gt;</span><span class="pln"> </span><span class="tag">&lt;/tbody&gt;</span><span class="pln"> </span><span class="tag">&lt;/table&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Table Cell Styles

text-left 100 100 10.00 10.00
text-center 100 100 10.00 10.00
text-right 100.00 100.00 10.00 10.00
100 100 10.00 10.00
10.00 10.00 10.00 10.00

Global table alignment right specially used for tables with figures.

<span class="pln"> </span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table text-right"</span><span class="tag">&gt;&lt;/table&gt;</span>

Changing colours of links on hover

<span class="pln"> </span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table table-hover"</span><span class="tag">&gt;&lt;/table&gt;</span>

Vertical alignment in cells:

<span class="pln"> </span><span class="tag">&lt;td</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"align-middle"</span><span class="tag">&gt;&lt;/td&gt;</span>

For hatch style (diagonal stripes) a hatch class is needed in the table tag besides warning-hatch.

<span class="pln"> </span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table hatch"</span><span class="tag">&gt;&lt;/table&gt;</span> <span class="pln"> </span><span class="tag">&lt;td</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"confirmed"</span><span class="tag">&gt;&lt;/td&gt;</span><span class="pln"> </span><span class="tag">&lt;td</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"declined"</span><span class="tag">&gt;&lt;/td&gt;</span><span class="pln"> </span><span class="tag">&lt;td</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"total"</span><span class="tag">&gt;&lt;/td&gt;</span><span class="pln"> </span><span class="tag">&lt;td</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pending"</span><span class="tag">&gt;&lt;/td&gt;</span><span class="pln"> </span><span class="tag">&lt;td</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"warning-hatch"</span><span class="tag">&gt;&lt;/td&gt;</span>

Filters

Table Filter with Page Selector

Rows per page:

Showing 4401 - 4800 of 13867

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table-filters"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-12 text-right"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;p&gt;</span><span class="pln">Rows per page: </span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;select&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">10</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">25</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">50</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">100</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">400</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;/select&gt;</span><span class="pln"> </span><span class="tag">&lt;p&gt;</span><span class="pln">Showing 4401 - 4800 of 13867 </span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Rows per page:

Showing 4401 - 4800 of 13867

Link
<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table-filters"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-12 text-right"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;p&gt;</span><span class="pln">Rows per page: </span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;select&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">10</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">25</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">50</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">100</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">400</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;/select&gt;</span><span class="pln"> </span><span class="tag">&lt;p&gt;</span><span class="pln">Showing 4401 - 4800 of 13867 </span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fa-regular fa-file-excel"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> Link</span><span class="tag">&lt;/a&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Table Filter with Button

Rows per page:

Showing 4401 - 4800 of 13867

Publishers:

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table-filters"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-12 text-right"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;p&gt;</span><span class="pln">Rows per page: </span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;select&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">10</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">25</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">50</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">100</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">400</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;/select&gt;</span><span class="pln"> </span><span class="tag">&lt;p&gt;</span><span class="pln">Showing 4401 - 4800 of 13867 </span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;p&gt;</span><span class="pln">Publishers: </span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn-filter"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;span&gt;</span><span class="pln">2 Selected</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fa-regular fa-list"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> </span><span class="tag">&lt;/button&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Table Filter with Dropdown

Rows per page:

Showing 4401 - 4800 of 13867

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"table-filters"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-12 text-right"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;p&gt;</span><span class="pln">Rows per page: </span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;select&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">10</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">25</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">50</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">100</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">400</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;/select&gt;</span><span class="pln"> </span><span class="tag">&lt;p&gt;</span><span class="pln">Showing 4401 - 4800 of 13867 </span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"option-menu"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">Options</span><span class="tag">&lt;/a&gt;</span><span class="pln"> </span><span class="tag">&lt;ul&gt;</span><span class="pln"> </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">Option 1</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln"> </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">Option 2</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln"> </span><span class="tag">&lt;/ul&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Form Elements

Buttons

Default

<span class="pln"> </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary"</span><span class="tag">&gt;</span><span class="pln">Primary Action</span><span class="tag">&lt;/button&gt;</span><span class="pln"> </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-secondary"</span><span class="tag">&gt;</span><span class="pln">Secondary Action</span><span class="tag">&lt;/button&gt;</span><span class="pln"> </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-tertiary"</span><span class="tag">&gt;</span><span class="pln">Tertiary Action</span><span class="tag">&lt;/button&gt;</span> <span class="pln"> </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-disabled"</span><span class="tag">&gt;</span><span class="pln">Primary Disabled</span><span class="tag">&lt;/button&gt;</span><span class="pln"> </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-secondary"</span><span class="pln"> </span><span class="atn">disabled</span><span class="tag">&gt;</span><span class="pln">Secondary Disabled</span><span class="tag">&lt;/button&gt;</span><span class="pln"> </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-tertiary"</span><span class="pln"> </span><span class="atn">disabled</span><span class="tag">&gt;</span><span class="pln">Tertiary Disabled</span><span class="tag">&lt;/button&gt;</span>

Small

<span class="pln"> </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary btn-sm"</span><span class="tag">&gt;</span><span class="pln">Primary Small</span><span class="tag">&lt;/button&gt;</span><span class="pln"> </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-secondary btn-sm"</span><span class="tag">&gt;</span><span class="pln">Secondary Small</span><span class="tag">&lt;/button&gt;</span>

Add Button

<span class="pln"> </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-add"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fa-regular fa-plus"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln">Add Button </span><span class="tag">&lt;/button&gt;</span><span class="pln"> </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-add-disabled"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fa-regular fa-plus"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln">Add Button Disabled </span><span class="tag">&lt;/button&gt;</span>

Add Button with Caret

<span class="pln"> </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-add btn-caret"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fa-regular fa-plus"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> Add button with caret </span><span class="tag">&lt;/button&gt;</span>

Button Group Toggle

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn-group"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"buttons"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default active"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"options"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"option1"</span><span class="pln"> </span><span class="atn">autocomplete</span><span class="pun">=</span><span class="atv">"off"</span><span class="pln"> </span><span class="atn">checked</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fa-regular fa-check"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> Approve </span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"options"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"option2"</span><span class="pln"> </span><span class="atn">autocomplete</span><span class="pun">=</span><span class="atv">"off"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fa-regular fa-pencil"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> Suggest Changes </span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"options"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"option3"</span><span class="pln"> </span><span class="atn">autocomplete</span><span class="pun">=</span><span class="atv">"off"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fa-regular fa-ban"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> Reject </span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Chips

Default chips

Chip muted Chip highlighted Chip outlined <span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"chip-sm chip-muted"</span><span class="tag">&gt;</span><span class="pln">Chip muted</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"chip-sm chip-highlighted"</span><span class="tag">&gt;</span><span class="pln">Chip highlighted</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"chip-sm chip-outlined"</span><span class="tag">&gt;</span><span class="pln">Chip outlined</span><span class="tag">&lt;/span&gt;</span>

Status chips

Chip info Chip success Chip warning Chip danger <span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"chip-sm chip-info"</span><span class="tag">&gt;</span><span class="pln">Chip info</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"chip-sm chip-success"</span><span class="tag">&gt;</span><span class="pln">Chip success</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"chip-sm chip-warning"</span><span class="tag">&gt;</span><span class="pln">Chip warning</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"chip-sm chip-danger"</span><span class="tag">&gt;</span><span class="pln">Chip danger</span><span class="tag">&lt;/span&gt;</span>

Form Layout

All form elements should be generally wrapped in a column 8 div, specially in vertical forms in order to limit the input fields widths.

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8""&gt;</span><span class="pln"> </span><span class="tag">&lt;form</span><span class="pln"> </span><span class="atn">action</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-horizontal"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln">Form Label</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/form&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

File Upload

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln">File upload</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"Choose file to upload"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"file"</span><span class="pln"> </span><span class="atn">files</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"file"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"file"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-file"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"file"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group-addon btn-browse"</span><span class="tag">&gt;</span><span class="pln">Browse</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-light text-right"</span><span class="tag">&gt;</span><span class="pln">Maximum size 500kb.</span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Inline Radio Buttons

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln"> Inline Radio Buttons </span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio-group col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio-inline col-sm-3"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"inlineRadioOptions"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"yes"</span><span class="tag">&gt;</span><span class="pln">Yes </span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio-inline col-sm-4"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"inlineRadioOptions"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"no"</span><span class="tag">&gt;</span><span class="pln">No </span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Stacked Radio Buttons

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln"> Stacked Radio Buttons </span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"option1"</span><span class="tag">&gt;</span><span class="pln">Option one </span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"option2"</span><span class="tag">&gt;</span><span class="pln">Option two </span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"option2"</span><span class="tag">&gt;</span><span class="pln">Option three </span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Checkbox

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln">Checkboxes</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Inline Checkboxes

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln"> Inline Checkboxes </span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox-group col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox-inline col-sm-3"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln"> Checkbox 1 </span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox-inline col-sm-4"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln"> Checkbox 2 </span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Stacked Checkboxes

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln">Checkbox</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label&gt;&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln"> Checkbox 1</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label&gt;&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln">Checkbox 2</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox disabled"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label&gt;&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">disabled</span><span class="tag">&gt;</span><span class="pln">Disabled Checkbox</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Text Field

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln">Text Feild</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Text Area

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln">Text area</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;textarea</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">cols</span><span class="pun">=</span><span class="atv">"30"</span><span class="pln"> </span><span class="atn">rows</span><span class="pun">=</span><span class="atv">"10"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="tag">&gt;&lt;/textarea&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Select

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln">Select</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;select</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">One two three</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">Three four five</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">Six seven eight</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;/select&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Select2 Angular

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln">Select</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"select2-angular"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-select-multiple form-control"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Input with prepend

Prepend label
<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln">Label</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group-prepend"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group-text"</span><span class="tag">&gt;</span><span class="pln">Prepend label</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Input with append

Append label
<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln">Label</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group-append"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group-text"</span><span class="tag">&gt;</span><span class="pln">Append label</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Input with Checkbox

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln">Label</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group-prepend"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group-text"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">aria-label</span><span class="pun">=</span><span class="atv">"Checkbox for following text input"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Input with Select

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln">Label</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group-prepend"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;select</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">Option 1</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">Option 2</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">Option 3</span><span class="tag">&lt;/option&gt;</span><span class="pln"> </span><span class="tag">&lt;/select&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Grid selection

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln">Select</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox-group col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"check-button"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"00:00"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;span&gt;</span><span class="pln">00:00</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;label&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"00:00"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;span&gt;</span><span class="pln">01:00</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;label&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"00:00"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;span&gt;</span><span class="pln">03:00</span><span class="tag">&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Horizontal Form

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-horizontal"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-4"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label"</span><span class="tag">&gt;</span><span class="pln">Text field one</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-4"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label"</span><span class="tag">&gt;</span><span class="pln">Text field two</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-4"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label"</span><span class="tag">&gt;</span><span class="pln">Text field three</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Disabled Form Group

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group has-disabled"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln">Disabled Form Group</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"This field is disabled"</span><span class="pln"> </span><span class="atn">disabled</span><span class="pun">=</span><span class="atv">"disabled"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Form Validation Error

This is an error message.

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group has-error"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln">Error Message</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln"> </span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"help-block"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fa-regular fa-alert"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> This is an error message.</span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Form Validation Warning

This is an warning message.

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group has-warning"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln">Warning Message</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln"> </span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"help-block"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fa-regular fa-alert"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> This is an warning message.</span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

On Off Switch

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln">On Off Switch</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"onoffswitch"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"onoffswitch"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"onoffswitch-checkbox"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myonoffswitch"</span><span class="pln"> </span><span class="atn">checked</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"onoffswitch-label"</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"myonoffswitch"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"onoffswitch-inner"</span><span class="tag">&gt;&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"onoffswitch-switch"</span><span class="tag">&gt;&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Feedback

Messages

Info message

<span class="pln"> </span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-info"</span><span class="tag">&gt;</span><span class="pln">Info message</span><span class="tag">&lt;/p&gt;</span>

Warning message

<span class="pln"> </span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-warning"</span><span class="tag">&gt;</span><span class="pln">Warning message</span><span class="tag">&lt;/p&gt;</span>

Error message

<span class="pln"> </span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-danger"</span><span class="tag">&gt;</span><span class="pln">Error message</span><span class="tag">&lt;/p&gt;</span>

Success message

<span class="pln"> </span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-success"</span><span class="tag">&gt;</span><span class="pln">Success message</span><span class="tag">&lt;/p&gt;</span>

Form Warning Message

This is a warning information inside form group

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln"> Form field with warning message </span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-warning"</span><span class="tag">&gt;</span><span class="pln">Warning information inside form group</span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Form Info Message

This is an important information inside form group

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln"> Form field with information message</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"alert alert-warning"</span><span class="tag">&gt;</span><span class="pln">This is an warning information inside form group</span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Character Limit Counter

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-group"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"control-label col-sm-4"</span><span class="tag">&gt;</span><span class="pln">Label</span><span class="tag">&lt;/label&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-8"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;textarea</span><span class="pln"> </span><span class="atn">maxlength</span><span class="pun">=</span><span class="atv">"25"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control has-counter"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"Placeholder description"</span><span class="tag">&gt;&lt;/textarea&gt;</span><span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"character-counter"</span><span class="tag">&gt;&lt;/span&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Pop Up Notifications

Error Alert

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal modal-alert fade"</span><span class="pln"> </span><span class="atn">tabindex</span><span class="pun">=</span><span class="atv">"-1"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"dialog"</span><span class="pln"> </span><span class="atn">aria-labelledby</span><span class="pun">=</span><span class="atv">"exampleErrorPopup"</span><span class="pln"> </span><span class="atn">aria-hidden</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-dialog"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"document"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-content alert-danger"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-header"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;h5</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-title"</span><span class="tag">&gt;</span><span class="pln">Error alert</span><span class="tag">&lt;/h5&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-body col-xs-12"</span><span class="tag">&gt;</span><span class="pln"> ... </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-footer"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default"</span><span class="pln"> </span><span class="atn">data-dismiss</span><span class="pun">=</span><span class="atv">"modal"</span><span class="tag">&gt;</span><span class="pln">OK</span><span class="tag">&lt;/button&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Info Alert

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal modal-alert fade"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"alert-info"</span><span class="pln"> </span><span class="atn">tabindex</span><span class="pun">=</span><span class="atv">"-1"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"dialog"</span><span class="pln"> </span><span class="atn">aria-labelledby</span><span class="pun">=</span><span class="atv">"exampleAlertPopup"</span><span class="pln"> </span><span class="atn">aria-hidden</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-dialog"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"document"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-content alert-info"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-header"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;h5</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-title"</span><span class="tag">&gt;</span><span class="pln">Info alert title</span><span class="tag">&lt;/h5&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-body col-xs-12"</span><span class="tag">&gt;</span><span class="pln"> ... </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-footer"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default"</span><span class="pln"> </span><span class="atn">data-dismiss</span><span class="pun">=</span><span class="atv">"modal"</span><span class="tag">&gt;</span><span class="pln">OK</span><span class="tag">&lt;/button&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Success Alert

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal modal-alert fade"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"alert-success"</span><span class="pln"> </span><span class="atn">tabindex</span><span class="pun">=</span><span class="atv">"-1"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"dialog"</span><span class="pln"> </span><span class="atn">aria-labelledby</span><span class="pun">=</span><span class="atv">"exampleAlertPopup"</span><span class="pln"> </span><span class="atn">aria-hidden</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-dialog"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"document"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-content alert-info"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-header"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;h5</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-title"</span><span class="tag">&gt;</span><span class="pln">Warning pop up</span><span class="tag">&lt;/h5&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-body col-xs-12"</span><span class="tag">&gt;</span><span class="pln"> ... </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-footer"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default"</span><span class="pln"> </span><span class="atn">data-dismiss</span><span class="pun">=</span><span class="atv">"modal"</span><span class="tag">&gt;</span><span class="pln">OK</span><span class="tag">&lt;/button&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Warning Alert

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal modal-alert fade"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"alert-warning"</span><span class="pln"> </span><span class="atn">tabindex</span><span class="pun">=</span><span class="atv">"-1"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"dialog"</span><span class="pln"> </span><span class="atn">aria-labelledby</span><span class="pun">=</span><span class="atv">"exampleAlertPopup"</span><span class="pln"> </span><span class="atn">aria-hidden</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-dialog"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"document"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-content alert-warning"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-header"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;h5</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-title"</span><span class="tag">&gt;</span><span class="pln">Warning alert title</span><span class="tag">&lt;/h5&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-body col-xs-12"</span><span class="tag">&gt;</span><span class="pln"> ... </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-footer"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default"</span><span class="pln"> </span><span class="atn">data-dismiss</span><span class="pun">=</span><span class="atv">"modal"</span><span class="tag">&gt;</span><span class="pln">OK</span><span class="tag">&lt;/button&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Progress Bar

The following example corresponds to a customised version of jQuery progressbar widget

Uploading...

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-progressbar-wrapper"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-progressbar"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"ui-progressbar-value"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;p&gt;</span><span class="pln">Uploading...</span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Lists

List Group with Icons

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-sm-4"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group list-group-icons"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fa-regular fa-check-square"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> </span><span class="tag">&lt;p&gt;</span><span class="pln">You have 6 commissions to validate</span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;/a&gt;</span><span class="pln"> </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fa-regular fa-exchange"</span><span class="pln"> </span><span class="atn">aria-hidden</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> </span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon"</span><span class="tag">&gt;</span><span class="pln">You have 2 pending transaction queries</span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;/a&gt;</span><span class="pln"> </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-group-item"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fa-regular fa-user"</span><span class="pln"> </span><span class="atn">aria-hidden</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> </span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon"</span><span class="tag">&gt;</span><span class="pln">You have 1 publisher to approve</span><span class="tag">&lt;/p&gt;</span><span class="pln"> </span><span class="tag">&lt;/a&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Progress List

  • We could not retrieve this file when we tried to download it.
  • There are 11 products with no category mapping.
  • There are no failed products.
<span class="pln"> </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"list-progress"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-danger"</span><span class="tag">&gt;</span><span class="pln"> We could not retrieve this file when we tried to download it. </span><span class="tag">&lt;/li&gt;</span><span class="pln"> </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-warning"</span><span class="tag">&gt;</span><span class="pln"> There are 11 products with no category mapping. </span><span class="tag">&lt;/li&gt;</span><span class="pln"> </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-success"</span><span class="tag">&gt;</span><span class="pln"> There are no failed products. </span><span class="tag">&lt;/li&gt;</span><span class="pln"> </span><span class="tag">&lt;/ul&gt;</span>

Basic Unordered List

Example of an unordered list that is styled using our bullet class.

<span class="pln"> </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"bullet"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;li&gt;</span><span class="pln">Option 1</span><span class="tag">&lt;/li&gt;</span><span class="pln"> </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">target</span><span class="pun">=</span><span class="atv">"_blank"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"Option 2"</span><span class="tag">&gt;</span><span class="pln">Option 2</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln"> </span><span class="tag">&lt;/ul&gt;</span>

Icons

UI icons come from FontAwesome, please use non-circle or outline versions where possible for styling consistency.

<span class="pln"> </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fa-regular fa-info-circle"</span><span class="pln"> </span><span class="atn">aria-hidden</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;&lt;/i&gt;</span>

Common Icons

fa-times

fa-plus

fa-pencil

fa-cog

fa-search

fa-check

fa-circle

fa-info-circle

fa-arrow-up

fa-arrow-down

fa-sort-up

fa-sort-desc

fa-arrows-h

fa-exchange

fa-angle-up

fa-angle-down

fa-angle-left

fa-angle-right

fa-clock

fa-download

fa-upload

fa-file

fa-file-excel

fa-clipboard

fa-bell

fa-envelope

fa-calendar

fa-save

fa-folder

fa-photo

fa-table

fa-line-chart

fa-pie-chart

fa-refresh

fa-sign-out

fa-home

fa-columns

fa-tags

fa-eye-slash

fa-scissors

fa-check-square

fa-user-circle

fa-user

fa-list

fa-newspaper

fa-mobile-phone

fa-desktop

fa-tablet

fa-hand-o-up

fa-handshake

fa-sitemap

fa-life-bouy

Flag Icons

<span class="pln"> </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"sprite_flags flag_de"</span><span class="tag">&gt;&lt;/span&gt;</span>

Argentina (AR)

Australia (AU)

Austria (AT)

Belgium (BE)

Brazil (BR)

Bulgaria (BU)

Canada (CA)

Chile (CL)

China (CN)

Colombia (CO)

Croatia (HR)

Czech Republic (CZ)

Denmark (DK)

Finland (FI)

France (FR)

Germany (DE)

Greece (GR)

Hungary (HU)

India (IN)

Ireland (IE)

Italy (IT)

Japan (JP)

Latvia (LV)

Lithuania (LT)

Mexico (MX)

Netherlands (NL)

New Zealand (NZ)

Norway (NO)

Peru (PE)

Poland (PO)

Portugal (PO)

Romania (RO)

Russia (RU)

Singapore (SG)

Slovakia (SK)

Slovenia (SI)

South Africa (ZA)

Spain (ES)

Sweden (SW)

Switzerland

Taiwan (TW)

Turkey (TR)

Ukraine (UA)

United Arab Emirates (AE)

United Kingdom (GB)

United States of America (US)

Circle Icon Sizes

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"circle-icon-sm"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fa-regular fa-shopping-cart"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"circle-icon-md"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fa-regular fa-shopping-cart"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"circle-icon-lg"</span><span class="tag">&gt;</span><span class="pln"> </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fa-regular fa-shopping-cart"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> </span><span class="tag">&lt;/div&gt;</span>

Circle Icon Colours

<span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"circle-icon-sm"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"circle-icon-sm circle-cyan"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"circle-icon-sm circle-yellow"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"circle-icon-sm circle-purple"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"circle-icon-sm circle-aqua"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span><span class="pln"> </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"circle-icon-sm circle-red"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/div&gt;</span>

Stats/Data

UI graph colours are used at 80% opacity RGB, for HEX format see below.

<span class="pln"> colors</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="str">'rgba(0,154,255,0.8)'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// #419bf9</span><span class="pln"> </span><span class="str">'rgba(0,198,55,0.8)'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// #00c637</span><span class="pln"> </span><span class="str">'rgba(68,86,213,0.8)'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// #4756d5</span><span class="pln"> </span><span class="str">'rgba(250,180,24,0.8)'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// #fab418</span><span class="pln"> </span><span class="str">'rgba(222,8,51,0.8)'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// #de0833</span><span class="pln"> </span><span class="str">'rgba(255,102,0,0.8)'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// #ff6600</span><span class="pln"> </span><span class="str">'rgba(32,174,188,0.8)'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// #20aebc</span><span class="pln"> </span><span class="str">'rgba(68,41,147,0.8)'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// #442993</span><span class="pln"> </span><span class="str">'rgba(0,150,75,0.8)'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// #00964b</span><span class="pln"> </span><span class="str">'rgba(232,53,146,0.8)'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// #ea2e92</span><span class="pln"> </span><span class="str">'rgba(100,218,255,0.8)'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// #65daff</span><span class="pln"> </span><span class="str">'rgba(187,123,65,0.8)'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// #bb7b41</span><span class="pln"> </span><span class="str">'rgba(155,155,155,0.8)'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// #999999</span><span class="pln"> </span><span class="str">'rgba(0,68,139,0.8)'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// #00568b</span><span class="pln"> </span><span class="str">'rgba(35,40,44,0.8)'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// #23282c</span><span class="pln"> </span><span class="str">'rgba(155,145,55,0.8)'</span><span class="pln"> </span><span class="com">// #999933</span><span class="pln"> </span><span class="pun">],</span><span class="pln"> </span>

Components

<span class="pln">
</span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"modal"</span><span class="pln"> </span><span class="atn">data-target</span><span class="pun">=</span><span class="atv">"#exampleModal"</span><span class="tag">&gt;</span><span class="pln">
    Launch demo modal
</span><span class="tag">&lt;/button&gt;</span><span class="pln">

</span><span class="com">&lt;!-- Modal --&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal fade"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleModal"</span><span class="pln"> </span><span class="atn">tabindex</span><span class="pun">=</span><span class="atv">"-1"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"dialog"</span><span class="pln"> </span><span class="atn">aria-labelledby</span><span class="pun">=</span><span class="atv">"exampleModalLabel"</span><span class="pln"> </span><span class="atn">aria-hidden</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-dialog"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"document"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-content"</span><span class="tag">&gt;</span><span class="pln">
            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-header"</span><span class="tag">&gt;</span><span class="pln">
                </span><span class="tag">&lt;h5</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-title"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"exampleModalLabel"</span><span class="tag">&gt;</span><span class="pln">Modal title</span><span class="tag">&lt;/h5&gt;</span><span class="pln">
                </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"close"</span><span class="pln"> </span><span class="atn">data-dismiss</span><span class="pun">=</span><span class="atv">"modal"</span><span class="pln"> </span><span class="atn">aria-label</span><span class="pun">=</span><span class="atv">"Close"</span><span class="tag">&gt;</span><span class="pln">
                    </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fa-regular fa-times"</span><span class="pln"> </span><span class="atn">aria-hidden</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln">
                </span><span class="tag">&lt;/button&gt;</span><span class="pln">
            </span><span class="tag">&lt;/div&gt;</span><span class="pln">
            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-body"</span><span class="tag">&gt;</span><span class="pln">
                ...
            </span><span class="tag">&lt;/div&gt;</span><span class="pln">
            </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-footer"</span><span class="tag">&gt;</span><span class="pln">
                </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-link"</span><span class="pln"> </span><span class="atn">data-dismiss</span><span class="pun">=</span><span class="atv">"modal"</span><span class="tag">&gt;</span><span class="pln">Cancel</span><span class="tag">&lt;/button&gt;</span><span class="pln">
                </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default"</span><span class="tag">&gt;</span><span class="pln">Save</span><span class="tag">&lt;/button&gt;</span><span class="pln">
            </span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span>
-

Tooltip

Tooltip "top-right"
Short description with external link. Vestibulum eros leo, hendrerit non bibendum sit amet, efficitur sit amet tortor.

Tooltip "top"
Short description with external link Vestibulum eros leo, hendrerit non bibendum sit amet, efficitur sit amet tortor.

Tooltip "bottom"
Short description with external link Vestibulum eros leo, hendrerit non bibendum sit amet, efficitur sit amet tortor.

Tooltip "bottom-left"
Short description with external link Vestibulum eros leo, hendrerit non bibendum sit amet, efficitur sit amet tortor.

<span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tooltip-hover"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"fa-regular fa-info-circle"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tooltip top-right"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tooltip-arrow"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tooltip-inner"</span><span class="tag">&gt;</span><span class="pln">
            Short description with </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">target</span><span class="pun">=</span><span class="atv">"_blank"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">external link</span><span class="tag">&lt;/a&gt;</span><span class="pln">.
            Vestibulum eros leo, hendrerit non bibendum sit amet, efficitur sit amet tortor.
        </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span>
Short description with external link. Vestibulum eros leo, hendrerit non bibendum sit amet, efficitur sit amet tortor.
<span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tooltip in right"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tooltip-arrow"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tooltip-inner"</span><span class="tag">&gt;</span><span class="pln">Description.</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span>

Speech Bubble

<span class="pln">
</span><span class="tag">&lt;blockquote</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"speech-bubble"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"speech-bubble-arrow left"</span><span class="tag">&gt;&lt;/span&gt;</span><span class="pln">
    </span><span class="tag">&lt;p&gt;</span><span class="pln">Message</span><span class="tag">&lt;/p&gt;</span><span class="pln">
</span><span class="tag">&lt;/blockquote&gt;</span>

Left hand side speech bubble

Right hand side speech bubble

Helper Classes

Text

<span class="pln"> </span><span class="pun">.</span><span class="pln">text</span><span class="pun">-</span><span class="pln">left </span><span class="pun">.</span><span class="pln">text</span><span class="pun">-</span><span class="pln">right </span><span class="pun">.</span><span class="pln">text</span><span class="pun">-</span><span class="pln">center </span><span class="pun">.</span><span class="pln">align</span><span class="pun">-</span><span class="pln">middle </span><span class="com">// vertical alignment</span><span class="pln"> </span><span class="pun">.</span><span class="pln">text</span><span class="pun">-</span><span class="pln">normal </span><span class="com">// font-weight normal</span><span class="pln"> </span><span class="pun">.</span><span class="pln">text</span><span class="pun">-</span><span class="pln">nowrap </span><span class="pun">.</span><span class="pln">text</span><span class="pun">-</span><span class="pln">wrap </span><span class="pun">.</span><span class="pln">text</span><span class="pun">-</span><span class="kwd">break</span><span class="pln"> </span><span class="com">// use only to break long strings or URLs</span><span class="pln"> </span><span class="pun">.</span><span class="pln">text</span><span class="pun">-</span><span class="pln">truncate</span>

Margin

<span class="pln"> </span><span class="pun">.</span><span class="pln">mt</span><span class="pun">-</span><span class="lit">0</span><span class="pln"> </span><span class="com">// remove top margin</span><span class="pln"> </span><span class="pun">.</span><span class="pln">mt</span><span class="pun">-</span><span class="pln">xs </span><span class="com">// extra small top margin</span><span class="pln"> </span><span class="pun">.</span><span class="pln">mt</span><span class="pun">-</span><span class="pln">sm </span><span class="com">// small top margin</span><span class="pln"> </span><span class="pun">.</span><span class="pln">mt</span><span class="pun">-</span><span class="pln">md </span><span class="com">// medium top margin</span><span class="pln"> </span><span class="pun">.</span><span class="pln">mt</span><span class="pun">-</span><span class="pln">lg </span><span class="com">// large top margin</span><span class="pln"> </span><span class="pun">.</span><span class="pln">mt</span><span class="pun">-</span><span class="pln">neg </span><span class="com">// negative top margin</span><span class="pln"> </span><span class="pun">.</span><span class="pln">mt</span><span class="pun">-</span><span class="pln">neg</span><span class="pun">-</span><span class="pln">lg </span><span class="com">// negative top margin large</span><span class="pln"> </span><span class="pun">.</span><span class="pln">mr</span><span class="pun">-</span><span class="lit">0</span><span class="pln"> </span><span class="com">// remove right margin</span><span class="pln"> </span><span class="pun">.</span><span class="pln">mr</span><span class="pun">-</span><span class="pln">neg </span><span class="com">// negative right margin</span><span class="pln"> </span><span class="pun">.</span><span class="pln">mb</span><span class="pun">-</span><span class="lit">0</span><span class="pln"> </span><span class="com">// remove bottom margin</span><span class="pln"> </span><span class="pun">.</span><span class="pln">mb</span><span class="pun">-</span><span class="pln">xs </span><span class="com">// small bottom margin</span><span class="pln"> </span><span class="pun">.</span><span class="pln">mb</span><span class="pun">-</span><span class="pln">md </span><span class="com">// medium bottom margin</span><span class="pln"> </span><span class="pun">.</span><span class="pln">mb</span><span class="pun">-</span><span class="pln">lg </span><span class="com">// large bottom margin</span><span class="pln"> </span><span class="pun">.</span><span class="pln">ml</span><span class="pun">-</span><span class="lit">0</span><span class="pln"> </span><span class="com">// remove left margin</span><span class="pln"> </span><span class="pun">.</span><span class="pln">ml</span><span class="pun">-</span><span class="pln">md </span><span class="com">// medium left margin</span>

Padding

<span class="pln"> </span><span class="pun">.</span><span class="pln">pt</span><span class="pun">-</span><span class="lit">0</span><span class="pln"> </span><span class="com">// remove top padding</span><span class="pln"> </span><span class="pun">.</span><span class="pln">pr</span><span class="pun">-</span><span class="lit">0</span><span class="pln"> </span><span class="com">// remove right padding</span><span class="pln"> </span><span class="pun">.</span><span class="pln">pb</span><span class="pun">-</span><span class="lit">0</span><span class="pln"> </span><span class="com">// remove bottom padding</span><span class="pln"> </span><span class="pun">.</span><span class="pln">pl</span><span class="pun">-</span><span class="lit">0</span><span class="pln"> </span><span class="com">// remove left padding</span>

Border

<span class="pln"> </span><span class="pun">.</span><span class="pln">borderless </span><span class="pun">.</span><span class="pln">border</span><span class="pun">-</span><span class="pln">top</span><span class="pun">-</span><span class="kwd">null</span><span class="pln"> </span><span class="pun">.</span><span class="pln">border</span><span class="pun">-</span><span class="pln">top </span><span class="pun">.</span><span class="pln">border</span><span class="pun">-</span><span class="pln">bottom</span>

Floats

<span class="pln"> </span><span class="pun">.</span><span class="pln">pull</span><span class="pun">-</span><span class="pln">right </span><span class="pun">.</span><span class="pln">pull</span><span class="pun">-</span><span class="pln">left</span>

Overflow

<span class="pln"> </span><span class="pun">.</span><span class="pln">overflow</span><span class="pun">-</span><span class="kwd">auto</span>

Hide / Show

<span class="pln"> </span><span class="pun">.</span><span class="pln">hidden </span><span class="com">// hide forced</span><span class="pln"> </span><span class="pun">.</span><span class="pln">hidden</span><span class="pun">-</span><span class="pln">normal </span><span class="com">// hide normal</span><span class="pln"> </span><span class="pun">.</span><span class="pln">display</span><span class="pun">-</span><span class="pln">block</span>

Colours

<span class="pln"> </span><span class="pun">.</span><span class="pln">brand</span><span class="pun">-</span><span class="pln">orange </span>

Other

<span class="pln"> </span><span class="pun">.</span><span class="pln">bullet </span><span class="com">// basic styling for lists</span>