5.1 — Alerts
Extends Bootstrap alerts.
5.1.1 — Full Size Alert
For use on the same level as page sections, eg. right after .navbar. It features a .container so the message is
aligned with the rest of the page.
Example
Your order has been placed. Thank you!
<div role="alert" class="alert alert-success alert-dismissible alert-full fade in">
<button type="button" class="close" data-dismiss="alert">×</button>
<div class="container">
<span class="glyphicon glyphicon-ok-sign offset-right" aria-hidden="true"></span>
Your order has been placed. Thank you!
</div>
</div>5.1.2 — Error Alert
Some frameworks generate error flash messages with error modifier. This makes them look just like original
Bootstrap’s .alert-danger.
Example
What a mistake!
<div class="alert alert-error alert-dismissible fade in">
<button type="button" class="close" data-dismiss="alert">×</button>
<span class="glyphicon glyphicon-warning-sign offset-right" aria-hidden="true"></span>
What a mistake!
</div>5.2 — Boxes
Example
This box has maximum width.
<div class="well box">This box has maximum width.</div>5.3 — Buttons
5.3.1 — Additional Button Variants
Cast some shadow below buttons.
Example
<button type="button" class="btn btn-accent">Accent button</button>
<button type="button" class="btn btn-transparent">Transparent button</button>5.3.2 — Raised Buttons
Cast some shadow below buttons.
Example
<button type="button" class="btn btn-default btn-raised">Raised default button</button>
<button type="button" class="btn btn-primary btn-raised">Raised primary button</button>
<button type="button" class="btn btn-accent btn-raised">Raised accent button</button>
<button type="button" class="btn btn-success btn-raised">Raised success button</button>
<button type="button" class="btn btn-info btn-raised">Raised info button</button>
<button type="button" class="btn btn-warning btn-raised">Raised warning button</button>
<button type="button" class="btn btn-danger btn-raised">Raised danger button</button>5.3.3 — Responsive Buttons
Expanded on small screens, auto size on the rest.
Example
<button type="button" class="btn btn-default btn-responsive">Responsive default button</button>
<button type="button" class="btn btn-primary btn-responsive">Responsive primary button</button>5.3.4 — Disabled Buttons
Just give disabled buttons more transparency to provide better visual feedback.
Example
<button type="button" class="btn btn-default" disabled>Disabled default button</button>
<button type="button" class="btn btn-primary" disabled>Disabled primary button</button>5.3.5 — Buttons in Dropdowns
Make button in dropdown look like any other item.
Example
<div class="dropdown">
<button class="btn btn-default" type="button" id="itemOptions1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Options
<span class="glyphicon glyphicon-menu-down offset-left" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="itemOptions1">
<li>
<a href="#">
<span class="glyphicon glyphicon-pencil offset-right" aria-hidden="true"></span>
Edit
</a>
</li>
<li>
<button type="button" class="btn btn-dropdown">
<span class="glyphicon glyphicon-remove-sign offset-right" aria-hidden="true"></span>
Delete
</button>
</li>
</ul>
</div>5.4 — Gallery
Bootstrap-grid-independent responsive thumbnail grid. Designed for easy use.
Example
<div class="gallery">
<a href="#"><img src="//satyr.io/320x320" alt="Photo" /></a>
<a href="#"><img src="//satyr.io/320x320" alt="Photo" /></a>
<a href="#"><img src="//satyr.io/320x320" alt="Photo" /></a>
<a href="#"><img src="//satyr.io/320x320" alt="Photo" /></a>
<a href="#"><img src="//satyr.io/320x320" alt="Photo" /></a>
<a href="#"><img src="//satyr.io/320x320" alt="Photo" /></a>
<a href="#"><img src="//satyr.io/320x320" alt="Photo" /></a>
<a href="#"><img src="//satyr.io/320x320" alt="Photo" /></a>
</div>5.5 — Icons
Nicer icon placement.
Example
The icon is vertically aligned on the line.
<span class="glyphicon glyphicon-wrench icon-shift-down" aria-hidden="true"></span>
The icon is vertically aligned on the line.5.6 — Item Actions
Item actions extend Bootstrap button component. They are optimized for long lists of items where each item offers one or more actions to be taken. They look the best when used only with icons.
Example
Used in table:
<p>
<a href="#" class="item-action" title="Edit">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<a href="#" class="item-action item-action-danger" title="Delete">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
<a href="#" class="item-action">
<span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
Share
</a>
<a href="#" class="item-action item-action-danger">
<span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>
Remove
</a>
</p>
<p><strong>Used in table:</strong></p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Article</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Hotforwords Can Explain Lorem Ipsum far better than I can</td>
<td class="table-cell-actions">
<a href="#" class="item-action" title="Edit">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<a href="#" class="item-action item-action-danger" title="Delete">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
</td>
</tr>
<tr>
<td>Which to isn't lesser together years land heaven brought</td>
<td class="table-cell-actions">
<a href="#" class="item-action" title="Edit">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<a href="#" class="item-action item-action-danger" title="Delete">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>5.7 — Panels
Extends Bootstrap panels with rich header containing icon shortcut (dropdown can also be used).
Example
Winged. Grass female creepeth you're light firmament replenish have seasons may to seed also female.
<div class="panel panel-default">
<div class="panel-heading panel-heading-extended">
<a href="#" class="panel-action" title="Settings"><span class="glyphicon glyphicon-cog offset-right" aria-hidden="true"></span></a>
<a href="#">
<h4 class="panel-title panel-title-big">Big Big Title</h4>
<h5 class="panel-title panel-title-subtitle">Teeny Tiny Subtitle</h5>
</a>
</div>
<div class="panel-body">
Winged. Grass female creepeth you're light firmament replenish have seasons may to seed also female.
</div>
</div>5.8 — Tables
Default Bootstrap tables can be extended with the following features:
- Disabled row for inactive items
- Nested items to present hierarchy
- ID column that preserves its width
- Actions column which always keeps all actions in a single row
- Table cells vertically aligned to top (
.table-cell-top)
This is the recommended setup for simple table listing:
Example
| # | Page Title | Time Created | |
|---|---|---|---|
| 1 | Hotforwords Can Explain Lorem Ipsum far better than I can | 06/09/2015 18:05 | |
| 2 | A nested item; Which to isn’t lesser together | 06/03/2015 12:55 | |
| 3 | Seas spirit morning, fill seasons every I wherein kind | 06/03/2015 12:45 | |
| 4 | A disabled item, eg. for unpublished articles | 06/03/2015 10:02 | |
| 5 | Cattle she’d of herb third | 06/02/2015 12:15 |
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th class="table-cell-id">#</th>
<th>Page Title</th>
<th class="text-right">Time Created</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-cell-id">1</td>
<td><a href="#">Hotforwords Can Explain Lorem Ipsum far better than I can</a></td>
<td class="text-right text-nowrap">
<small>06/09/2015 18:05</small>
</td>
<td class="table-cell-actions">
<a href="#" class="item-action" title="Edit">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<a href="#" class="item-action item-action-danger" title="Delete">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
</td>
</tr>
<tr class="table-row-nested">
<td class="table-cell-id">2</td>
<td><a href="#">A nested item; Which to isn’t lesser together</a></td>
<td class="text-right text-nowrap">
<small>06/03/2015 12:55</small>
</td>
<td class="table-cell-actions">
<a href="#" class="item-action" title="Edit">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<a href="#" class="item-action item-action-danger" title="Delete">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
</td>
</tr>
<tr>
<td class="table-cell-id">3</td>
<td><a href="#">Seas spirit morning, fill seasons every I wherein kind</a></td>
<td class="text-right text-nowrap">
<small>06/03/2015 12:45</small>
</td>
<td class="table-cell-actions">
<a href="#" class="item-action" title="Edit">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<a href="#" class="item-action item-action-danger" title="Delete">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
</td>
</tr>
<tr class="disabled">
<td class="table-cell-id">4</td>
<td><a href="#">A disabled item, eg. for unpublished articles</a></td>
<td class="text-right text-nowrap">
<small>06/03/2015 10:02</small>
</td>
<td class="table-cell-actions">
<a href="#" class="item-action" title="Edit">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<a href="#" class="item-action item-action-danger" title="Delete">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
</td>
</tr>
<tr>
<td class="table-cell-id">5</td>
<td><a href="#">Cattle she’d of herb third</a></td>
<td class="text-right text-nowrap">
<small>06/02/2015 12:15</small>
</td>
<td class="table-cell-actions">
<a href="#" class="item-action" title="Edit">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<a href="#" class="item-action item-action-danger" title="Delete">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>5.8.1 — Tables with Groups
Table data can be easily organized in groups.
Example
| # | User |
|---|---|
| B | |
| 1 | Brown, James |
| P | |
| 2 | Paisley, Brad |
| 3 | Parker, Maceo |
| W | |
| 4 | Wesley, Fred |
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th class="table-cell-id">#</th>
<th>User</th>
</tr>
</thead>
<thead>
<tr class="active">
<th colspan="2">B</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-cell-id">1</td>
<td><a href="#"><strong>Brown</strong>, James</a></td>
</tr>
</tbody>
<thead>
<tr class="active">
<th colspan="2">P</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-cell-id">2</td>
<td><a href="#"><strong>Paisley</strong>, Brad</a></td>
</tr>
<tr>
<td class="table-cell-id">3</td>
<td><a href="#"><strong>Parker</strong>, Maceo</a></td>
</tr>
</tbody>
<thead>
<tr class="active">
<th colspan="2">W</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-cell-id">4</td>
<td><a href="#"><strong>Wesley</strong>, Fred</a></td>
</tr>
</tbody>
</table>
</div>5.8.2 — Tables with Dropdowns
Prevent clipped dropdown menus in responsive tables.
Example
| ID 1 | 2016-06-30 11:30:22 | John Doe | 49 USD |
|
<div class="table-responsive table-responsive-dropdowns">
<table class="table">
<tbody>
<tr>
<td class="table-cell-id">ID 1</td>
<td>2016-06-30 11:30:22</td>
<td>John Doe</td>
<td class="text-right">49 USD</td>
<td class="table-cell-actions">
<div class="btn-group">
<button class="item-action" type="button" id="itemOptions1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="itemOptions1">
<li>
<a href="#">
<span class="glyphicon glyphicon-usd offset-right" aria-hidden="true"></span>
Mark as paid
</a>
</li>
<li>
<button type="button" class="btn btn-dropdown">
<span class="glyphicon glyphicon-remove-sign offset-right" aria-hidden="true"></span>
Cancel order
</button>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>5.9 — Thumbnails
Extends Bootstrap thumbnails with fixed-image-height modification which is perfect for media grid listing.
Example
<div class="row">
<div class="col-xs-6 col-sm-4">
<div class="thumbnail thumbnail-fixed">
<a href="#">
<div class="thumbnail-image">
<img src="http://satyr.io/400x300" alt="" />
</div>
<div class="caption">
<h4 class="thumbnail-title">my-darling.jpg</h4>
<small class="text-muted">6378 kB</small>
</div>
</a>
<div class="thumbnail-actions">
<button type="button" class="item-action item-action-danger"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class="thumbnail thumbnail-fixed">
<a href="#">
<div class="thumbnail-image">
<img src="http://satyr.io/400x300" alt="" />
</div>
<div class="caption">
<h4 class="thumbnail-title">my-lovely-darling-with-a-long-name.jpg</h4>
<small class="text-muted">6378 kB</small>
</div>
</a>
<div class="thumbnail-actions">
<button type="button" class="item-action item-action-danger"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class="thumbnail thumbnail-fixed">
<a href="#">
<div class="thumbnail-image">
<img src="http://satyr.io/400x300" alt="" />
</div>
<div class="caption">
<h4 class="thumbnail-title">my-darling.jpg</h4>
<small class="text-muted">6378 kB</small>
</div>
</a>
<div class="thumbnail-actions">
<button type="button" class="item-action item-action-danger"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div><!-- .row -->