ib-common.css

HTML Styles

Headings

Heading 1

Copy 
<h1>...</h1>

Heading 2

Copy 
<h2>...</h2>

Heading 3

Copy 
<h3>...</h3>

Heading 4

Copy 
<h4>...</h4>
Heading 5
Copy 
<h5>...</h5>
Heading 6
Copy 
<h6>...</h6>

Heading 1 Link

Copy 
										
										<h1>

										<a href="#" target="self">...</a>

										</h1>

Heading 2 Link

Copy 
										
										<h2>

										<a href="#" target="self">...</a>

										</h2>

Heading 3 Link

Copy 
										
										<h3>

										<a href="#" target="self">...</a>

										</h3>

Heading 4 Link

Copy 
										
										<h4>

										<a href="#" target="self">...</a>

										</h4>
Heading 5 Link
Copy 
										
										<h5>

										<a href="#" target="self">...</a>

										</h5>
Heading 6 Link
Copy 
										
										<h6>

										<a href="#" target="self">...</a>

										</h6>

Paragraphs

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

Copy 
<p>...</p>

Lists

  • Unordered List
  • Unordered List
  • Unordered List
Copy 
										
										<ul>

										<li>...</li>

										<li>...</li>

										<li>...</li>

										</ul>

  • Unordered Paralist
  • Unordered Paralist
  • Unordered Paralist
Copy 
										
										<ul class="paralist">

										<li>...</li>

										<li>...</li>

										<li>...</li>

										</ul>

  • Unordered Check List
  • Unordered Check List
  • Unordered Check List
Copy 
										
										<ul class="checklist">

										<li>...</li>

										<li>...</li>

										<li>...</li>

										</ul>

  1. Ordered List
  2. Ordered List
  3. Ordered List
Copy 
										
										<ol>

										<li>...</li>

										<li>...</li>

										<li>...</li>

										</ol>

  1. Ordered Paralist
  2. Ordered Paralist
  3. Ordered Paralist
Copy 
										
										<ol class="paralist">

										<li>...</li>

										<li>...</li>

										<li>...</li>

										</ol>

  1. Ordered Check List
  2. Ordered Check List
  3. Ordered Check List
Copy 
										
										<ol class="checklist">

										<li>...</li>

										<li>...</li>

										<li>...</li>

										</ol>

Links

linkarrowup
Copy 
										
										<a href="#" target="self" class="linkarrowup">...</a>
linkarrowright
Copy 
										
										<a href="#" target="self" class="linkarrowright">...</a>
linkarrowdown
Copy 
										
										<a href="#" target="self" class="linkarrowbottom">...</a>
linkarrowleft
Copy 
										
										<a href="#" target="self" class="linkarrowleft">...</a>
linkarrow
Copy 
										
										<a href="#" target="self" class="linkarrow">...</a>
linkexternal
Copy 
										
										<a href="#" target="self" class="linkarrowexternal">...</a>

Text Colors

text-danger

Copy 
<p class="text-danger">...</p>

text-info

Copy 
<p class="text-info">...</p>

text-success

Copy 
<p class="text-success">...</p>

text-warning

Copy 
<p class="text-warning">...</p>

text-dark-red

Copy 
<p class="text-dark-red">...</p>

text-red

Copy 
<p class="text-red">...</p>

text-orange

Copy 
<p class="text-orange">...</p>

text-green

Copy 
<p class="text-green">...</p>

text-blue

Copy 
<p class="text-blue">...</p>

text-dark-blue

Copy 
<p class="text-dark-blue">...</p>

text-purple

Copy 
<p class="text-purple">...</p>

text-black

Copy 
<p class="text-black">...</p>

text-dark-gray

Copy 
<p class="text-dark-gray">...</p>

text-gray

Copy 
<p class="text-gray">...</p>

text-white

Copy 
<p class="text-white">...</p>

Text Sizes

text-small

Copy 
<p class="text-small">...</p>

text-large

Copy 
<p class="text-large">...</p>

Text Styles

text-light

Copy 
<p class="text-light">...</p>

text-normal

Copy 
<p class="text-normal">...</p>

text-bold

Copy 
<p class="text-bold">...</p>

text-selected

Copy 
<p class="text-selected">...</p>

text-disabled

Copy 
<p class="text-disabled">...</p>

text-secondary

