Components
Checkboxes
<div class="checkbox">
<label>
<input type="checkbox" name="optionsCheckboxes">
Unchecked
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="optionsCheckboxes" checked>
Checked
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="optionsCheckboxes" disabled>
Disabled Unchecked
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="optionsCheckboxes" disabled checked>
Disabled Checked
</label>
</div>
Radio Buttons
<div class="radio">
<label>
<input type="radio" name="optionsRadios">
Radio is off
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" checked="true">
Radio is on
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadiosDisabled" disabled>
Disabled Radio is off
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadiosDisabled" checked="true" disabled>
Disabled Radio is on
</label>
</div>
Toggle Buttons
<div class="togglebutton">
<label>
<input type="checkbox" checked="">
Toggle is on
</label>
</div>
<div class="togglebutton">
<label>
<input type="checkbox">
Toggle is off
</label>
</div>
Incrementing/Decrementing
2
<div class="btn-group increment"> <button class="btn btn-round btn-primary btn-xs"> <i class="material-icons">remove</i> </button> <div class="quantity">2</div> <button class="btn btn-round btn-primary btn-xs"> <i class="material-icons">add</i> </button> </div>
Dropdown
<!-- markup -->
<select id="basic" class="selectpicker show-menu-arrow">
<option disabled=""> Choose city</option>
<option value="2">Paris </option>
<option value="3">Bucharest</option>
<option value="4">Rome</option>
</select>
<!-- javascript -->
$(".selectpicker").selectpicker({
style: "select-with-transition",
size: 6
});
Inputs
Your username is usually a number with at least 6 digits
done
group
visibility
<div class="col-sm-4">
<div class="form-group">
<input type="text" value="" placeholder="Regular" class="form-control" />
</div>
</div>
<div class="col-sm-4">
<div class="form-group label-floating">
<label class="control-label">With Floating Label</label>
<input type="email" class="form-control">
</div>
</div>
<div class="col-sm-4">
<div class="form-group label-floating has-success">
<label class="control-label">Success input</label>
<input type="text" value="Success" class="form-control" />
<span class="form-control-feedback">
<i class="material-icons">done</i>
</span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group label-floating has-error">
<label class="control-label">Error input</label>
<input type="email" value="Error Input" class="form-control" />
<span class="material-icons form-control-feedback">clear</span>
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">group</i>
</span>
<input type="text" class="form-control" placeholder="With Material Icons">
</div>
</div>
<div class="col-sm-4">
<div class="form-group label-floating password">
<label class="control-label">Password</label>
<input type="password" id="passwordfield" class="form-control">
<i class="material-icons"></i>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label">Text Area</label>
<textarea class="form-control multiline" rows="3"></textarea>
</div>
</div>
Tabs
Leverage agile frameworks to provide a robust synopsis for high level overviews.
Iterative approaches to corporate strategy foster collaborative thinking to further
the overall value proposition. Organically grow the holistic world view of disruptive
innovation via workplace diversity and empowerment. Bring to the table win-win
survival strategies to ensure proactive domination. At the end of the day, going
forward, a new normal that has evolved from generation X is on the runway heading
towards a streamlined cloud solution. User generated c
Capitalize on low hanging fruit to identify a ballpark value added activity to beta
test. Override the digital divide with additional clickthroughs from DevOps.
Nanotechnology immersion along the information highway will close the loop on
focusing solely on the bottom line.
Podcasting operational change management inside of workflows to establish a framework.
Taking seamless key performance indicators offline to maximise the long tail.
Keeping your eye on the ball while performing a deep dive on the start-up mentality
to derive convergence on cross-platform integration.
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Overview</a></li>
<li role="presentation"><a href="#">Client Details</a></li>
<li role="presentation"><a href="#">Wrappers</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="overview">...</div>
<div role="tabpanel" class="tab-pane" id="client-details">...</div>
<div role="tabpanel" class="tab-pane" id="wrappers">...</div>
</div>
Pagination
<ul class="pagination pagination-primary">
<li><a href="javascript:void(0);">1<div class="ripple-container"></div></a></li>
<li><a href="javascript:void(0);">...</a></li>
<li><a href="javascript:void(0);">5</a></li>
<li><a href="javascript:void(0);">6</a></li>
<li class="active"><a href="javascript:void(0);">7</a></li>
<li><a href="javascript:void(0);">8</a></li>
<li><a href="javascript:void(0);">9</a></li>
<li><a href="javascript:void(0);">...</a></li>
<li><a href="javascript:void(0);">12</a></li>
</ul>
Tables
Simple Table with Actions
| Name | Type | Value | Status | Actions | ||
|---|---|---|---|---|---|---|
| 1 |
|
My Savings Account | Novia General Investment Account | £135,000.64 | Pending | |
| 2 |
|
My Pension | Novia SIPP Uncrystallised | £897,241.64 | Active | |
| 3 |
|
My Pension | Novia SIPP Uncrystallised | £897,241.64 | Active |
<table class="table">
<thead>
<tr>
<th class="text-center">#</th>
<th>Name</th>
<th>Job Position</th>
<th>Since</th>
<th class="text-right">Salary</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td>Andrew Mike</td>
<td>Develop</td>
<td>2013</td>
<td class="text-right">€ 99,225</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">
<i class="fa fa-user"></i>
</button>
<button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
<i class="fa fa-edit"></i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
<tr>
<td class="text-center">2</td>
<td>John Doe</td>
<td>Design</td>
<td>2012</td>
<td class="text-right">€ 89,241</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">
<i class="fa fa-user"></i>
</button>
<button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
<i class="fa fa-edit"></i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
<tr>
<td class="text-center">3</td>
<td>Alex Mike</td>
<td>Design</td>
<td>2010</td>
<td class="text-right">€ 92,144</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-simple btn-xs">
<i class="fa fa-user"></i>
</button>
<button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-simple btn-xs">
<i class="fa fa-edit"></i>
</button>
<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
</tbody>
</table>
Datepicker
For full documentation check out Bootstrap Datepicker.
<!-- markup -->
<div class="form-group label-static">
<label class="control-label">Datepicker</label>
<input type="text" class="datepicker form-control" value="03/12/2016" />
</div>
<!-- javascript -->
$('.datepicker').datepicker();
Widgets
<div class="widget">
<a href="/investor-account/create" class="link-widget">
<div class="link-widget__icon">
<div class="icon-bg icon-md">
<span class="business-icon"></span>
</div>
</div>
<div class="link-widget__content">
<span class="link-widget__title">Assets under management</span>
<span class="link-widget__value">£3,453,675</span>
</div>
</a>
</div>
Modals
Please make sure you place the modal body outside of the
div.wrapper tag.
Select Investor Type.
<!-- Button trigger modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal Core -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-simple" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-info btn-simple">Save</button>
</div>
</div>
</div>
</div>
Accordion
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them
accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them
accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them
accusamus labore sustainable VHS.
<!-- Markup -->
<div class="accordion-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="accordion accordion-default">
<div class="accordion-heading" role="tab" id="headingOne">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="accordion-title">
Collapsible Group Item #1
<i class="material-icons">keyboard_arrow_down</i>
</span>
</a>
</div>
<div id="collapseOne" class="accordion-collapse collapse in" role="tabaccordion" aria-labelledby="headingOne">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
Tooltips
<!-- Markup -->
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Button with Tooltip</button>
<!-- Javascript -->
$('[data-toggle="tooltip"]').tooltip();
Popovers
<!-- markup -->
<button type="button" class="btn btn-primary" data-toggle="popover" data-placement="top" title="Popover on top" data-content="Here will be some very useful information about his popover.">On top</button>
<!-- javascript -->
$('[data-toggle="popover"]').popover();
Panels / cards
Basic panel
Basic panel example
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Panel heading
Panel heading with title
Panel content
<div class="panel panel-default">
<div class="panel-heading">Panel heading with title</div>
<div class="panel-body">
Panel content
</div>
</div>
Panel heading with primary colour
Panel heading with title
Panel content
<div class="panel panel-primary">
<div class="panel-heading">Panel heading with title</div>
<div class="panel-body">
Panel content
</div>
</div>