Copy 
<p class="text-secondary">...</p>

text-price

Copy 
<p class="text-price">...</p>

subtitle

Copy 
<p class="subtitle">...</p>

subtitle w/ right aligned text-link text-link

Copy 
<p class="subtitle">...

									<span class="text-link">

									<a href="#">text-link</a>

									</span>

									</p>

AAPLStock Symbol and Description

Copy 
<p>

									<span class="symbol">AAPL</span>

									<span class="symbol-description">...</span>

									</p>

Text Containers

Instructions

Instructions

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

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

Copy 
										
										<div class="instructions">

										<p><strong>Instructions</strong></p>

										<p>...</p>

										</div>

Instructions with Heading

Instructions

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

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

Copy 
										
										<div class="instructions no-padding">

										<div class="instructions-heading"><i class="fa fa-info-circle"></i>Instructions</div>

										<div class="instructions-body">

										<p><strong>Instructions</strong></p>

										<p>...</p>

										</div>

										</div>

Notes

Notes

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

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

Copy 
										
										<div class="notes">

										<p><strong>Notes</strong></p>

										<p>...</p>

										</div>

Agreement

3007 | 03/10/2015

Interactive Brokers Agreement

AGREEMENT GOES HERE




Copy 
										
										<div class="agreement">

										<p class="text-small">ID | Date</p>

										<h5 class="text-center">Agreement Title</h5>

										<br>

										<p>Agreement starts here...</p>

										</div>

Well

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

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

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

Copy 
										
										<div class="well">

										<p>...</p>

										</div>

Buttons


Button Sizes

btn btn-xs btn-default

Copy 
<a href="#" class="btn btn-xs btn-default">...</a>

btn btn-sm btn-default

Copy 
<a href="#" class="btn btn-sm btn-default">...</a>

btn btn-default

Copy 
<a href="#" class="btn btn-default">...</a>

btn btn-lg btn-default

Copy 
<a href="#" class="btn btn-lg btn-default">...</a>

Button Types

btn btn-round btn-default

Copy 
<a href="#" class="btn btn-round btn-default">...</a>

Button Colors

btn btn-default

Copy 
<a href="#" class="btn btn-default">...</a>

btn btn-primary

Copy 
<a href="#" class="btn btn-primary">...</a>

btn btn-success

Copy 
<a href="#" class="btn btn-success">...</a>

btn btn-info

Copy 
<a href="#" class="btn btn-info">...</a>

btn btn-warning

Copy 
<a href="#" class="btn btn-warning">...</a>

btn btn-danger

Copy 
<a href="#" class="btn btn-danger">...</a>

btn btn-apply

Copy 
<a href="#" class="btn btn-apply">...</a>

btn btn-black

Copy 
<a href="#" class="btn btn-black">...</a>

btn btn-disabled

Copy 
<a href="#" class="btn btn-disabled">...</a>

Button Selectors

btn btn-default

btn btn-default disabled

btn btn-default active

btn btn-default active disabled


Copy 
<div class="btn-selectors">

									<p><a href="#" class="btn btn-default">...</a></p>

									<p><a href="#" class="btn btn-default disabled">...</a></p>

									<p><a href="#" class="btn btn-default active">...</a></p>

									<p><a href="#" class="btn btn-default active disabled">...</a></p>

									</div>

Star Rating

Copy 
<div class="rating">

									<input type="checkbox" id="st1" value="1" />

									<label for="st1"></label>

									<input type="checkbox" id="st2" value="2" />

									<label for="st2"></label>

									<input type="checkbox" id="st3" value="3" />

									<label for="st3"></label>

									<input type="checkbox" id="st4" value="4" />

									<label for="st4"></label>

									<input type="checkbox" id="st5" value="5" />

									<label for="st5"></label>

									</div>

Image Hover

Copy 
<a href="#" class="img-hover">

									<img src="/images/2015/global_icon_northamerica.png" alt="North America" border="0" />

									</a>

Copy 
<a href="#" class="img-hover">

									<img src="/images/2015/global_icon_europe.png" alt="Europe" border="0" />

									</a>

Copy 
<a href="#" class="img-hover">

									<img src="/images/2015/global_icon_asiapacific.png" alt="Asia Pacific" border="0" />

									</a>

Copy 
<a href="#" class="img-hover">

									<img src="/images/2015/global_icon_global.png" alt="Global" border="0" />

									</a>

Button Icons with Tooltips



Copy 
<a href="#" class="btn-icon">

									<i class="fa fa-plus tooltips" data-toggle="tooltip" data-placement="left" data-original-title="Add" /></i>

									</a>

Button Switch

YesNo

Copy 
<div class="btn-switch">

                                    <a href="#" class="btn">Yes</a>

                                    <a href="#" class="btn">No</a>

                                    </div>


YesNo

Copy 
<div class="btn-switch">

                                    <a href="#" class="btn disabled">Yes</a>

                                    <a href="#" class="btn disabled">No</a>

                                    </div>
YesNo

Copy 
<div class="btn-switch">

                                    <a href="#" class="btn active">Yes</a>

                                    <a href="#" class="btn">No</a>

                                    </div>


YesNo

Copy 
<div class="btn-switch">

                                    <a href="#" class="btn active disabled">Yes</a>

                                    <a href="#" class="btn disabled">No</a>

                                    </div>

Logos


Copy 
<a href="#" class="ib-symbol-red">...</a>
Copy 
<a href="#" class="ib-symbol-black">...</a>
Copy 
<a href="#" class="ib-symbol-white">...</a>
Copy
Copy 
<a href="#" class="ib-logo-black">...</a>
Copy 
<a href="#" class="ib-logo-white">...</a>
Copy 
<a href="#" class="ib-logo-black-scn">...</a>
Copy 
<a href="#" class="ib-logo-black-tcn">...</a>
Copy 
<a href="#" class="ib-logo-white-scn">...</a>
Copy 
<a href="#" class="ib-logo-white-tcn">...</a>

Spacers


Margin Spacers

no-margin
margin-none
margin-5
margin-10

margin-15
margin-20
margin-30
maring-40

margin-50
margin-60
margin-70
margin-80

margin-90
margin-100

no-margin-top
margin-top-none
margin-top-0
margin-top-5
margin-top-10
margin-top-15
margin-top-20
margin-top-30
margin-top-40
margin-top-50
margin-top-60
margin-top-70
margin-top-80
margin-top-90
margin-top-100

no-margin-right
margin-right-none
margin-right-0
margin-right-5
margin-right-10
margin-right-15
margin-right-20
margin-right-30
margin-right-40
margin-right-50
margin-right-60
margin-right-70
margin-right-80
margin-right-90
margin-right-100

no-margin-bottom
margin-bottom-none
margin-bottom-0
margin-bottom-5
margin-bottom-10
margin-bottom-15
margin-bottom-20
margin-bottom-30
margin-bottom-40
margin-bottom-50
margin-bottom-60
margin-bottom-70
margin-bottom-80
margin-bottom-90
margin-bottom-100

no-margin-left
margin-left-none
margin-left-0
margin-left-5
margin-left-10
margin-left-15
margin-left-20
margin-left-30
margin-left-40
margin-left-50
margin-left-60
margin-left-70
margin-left-80
margin-left-90
margin-left-100


USE EXAMPLE

Copy 
<div class="margin-top-10">...</div>

Padding Spacers

no-padding
padding-none
padding-5
padding-10

padding-15
padding-20
padding-30
padding-40

padding-50
padding-60
padding-70
padding-80

padding-90
padding-100

no-padding-top
padding-top-none
padding-top-0
padding-top-5
padding-top-10
padding-top-15
padding-top-20
padding-top-30
padding-top-40
padding-top-50
padding-top-60
padding-top-70
padding-top-80
padding-top-90
padding-top-100

no-padding-right
padding-right-none
padding-right-0
padding-right-5
padding-right-10
padding-right-15
padding-right-20
padding-right-30
padding-right-40
padding-right-50
padding-right-60
padding-right-70
padding-right-80
padding-right-90
padding-right-100

no-padding-bottom
padding-bottom-none
padding-bottom-0
padding-bottom-5
padding-bottom-10
padding-bottom-15
padding-bottom-20
padding-bottom-30
padding-bottom-40
padding-bottom-50
padding-bottom-60
padding-bottom-70
padding-bottom-80
padding-bottom-90
padding-bottom-100

no-padding-left
padding-left-none
padding-left-0
padding-left-5
padding-left-10
padding-left-15
padding-left-20
padding-left-30
padding-left-40
padding-left-50
padding-left-60
padding-left-70
padding-left-80
padding-left-90
padding-left-100


USE EXAMPLE

Copy 
<div class="padding-top-10">...</div>

DIV Spacers

space-10
space-20
space-30

space-40
space-50
space-60

space-70
space-80

space-90
space-100


USE EXAMPLE

Copy 
<div class="space-10">...</div>

Dividers


Copy 
<div class="divider">...</div>

Borders


border-none, no-border

border-all

border-dashed

border-dotted


border-top-none

border-top

border-top-dashed

border-top-dotted


border-right-none

border-right

border-right-dashed

border-right-dotted


border-bottom-none

border-bottom

border-bottom-dashed

border-bottom-dotted


border-left-none

border-left

border-left-dashed

border-left-dotted



USE EXAMPLE

Copy 
<div class="border-top-dashed">...</div>

Background Colors


bg-default
bg-primary
bg-success
bg-info
bg-warning
bg-danger
bg-black
bg-dark-gray
bg-gray
bg-light-gray
bg-white
bg-red
bg-blue
bg-dark-blue
bg-light-red
bg-light-green
bg-light-blue

USE EXAMPLE

Copy 
<section class="bg-light-gray">...</section>

Stamps


stamp stamp-default


stamp stamp-primary


stamp stamp-success


stamp stamp-info


stamp stamp-warning


stamp stamp-danger


stamp stamp-black


stamp stamp-dark-gray


stamp stamp-gray


stamp stamp-light-gray


stamp stamp-white


stamp stamp-red


stamp stamp-blue


stamp stamp-dark-blue


stamp stamp-light-red


stamp stamp-light-green


stamp stamp-light-blue



USE EXAMPLE

Copy 
<span class="stamp stamp-primary">...</span>

Alerts


alert-no-results

Copy 
<div class="alert-no-results">...</div>

alert-no-results-sm

Copy 
<div class="alert-no-results-sm">...</div>

alert-no-results-lg

Copy 
<div class="alert-no-results-lg">...</div>

alert alert-success

Copy 
<div class="alert alert-success">...</div>

alert alert-info

Copy 
<div class="alert alert-info">...</div>

alert alert-danger

Copy 
<div class="alert alert-danger">...</div>

alert alert-warning

Copy 
<div class="alert alert-warning">...</div>

alert alert-gray

Copy 
<div class="alert alert-gray">...</div>

Tables

Table

thead
table-subheader
td 0.00 0.00 0.00
td 0.00 0.00 0.00
td 0.00 0.00 0.00
Copy 
<div class="table-responsive">

									<table width="100%" cellspacing="0" cellpadding="0" border="0" class="table">

									<thead>

									<tr>

									<th colspan="4" align="center" valign="middle">...</th>

									</tr>

									<tr>

									<th colspan="4" align="center" valign="middle" class="table-subheader">...</th>

									</tr>

									</thead>

									<tbody>

									<tr>

									<td width="40%" align="left" valign="middle">...</td>

									<td width="20%" align="center" valign="middle">...</td>

									<td width="20%" align="center" valign="middle">...</td>

									<td width="20%" align="center" valign="middle">...</td>

									</tr>

									<tr>

									<td align="left" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									</tr>

									<tr>

									<td align="left" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									</tr>

									</tbody>

									</table>

									</div>

Table Bordered

thead
td 0.00 0.00 0.00
td 0.00 0.00 0.00
td 0.00 0.00 0.00
Copy 
<div class="table-responsive">

									<table width="100%" cellspacing="0" cellpadding="0" border="0" class="table table-bordered">

									<thead>

									<tr>

									<th colspan="4" align="center" valign="middle">...</th>

									</tr>

									</thead>

									<tbody>

									<tr>

									<td width="40%" align="left" valign="middle">...</td>

									<td width="20%" align="center" valign="middle">...</td>

									<td width="20%" align="center" valign="middle">...</td>

									<td width="20%" align="center" valign="middle">...</td>

									</tr>

									<tr>

									<td align="left" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									</tr>

									<tr>

									<td align="left" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									</tr>

									</tbody>

									</table>

									</div>

Table Striped

thead
td 0.00 0.00 0.00
td 0.00 0.00 0.00
td 0.00 0.00 0.00
Copy 
<div class="table-responsive">

									<table width="100%" cellspacing="0" cellpadding="0" border="0" class="table table-striped">

									<thead>

									<tr>

									<th colspan="4" align="center" valign="middle">...</th>

									</tr>

									</thead>

									<tbody>

									<tr>

									<td width="40%" align="left" valign="middle">...</td>

									<td width="20%" align="center" valign="middle">...</td>

									<td width="20%" align="center" valign="middle">...</td>

									<td width="20%" align="center" valign="middle">...</td>

									</tr>

									<tr>

									<td align="left" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									</tr>

									<tr>

									<td align="left" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									</tr>

									</tbody>

									</table>

									</div>

Table Hover

thead
td 0.00 0.00 0.00
active 0.00 0.00 0.00
disabled 0.00 0.00 0.00
Copy 
<div class="table-responsive">

									<table width="100%" cellspacing="0" cellpadding="0" border="0" class="table table-hover">

									<thead>

									<tr>

									<th colspan="4" align="center" valign="middle">...</th>

									</tr>

									</thead>

									<tbody>

									<tr>

									<td width="40%" align="left" valign="middle">...</td>

									<td width="20%" align="center" valign="middle">...</td>

									<td width="20%" align="center" valign="middle">...</td>

									<td width="20%" align="center" valign="middle">...</td>

									</tr>

									<tr class="active">

									<td align="left" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									</tr>

									<tr class="disabled">

									<td align="left" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									<td align="center" valign="middle">...</td>

									</tr>

									</tbody>

									</table>

									</div>

Tabs


Tab 01 Content
Tab 02 Content
Tab 03 Content
Copy 
<div>

									<ul role="tablist" class="nav nav-tabs">

									<li role="presentation" class="active"><a href="#tab-01" aria-controls="tab-01" role="tab"  data-toggle="tab">Tab 01</a></li>

									<li role="presentation"><a href="#tab-02" aria-controls="tab-02" role="tab"  data-toggle="tab">Tab 02</a></li>

									<li role="presentation"><a href="#tab-03" aria-controls="tab-03" role="tab"  data-toggle="tab">Tab 03</a></li>

									</ul>

									<div class="tab-content">

									<div role="tabpanel" id="tab-01" class="tab-pane active">...</div>

									<div role="tabpanel" id="tab-02" class="tab-pane">...</div>

									<div role="tabpanel" id="tab-03" class="tab-pane">...</div>

									</div>

									</div>

Pills


Nav Pills Default

Pill 01 Content
Pill 02 Content
Pill 03 Content
Copy 
<div>

									<ul role="tablist" class="nav nav-pills">

									<li role="presentation" class="active"><a href="#pill-01" aria-controls="pill-01" role="tab"  data-toggle="tab">Pill 01</a></li>

									<li role="presentation"><a href="#pill-02" aria-controls="pill-02" role="tab"  data-toggle="tab">Pill 02</a></li>

									<li role="presentation"><a href="#pill-03" aria-controls="pill-03" role="tab"  data-toggle="tab">Pill 03</a></li>

									</ul>

									<div class="tab-content">

									<div role="tabpanel" id="pill-01" class="tab-pane active">...</div>

									<div role="tabpanel" id="pill-02" class="tab-pane">...</div>

									<div role="tabpanel" id="pill-03" class="tab-pane">...</div>

									</div>

									</div>

Nav Pills Blue

Pill views with darker buttons for higher contrast on darker backgrounds


Wizard View Content
Table View Content
Copy 
<div>

									<ul role="tablist" class="nav nav-pills nav-pills-blue">

									<li role="presentation" class="active"><a href="#wizard-btn" aria-controls="wizard-btn" role="tab"  data-toggle="tab">Wizard View</a></li>

									<li role="presentation"><a href="#tables-btn" aria-controls="Table View" role="tab"  data-toggle="tab">Table View</a></li>

									</ul>

									<div class="tab-content">

									<div role="tabpanel" id="wizard-btn" class="tab-pane active">Wizard View Content ...</div>

									<div role="tabpanel" id="tables-btn" class="tab-pane">Table View Content ...</div>

									</div>

									</div>

Accordions


Accordion Default

Data Set 01

Data Set 02

Data Set 03


Copy 
<!-- ACCORDION SET START -->

									<div role="tablist" aria-multiselectable="true" id="accordion-default" class="panel-group">

									<!-- ACCORDION 01 START -->

									<div class="panel panel-default">

									<div role="tab" id="PanelDefault01" class="panel-heading">

									<h4 class="panel-title"><a href="#collapsePanelDefault01" aria-controls="collapsePanelDefault01" data-toggle="collapse" aria-expanded="true"  data-parent="#accordion-default">Title 01</a></h4>

									</div>

									<div id="collapsePanelDefault01" role="tabpanel" aria-labelledby="PanelDefault01" class="panel-collapse collapse in">

									<div class="panel-body">

									<p>...</p>

									</div>

									</div>

									</div>

									<!-- ACCORDION 02 START -->

									<div class="panel panel-default">

									<div role="tab" id="PanelDefault02" class="panel-heading">

									<h4 class="panel-title"><a href="#collapsePanelDefault02" aria-controls="collapsePanelDefault02" data-toggle="collapse" aria-expanded="false"  data-parent="#accordion-default"  class="collapsed">Title 02</a></h4>

									</div>

									<div id="collapsePanelDefault02" role="tabpanel" aria-labelledby="PanelDefault02" class="panel-collapse collapse">

									<div class="panel-body">

									<p>...</p>

									</div>

									</div>

									</div>

									<!-- ACCORDION 03 START -->

									<div class="panel panel-default">

									<div role="tab" id="PanelDefault03" class="panel-heading">

									<h4 class="panel-title"><a href="#collapsePanelDefault03" aria-controls="collapsePanelDefault03" data-toggle="collapse" aria-expanded="false"  data-parent="#accordion-default"  class="collapsed">Title 03</a></h4>

									</div>

									<div id="collapsePanelDefault03" role="tabpanel" aria-labelledby="PanelDefault03" class="panel-collapse collapse">

									<div class="panel-body">

									<p>...</p>

									</div>

									</div>

									</div>

									</div>

									<!-- ACCORDION SET END -->

Accordion FAQ

Data Set 01

Data Set 02

Data Set 03


Copy 
<!-- ACCORDION SET START -->

									<div role="tablist" aria-multiselectable="true" id="accordion-faq" class="panel-group">

									<!-- ACCORDION 01 START -->

									<div class="panel panel-faq">

									<div role="tab" id="PanelFAQ01" class="panel-heading">

									<h4 class="panel-title"><a href="#collapsePanelFAQ01" aria-controls="collapsePanelFAQ01" data-toggle="collapse" aria-expanded="false"  data-parent="#accordion-faq"  class="collapsed">Title 01</a></h4>

									</div>

									<div id="collapsePanelFAQ01" role="tabpanel" aria-labelledby="PanelFAQ01" class="panel-collapse collapse">

									<div class="panel-body">

									<p>...</p>

									</div>

									</div>

									</div>

									<!-- ACCORDION 02 START -->

									<div class="panel panel-faq">

									<div role="tab" id="PanelFAQ02" class="panel-heading">

									<h4 class="panel-title"><a href="#collapsePanelFAQ02" aria-controls="collapsePanelFAQ02" data-toggle="collapse" aria-expanded="false"  data-parent="#accordion-faq"  class="collapsed">Title 02</a></h4>

									</div>

									<div id="collapsePanelFAQ02" role="tabpanel" aria-labelledby="PanelFAQ02" class="panel-collapse collapse">

									<div class="panel-body">

									<p>...</p>

									</div>

									</div>

									</div>

									<!-- ACCORDION 03 START -->

									<div class="panel panel-faq">

									<div role="tab" id="PanelFAQ03" class="panel-heading">

									<h4 class="panel-title"><a href="#collapsePanelFAQ03" aria-controls="collapsePanelFAQ03" data-toggle="collapse" aria-expanded="false"  data-parent="#accordion-faq"  class="collapsed">Title 03</a></h4>

									</div>

									<div id="collapsePanelFAQ03" role="tabpanel" aria-labelledby="PanelFAQ03" class="panel-collapse collapse">

									<div class="panel-body">

									<p>...</p>

									</div>

									</div>

									</div>

									</div>

									<!-- ACCORDION SET END -->

Accordion Filter

Withdrawal
Deposit
Position Transfer

Apply

Filter 01
Filter 02
Filter 03

Apply

Filter 01
Filter 02
Filter 03

Apply


Copy 
<!-- ACCORDION SET START -->

									<div role="tablist" aria-multiselectable="true" id="accordion-filters" class="panel-group">

									<!-- ACCORDION 01 START -->

									<div class="panel panel-filter">

									<div role="tab" id="PanelFilter01" class="panel-heading">

									<h4 class="panel-title"><a href="#collapsePanelFilter01" aria-controls="collapsePanelFilter01" data-toggle="collapse" aria-expanded="false"  data-parent="#accordion-filters"  class="collapsed">Title 01</a></h4>

									</div>

									<div id="collapsePanelFilter01" role="tabpanel" aria-labelledby="PanelFilter01" class="panel-collapse collapse">

									<div class="panel-body">

									<p>...</p>

									</div>

									</div>

									</div>

									<!-- ACCORDION 02 START -->

									<div class="panel panel-filter">

									<div role="tab" id="PanelFilter02" class="panel-heading">

									<h4 class="panel-title"><a href="#collapsePanelFilter02" aria-controls="collapsePanelFilter02" data-toggle="collapse" aria-expanded="false"  data-parent="#accordion-filters"  class="collapsed">Title 02</a></h4>

									</div>

									<div id="collapsePanelFilter02" role="tabpanel" aria-labelledby="PanelFilter02" class="panel-collapse collapse">

									<div class="panel-body">

									<p>...</p>

									</div>

									</div>

									</div>

									<!-- ACCORDION 03 START -->

									<div class="panel panel-filter">

									<div role="tab" id="PanelFilter03" class="panel-heading">

									<h4 class="panel-title"><a href="#collapsePanelFilter03" aria-controls="collapsePanelFilter03" data-toggle="collapse" aria-expanded="false"  data-parent="#accordion-filters"  class="collapsed">Title 03</a></h4>

									</div>

									<div id="collapsePanelFilter03" role="tabpanel" aria-labelledby="PanelFilter03" class="panel-collapse collapse">

									<div class="panel-body">

									<p>...</p>

									</div>

									</div>

									</div>

									</div>

									<!-- ACCORDION SET END -->

Modals


Launch Modal Default
Copy 
<a href="javascript:void(0);" target="_self" data-toggle="modal" data-target="#modalDefault" class="btn btn-default">...</a>

MODAL DEFAULT CODE

Copy 
<!-- MODAL START | MODAL DEFAULT -->

									<div tabindex="-1" role="dialog" aria-labelledby="modalDefault" id="modalDefault" class="modal fade">

										<div role="document" class="modal-dialog">

											<div class="modal-content">

												<!-- MODAL HEADER START -->

												<div class="modal-header">

													<button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>

													<h4 id="modalDefault" class="modal-title">Title</h4>

												</div>

												<!-- MODAL HEADER END-->

												<!-- MODAL BODY START-->

												<div class="modal-body">

													<div class="row">

														<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

															...

														</div>

													</div>

												</div>

												<!-- MODAL BODY END-->

												<!-- MODAL FOOTER START -->

												<div class="modal-footer">

													<div class="row">

														<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">

															<div class="panel-btn-left">

																<p><a href="javascript:void(0);" data-dismiss="modal" class="btn btn-default">Cancel</a></p>

															</div>

														</div>

														<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">

															<div class="panel-btn-right">

																<p><a href="javascript:void(0);" class="btn btn-success">Save</a></p>

															</div>

														</div>

													</div>

												</div>

												<!-- MODAL FOOTER END -->

											</div>

										</div>

									</div>

									<!-- MODAL END | MODAL DEFAULT -->


Launch Modal Info
Copy 
<a href="javascript:void(0);" target="_self" data-toggle="modal" data-target="#modalInfo" class="btn btn-default">...</a>

MODAL INFO CODE

Copy 
<!-- MODAL START | MODAL INFO -->

									<div tabindex="-1" role="dialog" aria-labelledby="modalInfo" id="modalInfo" class="modal fade">

										<div role="document" class="modal-dialog">

											<div class="modal-content modal-info">

												<!-- MODAL HEADER START -->

												<div class="modal-header">

													<button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>

													<h4 id="modalInfo" class="modal-title"><i aria-hidden="true" class="fa fa-info-circle"></i>Info</h4>

												</div>

												<!-- MODAL HEADER END-->

												<!-- MODAL BODY START-->

												<div class="modal-body">

													<div class="row">

														<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

															...

														</div>

													</div>

												</div>

												<!-- MODAL BODY END-->

											</div>

										</div>

									</div>

									<!-- MODAL END | MODAL INFO -->


Launch Modal Warning
Copy 
<a href="javascript:void(0);" target="_self" data-toggle="modal" data-target="#modalWarning" class="btn btn-default">...</a>

MODAL WARNING CODE

Copy 
<!-- MODAL START | MODAL WARNING -->

									<div tabindex="-1" role="dialog" aria-labelledby="modalWarning" id="modalWarning" class="modal fade">

										<div role="document" class="modal-dialog">

											<div class="modal-content modal-warning">

												<!-- MODAL HEADER START -->

												<div class="modal-header">

													<button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>

													<h4 id="modalWarning" class="modal-title"><i aria-hidden="true" class="fa fa-exclamation-triangle"></i>Warning</h4>

												</div>

												<!-- MODAL HEADER END-->

												<!-- MODAL BODY START-->

												<div class="modal-body">

													<div class="row">

														<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

															...

														</div>

													</div>

												</div>

												<!-- MODAL BODY END-->

												<!-- MODAL FOOTER START -->

												<div class="modal-footer">

													<div class="row">

														<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">

															<div class="panel-btn-left">

																<p><a href="javascript:void(0);" data-dismiss="modal" class="btn btn-default">Cancel</a></p>

															</div>

														</div>

														<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">

															<div class="panel-btn-right">

																<p><a href="javascript:void(0);" class="btn btn-success">Save</a></p>

															</div>

														</div>

													</div>

												</div>

												<!-- MODAL FOOTER END -->

											</div>

										</div>

									</div>

									<!-- MODAL END | MODAL WARNING -->


Launch Modal Danger
Copy 
<a href="javascript:void(0);" target="_self" data-toggle="modal" data-target="#modalDanger" class="btn btn-default">...</a>

MODAL DANGER CODE

Copy 
<!-- MODAL START | MODAL DANGER -->

									<div tabindex="-1" role="dialog" aria-labelledby="modalDanger" id="modalDanger" class="modal fade">

										<div role="document" class="modal-dialog">

											<div class="modal-content modal-warning">

												<!-- MODAL HEADER START -->

												<div class="modal-header">

													<button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>

													<h4 id="modalDanger" class="modal-title"><i aria-hidden="true" class="fa fa-exclamation-triangle"></i>Danger</h4>

												</div>

												<!-- MODAL HEADER END-->

												<!-- MODAL BODY START-->

												<div class="modal-body">

													<div class="row">

														<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

															...

														</div>

													</div>

												</div>

												<!-- MODAL BODY END-->

												<!-- MODAL FOOTER START -->

												<div class="modal-footer">

													<div class="row">

														<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">

															<div class="panel-btn-left">

																<p><a href="javascript:void(0);" data-dismiss="modal" class="btn btn-default">Cancel</a></p>

															</div>

														</div>

														<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">

															<div class="panel-btn-right">

																<p><a href="javascript:void(0);" class="btn btn-success">Save</a></p>

															</div>

														</div>

													</div>

												</div>

												<!-- MODAL FOOTER END -->

											</div>

										</div>

									</div>

									<!-- MODAL END | MODAL DANGER -->


Launch Modal Video
Copy 
<a href="javascript:void(0);" target="_self" data-toggle="modal" data-target="#modalVideo" class="btn btn-default">...</a>

MODAL VIDEO CODE

Copy 
<!-- MODAL START | MODAL VIDEO -->

									<div tabindex="-1" role="dialog" aria-labelledby="modalVideo" id="modalVideo" class="modal modal-video fade">

										<div role="document" class="modal-dialog modal-dialog-centered">

											<div class="modal-content">

												<!-- MODAL HEADER START -->

												<div class="modal-header">

													<button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>

													<h4 id="modalVideo" class="modal-title">Video</h4>

												</div>

												<!-- MODAL HEADER END -->

												<!-- MODAL BODY START -->

												<div class="modal-body">

													<div class="row">

														<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

														<iframe><!-- VIDEO GOES HERE --></iframe>

														</div>

													</div>

												</div>

												<!-- MODAL BODY END -->

											</div>

										</div>

									</div>

									<!-- MODAL END | MODAL VIDEO -->


Links