Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Examples
Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.
No default class
Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.
<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>
Dismissable alerts
Build on any alert by adding an optional .alert-dismissable and close button.
Requires JavaScript alert plugin
For fully functioning, dismissible alerts, you must use the alerts JavaScript plugin.
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
Ensure proper behavior across all devices
Be sure to use the <button> element with the data-dismiss="alert" data attribute.
Links in alerts
Use the .alert-link utility class to quickly provide matching colored links within any alert.
<div class="alert alert-success">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger">
<a href="#" class="alert-link">...</a>
</div>
UI Alerts
UI Alerts are a new kind of alert. Typically these alerts are page level alerts that provide a contextual color and icon. Currently, these alerts are configured via the UI Alerts Javascript module in LMS.
Configuration
- UI Alerts can be dismissable, automatically dismissed after a timeout, or not dismissable.
- The color of the icon is specified by the alert type supplied, and the icon is specified by the alert supplied.
- The contents of a UI Alert can be a string, or a full fledged React component for complex HTML.
Shadows
UI Alerts do not come with a border, and thus use box shadows to show depth on the page. Our current global context uses the shadow depth class .shadow-depth-2 but a different solution in which the Alert is embedded in the page could use something that feels closer to the page, like .shadow-depth-1
<div class='ui-alert shadow-depth-2'> <div class='ui-alert__icon-wrapper alert-info'> <svg class="ui-alert__icon icon icon-tag"><use xlink:href="#icon-tag"/></svg> </div> <div class='ui-alert__body'> <svg class="close ui-alert__close icon icon-cross"><use xlink:href="#icon-cross"/></svg> <span>Your tags have been updated.</span> </div> </div> <div class='ui-alert shadow-depth-2'> <div class='ui-alert__icon-wrapper alert-warning'> <svg class="ui-alert__icon icon icon-cog"><use xlink:href="#icon-cog"/></svg> </div> <div class='ui-alert__body'> <span> <strong> System Message: <a href="http://www.google.com" title="Test">Click me!</a> Testing to you! </strong> I'm not bold. </span> </div> </div> <div class='ui-alert shadow-depth-2'> <div class='ui-alert__icon-wrapper alert-success'> <svg class="ui-alert__icon icon icon-user"><use xlink:href="#icon-user"/></svg> </div> <div class='ui-alert__body'> <svg class="close ui-alert__close icon icon-cross"><use xlink:href="#icon-cross"/></svg> <span>Bouncer settings saved.</span> </div> </div>// AlertActions is `require`'d in via CommonJS modules AlertActions.addAlert({ dismissible: true, icon: 'tag', content: 'Your tags have been updated.', autoDismiss: true, autoDismissTime: 3000 }); // AlertActions is used on a global var message = '<strong>System Message: <a href="http://www.google.com" title="Test">Click me!</a> Testing to you! </strong>I'm not bold.'; window.ReactComponents.AlertActions.addAlert({ dismissible: false, icon: 'cog', type: 'warning', content: window.React.createElement('span', { dangerouslySetInnerHTML: { __html: result.message } }), autoDismiss: false }); // AlertActions is `require`'d in via CommonJS modules AlertActions.addAlert({ dismissible: true, icon: 'user', type: 'success', content: 'Bouncer settings saved.', autoDismiss: false });
No set width.
UI Alerts do not have a specific width and will grow to their container.
Badges
Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>Self collapsing
When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.
Cross-browser compatibility
Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty selector.
Adapts to active nav states
Built-in styles are included for placing badges in active states in pill navigations.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>Badge outline
Outline variation of default badges using the .badge-outline class.
<button class="btn btn-primary">Messages <span class="badge badge-outline">4</span></button>
<button class="btn btn-attention">Messages <span class="badge badge-outline">4</span></button>
<button class="btn btn-success">Messages <span class="badge badge-outline">4</span></button>
<button class="btn btn-info">Messages <span class="badge badge-outline">4</span></button>
<button class="btn btn-warning">Messages <span class="badge badge-outline">4</span></button>
<button class="btn btn-danger">Messages <span class="badge badge-outline">4</span></button>
<button class="btn btn-default">Messages <span class="badge badge-outline">4</span></button>Button groups
Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.
Tooltips & popovers in button groups require special setting
When using tooltips or popovers on elements within a .btn-group, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).
Basic example
Wrap a series of buttons with .btn in .btn-group.
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
Button toolbar
Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">...</div>
<div class="btn-group">...</div>
<div class="btn-group">...</div>
</div>
Sizing
Instead of applying button sizing classes to every button in a group, just add .btn-group-* to the .btn-group.
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>
Nesting
Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
Vertical variation
Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
<div class="btn-group-vertical">
...
</div>
Justified button groups
Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.
Handling borders
Due to the specific HTML and CSS used to justify buttons (namely display: table-cell), the borders between them are doubled. In regular button groups, margin-left: -1px is used to stack the borders instead of removing them. However, margin doesn't work with display: table-cell. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.
With <a> elements
Just wrap a series of .btns in .btn-group.btn-group-justified.
<div class="btn-group btn-group-justified">
...
</div>
With <button> elements
To use justified button groups with <button> elements, you must wrap each button in a button group. Most browsers don't properly apply our CSS for justification to <button> elements, but since we support button dropdowns, we can workaround that.
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
Alternative button groups
Alternative button groups are used to create even width buttons across the full width of the button group (set at 100% width). Alternative button groups handle button borders better than justified button groups but they are less flexible in usage.
<div class="btn-group btn-group-alt-two">
<button type="button" class="btn btn-default">One</button>
<button type="button" class="btn btn-default">Two</button>
</div>
<div class="btn-group btn-group-alt-three">
<button type="button" class="btn btn-default">One</button>
<button type="button" class="btn btn-default">Two</button>
<button type="button" class="btn btn-default">Three</button>
</div>
<div class="btn-group btn-group-alt-four">
<button type="button" class="btn btn-default">One</button>
<button type="button" class="btn btn-default">Two</button>
<button type="button" class="btn btn-default">Three</button>
<button type="button" class="btn btn-default">Four</button>
</div>
Button dropdowns
Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.
Plugin dependency
Button dropdowns require the dropdown plugin to be included in your version of Bootstrap.
Single button dropdowns
Turn a button into a dropdown toggle with some basic markup changes.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Block style single button dropdown
Sometimes we need a block style single button dropdown. Add .btn-group-block-dropdown to the .btn-group class.
<div class="btn-group btn-group-block-dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<svg class="icon icon-location"><use xlink:href="#icon-location"/></svg> Charleston, SC <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Mount Pleasant, SC</a></li>
<li><a href="#">Sullivan's Island, SC</a></li>
<li><a href="#">Isle of Palms, SC</a></li>
</ul>
</div>Single button dropdown variations
Some variations showing single button dropdowns with icons and icon-only dropdowns.
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Default <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<svg class="icon icon-heart"><use xlink:href="#icon-heart"/></svg> Default <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info btn-icon dropdown-toggle" data-toggle="dropdown">
<svg class="icon icon-cog"><use xlink:href="#icon-cog"/></svg> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-attention btn-icon dropdown-toggle" data-toggle="dropdown">
<svg class="icon icon-user"><use xlink:href="#icon-user"/></svg> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
No caret
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
</ul>
</div>
Custom dropdowns
Communication status dropdowns.
<div class="btn-group">
<button type="button" class="btn btn-default btn-icon dropdown-toggle" data-toggle="dropdown">
<svg class="icon icon-email-bad"><use xlink:href="#icon-email-bad"/></svg> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><svg class="icon icon-email-good"><use xlink:href="#icon-email-good"/></svg> 2-way emailing</a></li>
<li><a href="#"><svg class="icon icon-email-neutral"><use xlink:href="#icon-email-neutral"/></svg> No replies</a></li>
<li><a href="#"><svg class="icon icon-email-bad"><use xlink:href="#icon-email-bad"/></svg> Opt-out</a></li>
<li><a href="#"><svg class="icon icon-email-bad"><use xlink:href="#icon-email-bad"/></svg> Invalid</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-link btn-icon dropdown-toggle" data-toggle="dropdown">
<svg class="icon icon-email-good"><use xlink:href="#icon-email-good"/></svg> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><svg class="icon icon-email-good"><use xlink:href="#icon-email-good"/></svg> 2-way emailing</a></li>
<li><a href="#"><svg class="icon icon-email-neutral"><use xlink:href="#icon-email-neutral"/></svg> No replies</a></li>
<li><a href="#"><svg class="icon icon-email-bad"><use xlink:href="#icon-email-bad"/></svg> Opt-out</a></li>
<li><a href="#"><svg class="icon icon-email-bad"><use xlink:href="#icon-email-bad"/></svg> Invalid</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default btn-icon dropdown-toggle" data-toggle="dropdown">
<svg class="icon icon-phone-bad"><use xlink:href="#icon-phone-bad"/></svg> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><svg class="icon icon-phone-good"><use xlink:href="#icon-phone-good"/></svg> Talking to prospect</a></li>
<li><a href="#"><svg class="icon icon-phone-neutral"><use xlink:href="#icon-phone-neutral"/></svg> No conversations</a></li>
<li><a href="#"><svg class="icon icon-phone-bad"><use xlink:href="#icon-phone-bad"/></svg> Opt-out</a></li>
<li><a href="#"><svg class="icon icon-phone-bad"><use xlink:href="#icon-phone-bad"/></svg> Wrong number</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-link btn-icon dropdown-toggle" data-toggle="dropdown">
<svg class="icon icon-phone-neutral"><use xlink:href="#icon-phone-neutral"/></svg> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><svg class="icon icon-phone-good"><use xlink:href="#icon-phone-good"/></svg> Talking to prospect</a></li>
<li><a href="#"><svg class="icon icon-phone-neutral"><use xlink:href="#icon-phone-neutral"/></svg> No conversations</a></li>
<li><a href="#"><svg class="icon icon-phone-bad"><use xlink:href="#icon-phone-bad"/></svg> Opt-out</a></li>
<li><a href="#"><svg class="icon icon-phone-bad"><use xlink:href="#icon-phone-bad"/></svg> Wrong number</a></li>
</ul>
</div>
Lead category dropdowns.
<div class="btn-group">
<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
<span class="leadcat leadcat-nurture">nurture</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-leadcat" role="menu">
<li><a href="#"><span class="leadcat leadcat-archive">archive</span></a></li>
<li><a href="#"><span class="leadcat leadcat-closed">closed</span></a></li>
<li><a href="#"><span class="leadcat leadcat-hot">hot</span></a></li>
<li><a href="#"><span class="leadcat leadcat-new">new</span></a></li>
<li><a href="#"><span class="leadcat leadcat-nurture">nurture</span></a></li>
<li><a href="#"><span class="leadcat leadcat-pending">pending</span></a></li>
<li><a href="#"><span class="leadcat leadcat-qualify">qualify</span></a></li>
<li><a href="#"><span class="leadcat leadcat-trash">trash</span></a></li>
<li><a href="#"><span class="leadcat leadcat-watch">watch</span></a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
<span class="leadcat leadcat-eq-abbr leadcat-qualify">qual</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-leadcat" role="menu">
<li><a href="#"><span class="leadcat leadcat-archive">archive</span></a></li>
<li><a href="#"><span class="leadcat leadcat-closed">closed</span></a></li>
<li><a href="#"><span class="leadcat leadcat-hot">hot</span></a></li>
<li><a href="#"><span class="leadcat leadcat-new">new</span></a></li>
<li><a href="#"><span class="leadcat leadcat-nurture">nurture</span></a></li>
<li><a href="#"><span class="leadcat leadcat-pending">pending</span></a></li>
<li><a href="#"><span class="leadcat leadcat-qualify">qualify</span></a></li>
<li><a href="#"><span class="leadcat leadcat-trash">trash</span></a></li>
<li><a href="#"><span class="leadcat leadcat-watch">watch</span></a></li>
</ul>
</div>
Lead type dropdowns.
<div class="btn-group">
<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
<span class="leadtype-buyer"></span> <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-leadtype" role="menu">
<li><a href="#"><span class="leadtype-buyer"></span></a></li>
<li><a href="#"><span class="leadtype-seller"></span></a></li>
<li><a href="#"><span class="leadtype-bs"></span></a></li>
</ul>
</div>
Split button dropdowns
Similarly, create split button dropdowns with the same markup changes, only with a separate button.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Sizing
Button dropdowns work with buttons of all sizes.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Dropup variation
Trigger dropdown menus above elements by adding .dropup to the parent.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Callouts
Use these to callout important information or display messages.
Callout Attention
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus neque vel felis vehicula gravida. Aenean massa velit, bibendum nec convallis eu, imperdiet eu ante.
Callout Success
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus neque vel felis vehicula gravida. Aenean massa velit, bibendum nec convallis eu, imperdiet eu ante.
Callout Info
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus neque vel felis vehicula gravida. Aenean massa velit, bibendum nec convallis eu, imperdiet eu ante.
Callout Warning
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus neque vel felis vehicula gravida. Aenean massa velit, bibendum nec convallis eu, imperdiet eu ante.
Callout Danger
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus neque vel felis vehicula gravida. Aenean massa velit, bibendum nec convallis eu, imperdiet eu ante.
<div class="callout callout-attention">
<h4>Callout Attention</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus neque vel felis vehicula gravida. Aenean massa velit, bibendum nec convallis eu, imperdiet eu ante.</p>
</div>
<div class="callout callout-success">
<h4>Callout Success</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus neque vel felis vehicula gravida. Aenean massa velit, bibendum nec convallis eu, imperdiet eu ante.</p>
</div>
<div class="callout callout-info">
<h4>Callout Info</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus neque vel felis vehicula gravida. Aenean massa velit, bibendum nec convallis eu, imperdiet eu ante.</p>
</div>
<div class="callout callout-warning">
<h4>Callout Warning</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus neque vel felis vehicula gravida. Aenean massa velit, bibendum nec convallis eu, imperdiet eu ante.</p>
</div>
<div class="callout callout-danger">
<h4>Callout Danger</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus neque vel felis vehicula gravida. Aenean massa velit, bibendum nec convallis eu, imperdiet eu ante.</p>
</div>Links in callouts
Use the .callout-link utility class to quickly provide matching colored links within any callout.
Callout Danger
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus neque vel felis vehicula gravida. Aenean massa velit, bibendum nec convallis eu, imperdiet eu ante. I'm a callout link.
<div class="callout callout-danger">
<h4>Callout Danger</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus neque vel felis vehicula gravida. Aenean massa velit, bibendum nec convallis eu, imperdiet eu ante. <a href="#" class="callout-link">I'm a callout link</a>.</p>
</div>Cards
Cards are modular components for property listings.
Default card
The default listing card has a max-width of 320px. When used in a fluid grid, be aware that the card's layout begins to break down below a width of 250px.
<div class="card">
<div class="sash sash-reduced"><svg class="icon icon-arrow-down"><use xlink:href="#icon-arrow-down"/></svg> $35,000 (<1%) <span class="sash-time">10 mins ago</span></div>
<div class="card-photo">
<div class="card-photo-inner">
<img class="card-img" src="images/fpo-carousel-1.jpg">
</div>
</div>
<div class="card-container card-intro">
<p class="card-priority card-price">$1,250,000</p>
<p class="card-priority card-street"><a href="" target="_blank">227 Palmetto Islands Trail</a></p>
<div class="row row-xcondensed">
<div class="col-xs-7">
<p class="small">Mount Pleasant, SC</p>
<p class="small">Grassy Creek</p>
</div>
<div class="col-xs-5 text-right">
<p class="small">$250/SQFT</p>
</div>
</div>
</div> <!-- /card-container -->
<div class="card-stats">
<span class="card-stat">3 Beds</span>
<span class="card-stat">3 Baths</span>
<span class="card-stat">2800 sqft</span>
<span class="card-stat">0.35 Acres</span>
</div>
</div> <!-- /card -->Default card variations
These are some common variations of the default card.
MLS#: 1324961
LISTED: 4 days ago
TYPE: Single-Family Home
Price History
5 hrs ago
-$500,000 (10%)
$350,000
6 hrs ago
-$90,000 (12%)
$450,000
MLS#: 1324961
LISTED: 4 days ago
TYPE: Single-Family Home
Price History
5 hrs ago
-$500,000 (10%)
$350,000
6 hrs ago
-$90,000 (12%)
$450,000
MLS#: 1324961
LISTED: 4 days ago
TYPE: Single-Family Home
Price History
5 hrs ago
-$500,000 (10%)
$350,000
6 hrs ago
-$90,000 (12%)
$450,000
MLS#: 1324961
LISTED: 4 days ago
TYPE: Single-Family Home
Price History
5 hrs ago
-$500,000 (10%)
$350,000
6 hrs ago
-$90,000 (12%)
$450,000
<div class="card">
<div class="sash sash-reduced"><svg class="icon icon-arrow-down"><use xlink:href="#icon-arrow-down"/></svg> $35,000 (<1%) <span class="sash-time">10 mins ago</span></div>
<!-- ///////////////////////////////////////////////// -->
<!-- Optional: replace "card-photo" div with carousel -->
<!-- ///////////////////////////////////////////////// -->
<div class="card-photo">
<div class="card-photo-inner">
<img class="card-img" src="images/fpo-carousel-1.jpg">
</div>
</div>
<!-- ///////////////////////////////////////////////// -->
<div class="card-container card-intro">
<p class="card-priority card-price">$1,250,000</p>
<p class="card-priority card-street"><a href="" target="_blank">227 Palmetto Islands Trail</a></p>
<div class="row row-xcondensed">
<div class="col-xs-7">
<p class="small">Mount Pleasant, SC</p>
<p class="small">Grassy Creek</p>
</div>
<div class="col-xs-5 text-right">
<p class="small">$250/SQFT</p>
</div>
</div>
</div> <!-- /card-container -->
<div class="card-stats">
<span class="card-stat">3 Beds</span>
<span class="card-stat">3 Baths</span>
<span class="card-stat">2800 sqft</span>
<span class="card-stat">0.35 Acres</span>
</div>
<div class="card-container">
<div class="row row-xcondensed">
<div class="col-sm-6">
<button class="btn btn-default btn-block btn-sm"><svg class="icon icon-star"><use xlink:href="#icon-star"/></svg> 1220 Best-Fit</button>
</div>
<div class="col-sm-6">
<button class="btn btn-default btn-block btn-sm"><svg class="icon icon-heart"><use xlink:href="#icon-heart"/></svg> 11 Favs</button>
</div>
</div>
</div> <!-- /card-container -->
<div class="card-toggle collapsed" data-toggle="collapse" data-target="#card1">
<span class="card-toggle-more"><svg class="icon icon-chevron-down"><use xlink:href="#icon-chevron-down"/></svg> More Detail</span>
<span class="card-toggle-less"><svg class="icon icon-chevron-up"><use xlink:href="#icon-chevron-up"/></svg> Less Detail</span>
</div>
<div id="card1" class="card-detail collapse">
<div class="card-container">
<div class="row row-xcondensed">
<div class="col-xs-6">
<p class="small"><strong>MLS#:</strong> <a href="" target="_blank">1324961</a></p>
</div>
<div class="col-xs-6 text-right">
<p class="small"><strong>LISTED:</strong> 4 days ago</p>
</div>
</div>
<p class="small"><strong>TYPE:</strong> Single-Family Home</p>
</div> <!-- /card-container -->
<p class="card-title">Price History</p>
<div class="card-container card-price-history">
<div class="row row-xcondensed">
<div class="col-xs-3">
<p class="small">5 hrs ago</p>
</div>
<div class="col-xs-6">
<p class="small card-price-history-change"><svg class="icon icon-arrow-down"><use xlink:href="#icon-arrow-down"/></svg> -$500,000 (10%)</p>
</div>
<div class="col-xs-3 text-right">
<p class="small">$350,000</p>
</div>
</div>
<div class="row row-xcondensed">
<div class="col-xs-3">
<p class="small">6 hrs ago</p>
</div>
<div class="col-xs-5 col-xs-offset-1">
<p class="small card-price-history-change"><svg class="icon icon-arrow-down"><use xlink:href="#icon-arrow-down"/></svg> -$90,000 (12%)</p>
</div>
<div class="col-xs-3 text-right">
<p class="small">$450,000</p>
</div>
</div>
</div> <!-- /card-price-history -->
<div class="card-container">
<div class="row row-xcondensed">
<div class="col-sm-6">
<button class="btn btn-default btn-sm btn-block"><svg class="icon icon-location"><use xlink:href="#icon-location"/></svg> Map View</button>
</div>
<div class="col-sm-6">
<button class="btn btn-default btn-sm btn-block">Full Details <svg class="icon icon-arrow-bend-right"><use xlink:href="#icon-arrow-bend-right"/></svg> </button>
</div>
</div>
</div> <!-- /card-container -->
</div> <!-- /card-detail -->
</div> <!-- /card -->Card Carousels
Including a carousel inside of the card is easy. Simply remove the .card-photo div and replace it with the carsousel code seen here - javascript.html#carousel
Small card
The small listing card has a min-width of 216px and a max width of 250px.
$1,250,000
$250/SQFT
<div class="card card-sm">
<div class="card-photo">
<div class="card-photo-inner">
<div class="sash sash-reduced"><svg class="icon icon-arrow-down"><use xlink:href="#icon-arrow-down"/></svg> $35,000 (10%) <span class="sash-time">10 mins ago</span></div>
<img class="card-img" src="images/fpo-carousel-3.jpg">
</div>
</div>
<div class="card-sm-container">
<div class="row row-xcondensed">
<div class="col-xs-8">
<p class="card-sm-priority card-sm-street"><a href="" target="_blank">227 Palmetto Islands Trail</a></p>
<p class="xsmall">Mount Pleasant, SC</p>
<p class="xsmall">Grassy Creek</p>
</div>
<div class="col-xs-4 text-right">
<p class="card-sm-priority card-sm-price">$1,250,000</p>
<p class="xsmall">$250/SQFT</p>
</div>
</div>
</div>
<div class="card-sm-stats">
<span class="card-sm-stat">3 Beds</span>
<span class="card-sm-stat">3 Baths</span>
<span class="card-sm-stat">2800 sqft</span>
<span class="card-sm-stat">0.35 Acres</span>
</div>
</div>Small card variations
These are some common variations of the small card.
$1,250,000
$250/SQFT
$1,250,000
$250/SQFT
<div class="card card-sm">
<div class="card-photo">
<div class="card-photo-inner">
<div class="sash sash-reduced"><svg class="icon icon-arrow-down"><use xlink:href="#icon-arrow-down"/></svg> $35,000 (10%) <span class="sash-time">10 mins ago</span></div>
<img class="card-img" src="images/fpo-carousel-3.jpg">
</div>
</div>
<div class="card-sm-container">
<div class="row row-xcondensed">
<div class="col-xs-8">
<p class="card-sm-priority card-sm-street"><a href="" target="_blank">227 Palmetto Islands Trail</a></p>
<p class="xsmall">Mount Pleasant, SC</p>
<p class="xsmall">Grassy Creek</p>
</div>
<div class="col-xs-4 text-right">
<p class="card-sm-priority card-sm-price">$1,250,000</p>
<p class="xsmall">$250/SQFT</p>
</div>
</div>
</div>
<div class="card-sm-stats">
<span class="card-sm-stat">3 Beds</span>
<span class="card-sm-stat">3 Baths</span>
<span class="card-sm-stat">2800 sqft</span>
<span class="card-sm-stat">0.35 Acres</span>
</div>
<div class="card-sm-container">
<div class="row row-xcondensed">
<div class="col-sm-6">
<button class="btn btn-default btn-block btn-sm"><svg class="icon icon-star"><use xlink:href="#icon-star"/></svg> 1220 Best-Fit</button>
</div>
<div class="col-sm-6">
<button class="btn btn-default btn-block btn-sm"><svg class="icon icon-heart"><use xlink:href="#icon-heart"/></svg> 11 Favs</button>
</div>
</div>
</div>
</div>Circles
Circles are just the colored dots next to times, online now, etc.
Default Circles
Default
circle-now
circle-today
circle-14-days
circle-90-days
circle-forever
<p><i class="circle"></i> <em>Default</em></p>
<p><i class="circle circle-now"></i> <code>circle-now</code></p>
<p><i class="circle circle-today"></i> <code>circle-today</code></p>
<p><i class="circle circle-14-days"></i> <code>circle-14-days</code></p>
<p><i class="circle circle-90-days"></i> <code>circle-90-days</code></p>
<p><i class="circle circle-forever"></i> <code>circle-forever</code></p>
Dropdowns
Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.
Example
Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
Alignment
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.
May require additional positioning
Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain overflow properties or appear out of bounds of the viewport. Address these issues on your own as they arise.
Deprecated .pull-right alignment
As of v3.1.0, we've deprecated .pull-right on dropdown menus. To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
...
</ul>
Headers
Add a header to label sections of actions in any dropdown menu.
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation" class="dropdown-header">Dropdown header</li>
...
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Dropdown header</li>
...
</ul>
Divider
Add a divider to separate series of links in a dropdown menu.
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
...
<li role="presentation" class="divider"></li>
...
</ul>Disabled menu items
Add .disabled to a <li> in the dropdown to disable the link.
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>
No min-width menu
Bootstrap's dropdown menus have a default min-width of 160px. If you want a dropdown menu that doesn't have a defined min-width, simply add .dropdown-menu-no-min-width to the .dropdown-menu menu class.
<ul class="dropdown-menu dropdown-menu-no-min-width" role="menu" aria-labelledby="dropdownMenu4">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a></li>
</ul>Icons
We have a serious set of SVG icons. In our system, we are injecting the SVG sprite in the top of each page via AJAX. While SVG 'use' pointing to an external source would have been ideal, we decided that we didn't want to maintain polyfills for the IE browser.
Utility, Interface, Action Icons
<svg class="icon icon-heart"><use xlink:href="#icon-heart"/></svg>
<svg class="icon icon-eye"><use xlink:href="#icon-eye"/></svg>
<svg class="icon icon-chat"><use xlink:href="#icon-chat"/></svg>
<svg class="icon icon-user"><use xlink:href="#icon-user"/></svg>
<svg class="icon icon-cog"><use xlink:href="#icon-cog"/></svg>
<svg class="icon icon-chevron-left"><use xlink:href="#icon-chevron-left"/></svg>
<svg class="icon icon-chevron-right"><use xlink:href="#icon-chevron-right"/></svg>
Communication Status Icons
<!-- 2-way emailing -->
<svg class="icon icon-email-good"><use xlink:href="#icon-email-good"/></svg>
<!-- no replies -->
<svg class="icon icon-email-neutral"><use xlink:href="#icon-email-neutral"/></svg>
<!-- opt-out or invalid -->
<svg class="icon icon-email-bad"><use xlink:href="#icon-email-bad"/></svg>
<!-- talking to prospect -->
<svg class="icon icon-phone-good"><use xlink:href="#icon-phone-good"/></svg>
<!-- no conversations -->
<svg class="icon icon-phone-neutral"><use xlink:href="#icon-phone-neutral"/></svg>
<!-- opt-out or wrong number -->
<svg class="icon icon-phone-bad"><use xlink:href="#icon-phone-bad"/></svg>
<!-- texting to prospect -->
<svg class="icon icon-text-good"><use xlink:href="#icon-text-good"/></svg>
<!-- no conversations -->
<svg class="icon icon-text-neutral"><use xlink:href="#icon-text-neutral"/></svg>
<!-- opt-out or wrong number -->
<svg class="icon icon-text-bad"><use xlink:href="#icon-text-bad"/></svg>
Input groups
Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control.
Cross-browser compatibility
Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.
Tooltips & popovers in input groups require special setting
When using tooltips or popovers on elements within an .input-group, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).
Don't mix with other components
Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.
Basic example
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
We do not support multiple add-ons on a single side.
We do not support multiple form-controls in a single input group.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>Sizing
Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
Checkboxes and radio addons
Place any checkbox or radio option within an input group's addon instead of text.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Button addons
Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Buttons with dropdowns
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Segmented buttons
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control">
</div>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>
Labels
Example
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<h3>Example heading <span class="label label-default">New</span></h3>
Available variations
Add any of the below mentioned modifier classes to change the appearance of a label.
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
<span class="label label-attention">Attention</span>
Lead categories
Lead category labels extend the .label class.
Default
<span class="leadcat leadcat-archive">arch</span>
<span class="leadcat leadcat-closed">close</span>
<span class="leadcat leadcat-hot">hot</span>
<span class="leadcat leadcat-new">new</span>
<span class="leadcat leadcat-nurture">nurt</span>
<span class="leadcat leadcat-pending">pend</span>
<span class="leadcat leadcat-qualify">qual</span>
<span class="leadcat leadcat-trash">trash</span>
<span class="leadcat leadcat-watch">watch</span>
Muted version
For muted category labels, include the .leadcat-muted class.
<span class="leadcat leadcat-muted leadcat-archive">arch</span>
<span class="leadcat leadcat-muted leadcat-closed">close</span>
<span class="leadcat leadcat-muted leadcat-hot">hot</span>
<span class="leadcat leadcat-muted leadcat-new">new</span>
<span class="leadcat leadcat-muted leadcat-nurture">nurt</span>
<span class="leadcat leadcat-muted leadcat-pending">pend</span>
<span class="leadcat leadcat-muted leadcat-qualify">qual</span>
<span class="leadcat leadcat-muted leadcat-trash">trash</span>
<span class="leadcat leadcat-muted leadcat-watch">watch</span>
Disabled version
For disabled leadcats, include leadcat-disabled. It will override any other leadcat class.
<span class="leadcat leadcat-muted leadcat-disabled leadcat-archive">arch</span>
<span class="leadcat leadcat-muted leadcat-disabled leadcat-closed">close</span>
<span class="leadcat leadcat-muted leadcat-disabled leadcat-hot">hot</span>
<span class="leadcat leadcat-muted leadcat-disabled leadcat-new">new</span>
<span class="leadcat leadcat-muted leadcat-disabled leadcat-nurture">nurt</span>
<span class="leadcat leadcat-muted leadcat-disabled leadcat-pending">pend</span>
<span class="leadcat leadcat-muted leadcat-disabled leadcat-qualify">qual</span>
<span class="leadcat leadcat-muted leadcat-disabled leadcat-trash">trash</span>
<span class="leadcat leadcat-muted leadcat-disabled leadcat-watch">watch</span>
Lead types
Lead type labels extend the .label class.
Default
Default lead types are equal width. Yes, even that B | S is 36px. ;) Use the .leadtype class.
<span class="leadtype leadtype-buyer"></span>
<span class="leadtype leadtype-seller"></span>
<span class="leadtype leadtype-bs"></span>
Square
Square leadtypes are narrow and stack vertically. Use .leadtype-square for 18px lead type icons.
<span class="leadtype leadtype-square leadtype-buyer"></span>
<span class="leadtype leadtype-square leadtype-seller"></span>
<span class="leadtype leadtype-square leadtype-bs"></span>
Square Small
How cute. Use .leadtype-square-sm for 13px lead type icons.
<span class="leadtype leadtype-square-sm leadtype-buyer"></span>
<span class="leadtype leadtype-square-sm leadtype-seller"></span>
<span class="leadtype leadtype-square-sm leadtype-bs"></span>
List group
List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
Basic example
The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Badges
Add the badges component to any list group item and it will automatically be positioned on the right.
- 14 Cras justo odio
- 2 Dapibus ac facilisis in
- 1 Morbi leo risus
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Linked items
Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Disabled items
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>Contextual classes
Use contextual classes to style list items, default or linked. Also includes .active state.
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum at eros
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
Custom content
Add nearly any HTML within, even for linked list groups like the one below.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
Loaders
Loaders are used to inform users that data is being filtered, retrieved, processed, etc.
<div class="loader">
<span class="loader-pulse"></span>
<span class="loader-pulse"></span>
<span class="loader-pulse"></span>
</div>
Want to center the loader animation? No hay problemo! Just add the .text-center class.
<div class="loader text-center">
<span class="loader-pulse"></span>
<span class="loader-pulse"></span>
<span class="loader-pulse"></span>
</div>
Small
You guessed it! Add loader-sm for a 12px loader.
<div class="loader loader-sm">
<span class="loader-pulse"></span>
<span class="loader-pulse"></span>
<span class="loader-pulse"></span>
</div>
Desaturated (gray)
For a lighter weight loader, use loader-desaturated.
<div class="loader loader-desaturated">
<span class="loader-pulse"></span>
<span class="loader-pulse"></span>
<span class="loader-pulse"></span>
</div>
Log call
Modular component for logging a call.
Basic log call example
This is the basic construction of the log call component.
<div class="log-call">
<div class="log-call__body">
<div class="log-call__phones">
<div class="btn-group log-call__phones__dropdown">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
<svg class="icon icon-phone-good"><use xlink:href="#icon-phone-good"/></svg> 888-555-1111 (home) <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><svg class="icon icon-phone-good"><use xlink:href="#icon-phone-good"/></svg> 888-555-1111 (home)</a></li>
<li><a href="#"><svg class="icon icon-phone-neutral"><use xlink:href="#icon-phone-neutral"/></svg> 888-555-2222 (cell)</a></li>
</ul>
</div>
</div>
<div class="log-call__status">
<div class="list-group">
<a href="#" class="list-group-item"><svg class="icon icon-phone-good"><use xlink:href="#icon-phone-good"/></svg> Talked to Prospect</a>
<a href="#" class="list-group-item"><svg class="icon icon-speaker"><use xlink:href="#icon-speaker"/></svg> Left Message</a>
<a href="#" class="list-group-item"><svg class="icon icon-phone-neutral"><use xlink:href="#icon-phone-neutral"/></svg> Call Attempt <em>(no message)</em></a>
<a href="#" class="list-group-item"><svg class="icon icon-phone-bad"><use xlink:href="#icon-phone-bad"/></svg> Opted Out</a>
<a href="#" class="list-group-item"><svg class="icon icon-phone-bad"><use xlink:href="#icon-phone-bad"/></svg> Wrong Number</a>
</div>
</div>
<div class="log-call__comments">
<textarea class="form-control" rows="3" placeholder="Optional details"></textarea>
</div>
<div class="log-call__checkboxes">
<div class="log-call__checkbox fauxbox fauxbox-inline">
<input type="checkbox" id="share-agent" checked>
<label for="share-agent">Share with Agent</label>
</div>
<div class="log-call__checkbox fauxbox fauxbox-inline">
<input type="checkbox" id="share-lender" checked>
<label for="share-lender">Share with Lender</label>
</div>
<div class="log-call__checkbox fauxbox fauxbox-inline">
<input type="checkbox" id="notify-agent">
<label for="notify-agent">Notify Agent</label>
</div>
<div class="log-call__checkbox fauxbox fauxbox-inline">
<input type="checkbox" id="notify-lender">
<label for="notify-lender">Notify Lender</label>
</div>
</div>
</div> <!-- end log-call__body -->
</div> <!-- end log-call -->Interaction note
When a log call status button is clicked, it should receive the .active class.
Log call in small modal
This is the log call component wrapped in a small modal. Add the .log-call--modal and .log-call--modal-sm modifier classes to the existing .log-call class.
Log call in modals
When using the log call component in a modal, the .log-call--modal modifier class is required. Currently there are no additional modifier classes required for use within default and large modals.
<div class="modal">
<div class="modal-dialog modal-sm log-call log-call--modal log-call--modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><svg class="icon icon-phone"><use xlink:href="#icon-phone"/></svg> Log Call: April Summers</h4>
</div>
<div class="modal-body log-call__body">
<div class="log-call__phones">
<div class="btn-group log-call__phones__dropdown">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
<svg class="icon icon-phone-good"><use xlink:href="#icon-phone-good"/></svg> 888-555-1111 (home) <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><svg class="icon icon-phone-good"><use xlink:href="#icon-phone-good"/></svg> 888-555-1111 (home)</a></li>
<li><a href="#"><svg class="icon icon-phone-neutral"><use xlink:href="#icon-phone-neutral"/></svg> 888-555-2222 (cell)</a></li>
</ul>
</div>
</div>
<div class="log-call__status">
<div class="list-group">
<a href="#" class="list-group-item"><svg class="icon icon-phone-good"><use xlink:href="#icon-phone-good"/></svg> Talked to Prospect</a>
<a href="#" class="list-group-item"><svg class="icon icon-speaker"><use xlink:href="#icon-speaker"/></svg> Left Message</a>
<a href="#" class="list-group-item"><svg class="icon icon-phone-neutral"><use xlink:href="#icon-phone-neutral"/></svg> Call Attempt <em>(no message)</em></a>
<a href="#" class="list-group-item"><svg class="icon icon-phone-bad"><use xlink:href="#icon-phone-bad"/></svg> Opted Out</a>
<a href="#" class="list-group-item"><svg class="icon icon-phone-bad"><use xlink:href="#icon-phone-bad"/></svg> Wrong Number</a>
</div>
</div>
<div class="log-call__comments">
<textarea class="form-control" rows="3" placeholder="Optional details"></textarea>
</div>
<div class="log-call__checkboxes">
<div class="log-call__checkbox fauxbox fauxbox-inline">
<input type="checkbox" id="share-agent" checked>
<label for="share-agent">Share with Agent</label>
</div>
<div class="log-call__checkbox fauxbox fauxbox-inline">
<input type="checkbox" id="share-lender" checked>
<label for="share-lender">Share with Lender</label>
</div>
<div class="log-call__checkbox fauxbox fauxbox-inline">
<input type="checkbox" id="notify-agent">
<label for="notify-agent">Notify Agent</label>
</div>
<div class="log-call__checkbox fauxbox fauxbox-inline">
<input type="checkbox" id="notify-lender">
<label for="notify-lender">Notify Lender</label>
</div>
</div>
</div> <!-- end log-call__body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div> <!-- end log-call -->Log call combined with set to-do component
This is the log call and set to-do component combined in a small modal. Simply add the necessary set to-do classes .set-to-do .set-to-do--modal .set-to-do--modal-sm to the existing log call component.
Interaction note (log call)
When a log call status button is clicked it will trigger the reveal of the set to-do componenet using the collapse plug-in.
Interaction note (set to-do)
When a set to-do date button is clicked, it should receive the .active class, change the displayed date accordingly, and the .hide class should be removed from .set-to-do__cancel.
Then, when the cancel to-do button is clicked, it should receive the .hide class and reset the displayed date accordingly.
<div class="modal">
<div class="modal-dialog modal-sm log-call log-call--modal log-call--modal-sm set-to-do--modal set-to-do--modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><svg class="icon icon-phone"><use xlink:href="#icon-phone"/></svg> Log Call: April Summers</h4>
</div>
<div class="modal-body log-call__body">
<div class="log-call__phones">
<div class="btn-group log-call__phones__dropdown">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
<svg class="icon icon-phone-good"><use xlink:href="#icon-phone-good"/></svg> 888-555-1111 (home) <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><svg class="icon icon-phone-good"><use xlink:href="#icon-phone-good"/></svg> 888-555-1111 (home)</a></li>
<li><a href="#"><svg class="icon icon-phone-neutral"><use xlink:href="#icon-phone-neutral"/></svg> 888-555-2222 (cell)</a></li>
</ul>
</div>
</div>
<div class="log-call__status">
<div class="list-group">
<a href="#" class="list-group-item"><svg class="icon icon-phone-good"><use xlink:href="#icon-phone-good"/></svg> Talked to Prospect</a>
<a href="#" class="list-group-item"><svg class="icon icon-speaker"><use xlink:href="#icon-speaker"/></svg> Left Message</a>
<a href="#" class="list-group-item"><svg class="icon icon-phone-neutral"><use xlink:href="#icon-phone-neutral"/></svg> Call Attempt <em>(no message)</em></a>
<a href="#" class="list-group-item"><svg class="icon icon-phone-bad"><use xlink:href="#icon-phone-bad"/></svg> Opted Out</a>
<a href="#" class="list-group-item"><svg class="icon icon-phone-bad"><use xlink:href="#icon-phone-bad"/></svg> Wrong Number</a>
</div>
</div>
<div class="log-call__comments">
<textarea class="form-control" rows="3" placeholder="Optional details"></textarea>
</div>
<div class="log-call__checkboxes">
<div class="log-call__checkbox fauxbox fauxbox-inline">
<input type="checkbox" id="share-agent" checked>
<label for="share-agent">Share with Agent</label>
</div>
<div class="log-call__checkbox fauxbox fauxbox-inline">
<input type="checkbox" id="share-lender" checked>
<label for="share-lender">Share with Lender</label>
</div>
<div class="log-call__checkbox fauxbox fauxbox-inline">
<input type="checkbox" id="notify-agent">
<label for="notify-agent">Notify Agent</label>
</div>
<div class="log-call__checkbox fauxbox fauxbox-inline">
<input type="checkbox" id="notify-lender">
<label for="notify-lender">Notify Lender</label>
</div>
</div>
</div> <!-- end log-call__body -->
<div class="collapse modal-body set-to-do__body">
<div class="set-to-do__date">Schedule a To-Do?</div>
<a href="#" class="set-to-do__cancel hide">cancel to-do</a>
<div class="set-to-do__date-btns">
<button class="btn btn-sm btn-default">Today</button>
<button class="btn btn-sm btn-default">Tomorrow</button>
<button class="btn btn-sm btn-default">2 Days</button>
<button class="btn btn-sm btn-default">3 Days</button>
<button class="btn btn-sm btn-default">1 Week</button>
<button class="btn btn-sm btn-default">2 Weeks</button>
<button class="btn btn-sm btn-default">3 Weeks</button>
<button class="btn btn-sm btn-default">1 Month</button>
<button class="btn btn-sm btn-default"><svg class="icon icon-schedule"><use xlink:href="#icon-schedule"/></svg> Select Date</button>
</div>
<div class="set-to-do__time">
<span id="set-to-do__time__radios3" class="set-to-do__time__radios">
<div class="set-to-do__time__radio fauxdio fauxdio-inline">
<input id="to-do-anytime3" type="radio" name="set-to-do-time3" checked>
<label for="to-do-anytime3">Anytime</label>
</div>
<div class="set-to-do__time__radio fauxdio fauxdio-inline">
<input id="to-do-specific-time3" type="radio" name="set-to-do-time3">
<label for="to-do-specific-time3">Specific Time</label>
</div>
</span>
<span id="set-to-do__time__opts3" class="set-to-do__time__opts hide">
<select class="selectpicker" data-style="btn-default btn-xs" data-width="50px">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select class="selectpicker" data-style="btn-default btn-xs" data-width="50px">
<option>00</option>
<option>15</option>
<option>30</option>
<option>45</option>
</select>
<select class="selectpicker" data-style="btn-default btn-xs" data-width="54px">
<option>am</option>
<option>pm</option>
</select>
</span>
</div>
<div class="set-to-do__category">
<select class="selectpicker" data-style="btn-default btn-sm" data-width="100%">
<option>Follow-up</option>
<option>Call</option>
<option>Email</option>
<option>Fax</option>
<option>Mail</option>
<option>Meeting</option>
<option>Arrival Date</option>
<option>Showing</option>
<option>Closing</option>
<option>Open House</option>
<option>Thank You</option>
</select>
</div>
<div class="set-to-do__comments">
<textarea class="form-control" rows="3" placeholder="Optional details"></textarea>
</div>
<div class="set-to-do__assign">
<p class="small">Assign To-Do to:</p>
<select class="selectpicker" data-style="btn-default btn-sm" data-width="100%">
<option>Sean McCambridge (assassin)</option>
<option>Mark Funk (overlord)</option>
<option>Geore Mountis (joker)</option>
</select>
</div>
</div> <!-- end set-to-do__body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div> <!-- end log-call and set-to-do -->Markers
Use these to represent current searching / filtering parameters.
Default Markers
All markers extend the .label class.
<span class="marker marker-default"><span>Mark Funk</span> <svg class="icon icon-cross"><use xlink:href="#icon-cross"/></svg></span>
<span class="marker marker-primary"><span>Craig Anthony</span> <svg class="icon icon-cross"><use xlink:href="#icon-cross"/></svg></span>
<span class="marker marker-attention"><span>Sean McCambridge</span> <svg class="icon icon-cross"><use xlink:href="#icon-cross"/></svg></span>
<span class="marker marker-success"><span>Kristina O'Connell</span> <svg class="icon icon-cross"><use xlink:href="#icon-cross"/></svg></span>
<span class="marker marker-info"><span>J.D. Livingstone</span> <svg class="icon icon-cross"><use xlink:href="#icon-cross"/></svg></span>
<span class="marker marker-warning"><span>George Mountis</span> <svg class="icon icon-cross"><use xlink:href="#icon-cross"/></svg></span>
<span class="marker marker-danger"><span>Brutus Anthony</span> <svg class="icon icon-cross"><use xlink:href="#icon-cross"/></svg></span>
<span class="marker marker-dark"><span>Bersicker</span> <svg class="icon icon-cross"><use xlink:href="#icon-cross"/></svg></span>
Contextual Markers
These standard markers have been created for convenience and consistency.
<span class="marker marker-name"><span>Grier Allen</span> <svg class="icon icon-cross"><use xlink:href="#icon-cross"/></svg></span>
<span class="marker marker-zip"><span>29403</span> <svg class="icon icon-cross"><use xlink:href="#icon-cross"/></svg></span>
Message faces
Message faces are delightful little fellas designed to be used alongside simple user messages.
<!-- no arrow -->
<div class="message-face">
<div class="message-face-eyes">
<span class="message-face-eye"></span>
<span class="message-face-eye"></span>
</div>
<div class="message-face-mouth"></div>
</div>
<!-- left arrow -->
<div class="message-face message-face-arrow-left">
<div class="message-face-eyes">
<span class="message-face-eye"></span>
<span class="message-face-eye"></span>
</div>
<div class="message-face-mouth"></div>
</div>
<!-- top arrow -->
<div class="message-face message-face-arrow-top">
<div class="message-face-eyes">
<span class="message-face-eye"></span>
<span class="message-face-eye"></span>
</div>
<div class="message-face-mouth"></div>
</div>
<!-- right arrow -->
<div class="message-face message-face-arrow-right">
<div class="message-face-eyes">
<span class="message-face-eye"></span>
<span class="message-face-eye"></span>
</div>
<div class="message-face-mouth"></div>
</div>
<!-- bottom arrow -->
<div class="message-face message-face-arrow-bottom">
<div class="message-face-eyes">
<span class="message-face-eye"></span>
<span class="message-face-eye"></span>
</div>
<div class="message-face-mouth"></div>
</div>Navs
Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.
Small Nav Modifier
Any time .nav is used, you may add the .nav-sm modifier to reduce padding on the anchor tags.
Tabs
Note the .nav-tabs class requires the .nav base class.
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
Requires JavaScript tabs plugin
For tabs with tabbable areas, you must use the tabs JavaScript plugin.
Pills
Take that same HTML, but use .nav-pills instead.
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
Pills are also vertically stackable. Just add .nav-stacked.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Justified
Easily make tabs or pills equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked.
Safari and responsive justified navs
As of v7.0.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the justified nav example.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Disabled links
For any nav component (tabs or pills), add .disabled for gray links and no hover effects.
Link functionality not impacted
This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.
<ul class="nav nav-pills">
...
<li class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Using dropdowns
Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.
Tabs with dropdowns
<ul class="nav nav-tabs">
...
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Pills with dropdowns
<ul class="nav nav-pills">
...
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Nav Links
Default
Take the same HTML as nav tabs and nav pills, but use .nav-links instead.
The .nav-links__bar element is required. To call via jQuery, hook up your element(s) with $('#yourElement').btNavLinks();.
<ul class="nav nav-links">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<span class="nav-links__bar"></span>
</ul>Here is another example sitting on a darker background.
Nav Blocks
Default
Take the same HTML as nav tabs and nav pills, but use .nav-blocks instead.
Hook up the material-style animation with $('.your-nav-blocks').btNavLinks();
<ul class="nav nav-blocks">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<span class="nav-links__bar"></span>
</ul>Light
Take that same HTML as nav tabs and nav pills, but use .nav-blocks .nav-blocks-light instead. This is handy when nav blocks need to be used on darker backgrounds.
<ul class="nav nav-blocks nav-blocks-light">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<span class="nav-links__bar"></span>
</ul>Small
Nav tabs, nav pills, and nav blocks can be condensed when .nav-sm applied.
<ul class="nav nav-sm nav-blocks">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<span class="nav-links__bar"></span>
</ul>Muted
Adding .nav-muted will incorporate a blue bar and gray active text.
<ul class="nav nav-blocks nav-muted">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<span class="nav-links__bar"></span>
</ul>Dividers
If you need to get a little divisive, add an empty LI with .nav-blocks__divider to split your list into two parts.
<ul class="nav nav-blocks">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<li><class="nav-blocks__divider"></a></li>
<li><a href="#">Little Orphan List Item</a></li>
<span class="nav-links__bar"></span>
</ul>Navbar
Default navbar
Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.
Justified navbar nav links are currently not supported.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>Brand image
Replace the navbar brand with your own image by swapping the text for an <img>. Since the .navbar-brand has its own padding and height, you may need to override some CSS depending on your image.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>Forms
Place form content within .navbar-form for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.
As a heads up, .navbar-form shares much of its code with .form-inline via mixin. Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>Buttons
Add the .navbar-btn class to <button> elements not residing in a <form> to vertically center them in the navbar.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>Text
Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.
<p class="navbar-text">Signed in as Mark Otto</p>Non-nav links
For folks using standard links that are not within the regular navbar navigation component, use the .navbar-link class to add the proper colors for the default and inverse navbar options.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>Component alignment
Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <ul> with the respective utility class applied.
These classes are mixin-ed versions of .pull-left and .pull-right, but they're scoped to media queries for easier handling of navbar components across device sizes.
Fixed to top
Add .navbar-fixed-top and include a .container or .container-fluid to center and pad navbar content.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>Fixed to bottom
Add .navbar-fixed-bottom and include a .container or .container-fluid to center and pad navbar content.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>Static top
Create a full-width navbar that scrolls away with the page by adding .navbar-static-top and include a .container or .container-fluid to center and pad navbar content.
Unlike the .navbar-fixed-* classes, you do not need to change any padding on the body.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>Inverted navbar
Modify the look of the navbar by adding .navbar-inverse.
<nav class="navbar navbar-inverse">
...
</nav>Pagination
Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.
Default pagination
Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
<ul class="pagination">
<li><a href="#"><svg class="icon icon-chevron-left"><use xlink:href="#icon-chevron-left"/></svg></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#"><svg class="icon icon-chevron-right"><use xlink:href="#icon-chevron-right"/></svg></a></li>
</ul>
Disabled and active states
Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.
- 1 (current)
- 2
- 3
- 4
- 5
<ul class="pagination">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
You can optionally swap out active or disabled anchors for <span> to remove click functionality while retaining intended styles.
<ul class="pagination">
<li class="disabled"><span>«</span></li>
<li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
...
</ul>
Sizing
Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.
<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>
Pager
Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
Default example
By default, the pager centers links.
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
Aligned links
Alternatively, you can align each link to the sides:
<ul class="pager">
<li class="previous"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
Optional disabled state
Pager links also use the general .disabled utility class from the pagination.
<ul class="pager">
<li class="previous disabled"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
Minimal Pager
Custom Boomstrap minimal pager. This does not extend Bootstrap's pagination or pager components.
<div class="btn-group minimal-pager">
<button type="button" class="btn btn-default btn-icon"><svg class="icon icon-chevron-left"><use xlink:href="#icon-chevron-left"/></svg></button>
<button type="button" class="btn btn-default btn-icon"><svg class="icon icon-chevron-right"><use xlink:href="#icon-chevron-right"/></svg></button>
</div>
Disabled
Minimal pager buttons use the general .disabled class.
<div class="btn-group minimal-pager">
<button type="button" class="btn btn-default btn-icon disabled"><svg class="icon icon-chevron-left"><use xlink:href="#icon-chevron-left"/></svg></button>
<button type="button" class="btn btn-default btn-icon"><svg class="icon icon-chevron-right"><use xlink:href="#icon-chevron-right"/></svg></button>
</div>
Pairs
Pairs operate together to have a darker first line and a smaller, lighter second line.
<div class="pair">This is first-line content in a pair.</div>
<div class="pair">This is second-line content in a pair.</div>Panels
While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
Basic example
By default, all the .panel does is apply some basic border and padding to contain some content.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Panel with heading
Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading.
Panel title
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
Panel with footer
Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Contextual alternatives
Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
Panel title
Panel title
Panel title
Panel title
Panel title
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
With tables
Add any non-bordered .table within a panel for a seamless design. If there is a .panel-body, we add an extra border to the top of the table for separation.
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
If there is no panel body, the component moves from panel header to table without interruption.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
With list groups
Easily include full-width list groups within any panel.
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Panel sizes
Small panel
Fancy a smaller, more condensed panel? Add .panel-sm to the existing .panel class.
Panel title
<div class="panel panel-sm panel-default">
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-sm panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-sm panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>Medium panel
Fancy a slightly smaller panel? Add .panel-md to the existing .panel class.
Panel title
<div class="panel panel-md panel-default">
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-md panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-md panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>Panel with nav tabs
Easily include nav tabs inside of a panel. Add the .panel__nav-tabs class to the .nav .nav-tabs classes.
<div class="panel panel-default">
<!-- Tabs -->
<ul class="nav nav-tabs panel__nav-tabs" role="tablist">
<li class="active"><a href="#panel-tab-one" role="tab" data-toggle="tab"><svg class="icon icon-phone"><use xlink:href="#icon-phone"/></svg></a></li>
<li><a href="#panel-tab-two" role="tab" data-toggle="tab"><svg class="icon icon-sms"><use xlink:href="#icon-sms"/></svg></a></li>
<li><a href="#panel-tab-three" role="tab" data-toggle="tab"><svg class="icon icon-envelope"><use xlink:href="#icon-envelope"/></svg></a></li>
<li><a href="#panel-tab-four" role="tab" data-toggle="tab"><svg class="icon icon-clipboard"><use xlink:href="#icon-clipboard"/></svg></a></li>
<li><a href="#panel-tab-five" role="tab" data-toggle="tab"><svg class="icon icon-fire"><use xlink:href="#icon-fire"/></svg> tab</a></li>
</ul>
<div class="panel-body">
<div class="tab-content">
<!-- Tab Panes -->
<div class="tab-pane fade in active" id="panel-tab-one">
Panel Tab One
</div> <!-- end tab-pane -->
<div class="tab-pane fade" id="panel-tab-two">
Panel Tab Two
</div> <!-- end tab-pane -->
<div class="tab-pane fade" id="panel-tab-three">
Panel Tab Three
</div> <!-- end tab-pane -->
<div class="tab-pane fade" id="panel-tab-four">
Panel Tab Four
</div> <!-- end tab-pane -->
<div class="tab-pane fade" id="panel-tab-five">
Panel Tab Five
</div> <!-- end tab-pane -->
</div> <!-- end tab-content -->
</div> <!-- end panel-body -->
</div> <!-- end panel -->Contextual background classes such as .bg-gray-lightest may be added to .panel__nav-tabs.
<div class="panel panel-default">
<!-- Tabs -->
<ul class="nav nav-tabs panel__nav-tabs bg-gray-lightest" role="tablist">
<li class="active"><a href="#panel-tab-1" role="tab" data-toggle="tab">one</a></li>
<li><a href="#panel-tab-2" role="tab" data-toggle="tab">two</a></li>
<li><a href="#panel-tab-3" role="tab" data-toggle="tab">three</a></li>
</ul>
<div class="panel-body">
<div class="tab-content">
<!-- Tab Panes -->
<div class="tab-pane fade in active" id="panel-tab-1">
Panel Tab One
</div> <!-- end tab-pane -->
<div class="tab-pane fade" id="panel-tab-2">
Panel Tab Two
</div> <!-- end tab-pane -->
<div class="tab-pane fade" id="panel-tab-3">
Panel Tab Three
</div> <!-- end tab-pane -->
</div> <!-- end tab-content -->
</div> <!-- end panel-body -->
</div> <!-- end panel -->Profile Pics
Standard display of lead photo. Like, wow.
Placeholder
Used in the rare instance when there is no profile pic or initials.
<div class="profile-pic profile-pic--placeholder"></div>Default
As seen on the profile page! Pretty straightforward. 90px x 90px.
<div class="profile-pic" style="background-image: url(//media.licdn.com/mpr/mpr/shrinknp_400_400/p/1/005/087/3b6/03d99cf.jpg);" alt="Mark Funk"></div>
<div class="profile-pic" style="background-image: url(//gp1.wac.edgecastcdn.net/802892/production_public/Artist/335365/image/small/Photo_302.jpg);" alt="Frock"></div>
<div class="profile-pic" style="background-image: url(//pbs.twimg.com/profile_images/1366993370/6090_400x400.png);" alt="Zach Schnackel"></div>
<div class="profile-pic profile-pic--initials">MF</div>Small
As seen on Lead Central! 32px x 32px.
<div class="profile-pic profile-pic--sm" style="background-image: url(//media.licdn.com/mpr/mpr/shrinknp_400_400/p/1/005/087/3b6/03d99cf.jpg);" alt="Mark Funk" />
<div class="profile-pic profile-pic--sm profile-pic--initials">MF</div>Buyer/Seller
Add some meaningful color to these pretty faces.
<div class="profile-pic profile-pic--buyer" style="background-image: url(//pbs.twimg.com/profile_images/1366993370/6090_400x400.png);" alt="Zach Schnackel"></div>
<div class="profile-pic profile-pic--seller" style="background-image: url(//gp1.wac.edgecastcdn.net/802892/production_public/Artist/335365/image/small/Photo_302.jpg);" alt="Frock"></div>
<div class="profile-pic profile-pic--buyer-seller" style="background-image: url(//pbs.twimg.com/profile_images/378800000504047619/e16493b0b7a4f578a3be767e3cc105ed_400x400.jpeg);" alt="Frock"></div>
<div class="profile-pic profile-pic--initials profile-pic--buyer">BT</div>
<div class="profile-pic profile-pic--initials profile-pic--seller">RO</div>
<div class="profile-pic profile-pic--initials profile-pic--buyer-seller">KZ</div>Buyer/Seller Small
<div class="profile-pic profile-pic--sm profile-pic--buyer" style="background-image: url(//pbs.twimg.com/profile_images/1366993370/6090_400x400.png);" alt="Zach Schnackel"></div>
<div class="profile-pic profile-pic--sm profile-pic--seller" style="background-image: url(//gp1.wac.edgecastcdn.net/802892/production_public/Artist/335365/image/small/Photo_302.jpg);" alt="Frock"></div>
<div class="profile-pic profile-pic--sm profile-pic--buyer-seller" style="background-image: url(//pbs.twimg.com/profile_images/378800000504047619/e16493b0b7a4f578a3be767e3cc105ed_400x400.jpeg);" alt="Frock"></div>
<div class="profile-pic profile-pic--sm profile-pic--initials profile-pic--buyer">BT</div>
<div class="profile-pic profile-pic--sm profile-pic--initials profile-pic--seller">RO</div>
<div class="profile-pic profile-pic--sm profile-pic--initials profile-pic--buyer-seller">KZ</div>Progress bars
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
Cross-browser compatibility
Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.
Javascript
For demonstration purposes, Javascript was used to add click events to the progress bars in order to show transitions. The script is not bundled in Boomstrap's output.
Solid color
Each progress bar requires a contextual color modifier class. Click on progress bars to view transitions.
<div class="progress-bar progress-bar--success">
<div class="progress-bar__bar"></div>
</div>
<div class="progress-bar progress-bar--attention">
<div class="progress-bar__bar"></div>
</div>
<div class="progress-bar progress-bar--info">
<div class="progress-bar__bar"></div>
</div>
<div class="progress-bar progress-bar--warning">
<div class="progress-bar__bar"></div>
</div>
<div class="progress-bar progress-bar--danger">
<div class="progress-bar__bar"></div>
</div>
<div class="progress-bar progress-bar--primary">
<div class="progress-bar__bar"></div>
</div>Gradient color
Used to communicate status along with progress. Click on progress bars to view transitions.
<div class="progress-bar progress-bar--success-to-danger">
<div class="progress-bar__bar"></div>
</div>Sizes
Fancy larger or smaller progress bars? Add .progress-bar--lg,.progress-bar--sm, or .progress-bar--xs modifier classes.
<div class="progress-bar progress-bar--success progress-bar--xs">
<div class="progress-bar__bar"></div>
</div>
<div class="progress-bar progress-bar--success progress-bar--sm">
<div class="progress-bar__bar"></div>
</div>
<div class="progress-bar progress-bar--success">
<div class="progress-bar__bar"></div>
</div>
<div class="progress-bar progress-bar--success progress-bar--lg">
<div class="progress-bar__bar"></div>
</div>Labels
Labels on progress bars.
Javascript
For demonstration purposes, Javascript was used to add alter label % and to prevent labels from being hidden at low percentages. The script is not bundled in Boomstrap's output.
<div class="progress-bar progress-bar--success progress-bar--sm">
<div class="progress-bar__bar">
<div class="progress-bar__bar__label">0%</div>
</div>
</div>
<div class="progress-bar progress-bar--info">
<div class="progress-bar__bar">
<div class="progress-bar__bar__label">0%</div>
</div>
</div>
<div class="progress-bar progress-bar--attention progress-bar--lg">
<div class="progress-bar__bar">
<div class="progress-bar__bar__label">0%</div>
</div>
</div>Sashes
Sashes for showing property status.
<!-- Back on the market -->
<div class="sash sash-back">Back <span class="sash-time">10 mins ago</span></div>
<!-- New on the market -->
<div class="sash sash-new">New <span class="sash-time">10 mins ago</span></div>
<!-- Off the market -->
<div class="sash sash-off">Off <span class="sash-time">14 days ago</span></div>
<!-- Priced reduced -->
<div class="sash sash-reduced"><svg class="icon icon-arrow-down"><use xlink:href="#icon-arrow-down"/></svg> $35,000 (10%) <span class="sash-time">10 mins ago</span></div>Scores
Options
Color options for ranking / scoring data.
<span class="score score-excellent">99</span>
<span class="score score-good">75</span>
<span class="score score-average">50</span>
<span class="score">25</span>Sizes
Fancy larger or smaller scores? Add .score-lg, .score-sm, or .score-xs for additional sizes.
99 75 50 25
99 75 50 25
99 75 50 25
99 75 50 25
<!-- Large score -->
<p>
<span class="score score-excellent score-lg">99</span>
<span class="score score-good score-lg">75</span>
<span class="score score-average score-lg">50</span>
<span class="score score-lg">25</span>
</p>
<!-- Default score -->
<p>
<span class="score score-excellent">99</span>
<span class="score score-good">75</span>
<span class="score score-average">50</span>
<span class="score">25</span>
</p>
<!-- Small score -->
<p>
<span class="score score-excellent score-sm">99</span>
<span class="score score-good score-sm">75</span>
<span class="score score-average score-sm">50</span>
<span class="score score-sm">25</span>
</p>
<!-- Extra small score -->
<p>
<span class="score score-excellent score-xs">99</span>
<span class="score score-good score-xs">75</span>
<span class="score score-average score-xs">50</span>
<span class="score score-xs">25</span>
</p>Set to-do
Modular component for setting up a to-do task.
Basic set to-do example
This is the basic construction of the set to-do component.
Assign To-Do to:
<div class="set-to-do">
<div class="set-to-do__body">
<div class="set-to-do__date">Friday, October 10, 2014</div>
<div class="set-to-do__date-btns">
<button class="btn btn-sm btn-default active">Today</button>
<button class="btn btn-sm btn-default">Tomorrow</button>
<button class="btn btn-sm btn-default">2 Days</button>
<button class="btn btn-sm btn-default">3 Days</button>
<button class="btn btn-sm btn-default">1 Week</button>
<button class="btn btn-sm btn-default">2 Weeks</button>
<button class="btn btn-sm btn-default">3 Weeks</button>
<button class="btn btn-sm btn-default">1 Month</button>
<button class="btn btn-sm btn-default"><svg class="icon icon-schedule"><use xlink:href="#icon-schedule"/></svg> Select Date</a>
</div>
<div class="set-to-do__time">
<span id="set-to-do__time__radios">
<div class="set-to-do__time__radio fauxdio fauxdio-inline">
<input id="to-do-anytime" type="radio" name="set-to-do-time" checked>
<label for="to-do-anytime">Anytime</label>
</div>
<div class="set-to-do__time__radio fauxdio fauxdio-inline">
<input id="to-do-specific-time" type="radio" name="set-to-do-time">
<label for="to-do-specific-time">Specific Time</label>
</div>
</span>
<span id="set-to-do__time__opts" class="set-to-do__time__opts hide">
<select class="selectpicker" data-style="btn-default btn-xs" data-width="50px">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select class="selectpicker" data-style="btn-default btn-xs" data-width="50px">
<option>00</option>
<option>15</option>
<option>30</option>
<option>45</option>
</select>
<select class="selectpicker" data-style="btn-default btn-xs" data-width="54px">
<option>am</option>
<option>pm</option>
</select>
</span>
</div>
<div class="set-to-do__category">
<select class="selectpicker" data-style="btn-default btn-sm" data-width="100%">
<option>Follow-up</option>
<option>Call</option>
<option>Email</option>
<option>Fax</option>
<option>Mail</option>
<option>Meeting</option>
<option>Arrival Date</option>
<option>Showing</option>
<option>Closing</option>
<option>Open House</option>
<option>Thank You</option>
</select>
</div>
<div class="set-to-do__comments">
<textarea class="form-control" rows="3" placeholder="Optional details"></textarea>
</div>
<div class="set-to-do__assign">
<p class="small">Assign To-Do to:</p>
<select class="selectpicker form-control" data-style="btn-default btn-sm" data-width="100%">
<option>Sean McCambridge (assassin)</option>
<option>Mark Funk (overlord)</option>
<option>George Mountis (joker)</option>
</select>
</div>
</div> <!-- end set-to-do__body -->
</div> <!-- end set-to-do -->Interaction note
When a set to-do date button is clicked, it should receive the .active class and change the displayed date accordingly.
When specific time is checked, the .hide class should be removed from .set-to-do__time__opts.
Set to-do in small modal
This is the set to-do component wrapped in a small modal. Add the .set-to-do--modal and .set-to-do--modal-sm modifier classes to the existing .set-to-do class.
Set to-do in modals
When using the set to-do component in a modal, the .set-to-do--modal modifier class is required. Currently there are no additional modifier classes needed for use within default and large modals.
<div class="modal">
<div class="modal-dialog modal-sm set-to-do set-to-do--modal set-to-do--modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><svg class="icon icon-checkoff"><use xlink:href="#icon-checkoff"/></svg> To-Do: April Summers</h4>
</div>
<div class="modal-body set-to-do__body">
<div class="set-to-do__date">Friday, October 10, 2014</div>
<div class="set-to-do__date-btns">
<button class="btn btn-sm btn-default active">Today</button>
<button class="btn btn-sm btn-default">Tomorrow</button>
<button class="btn btn-sm btn-default">2 Days</button>
<button class="btn btn-sm btn-default">3 Days</button>
<button class="btn btn-sm btn-default">1 Week</button>
<button class="btn btn-sm btn-default">2 Weeks</button>
<button class="btn btn-sm btn-default">3 Weeks</button>
<button class="btn btn-sm btn-default">1 Month</button>
<button class="btn btn-sm btn-default"><svg class="icon icon-schedule"><use xlink:href="#icon-schedule"/></svg> Select Date</a>
</div>
<div class="set-to-do__time">
<span id="set-to-do__time__radios" class="set-to-do__time__radios">
<div class="set-to-do__time__radio fauxdio fauxdio-inline">
<input id="to-do-anytime" type="radio" name="set-to-do-time" checked>
<label for="to-do-anytime">Anytime</label>
</div>
<div class="set-to-do__time__radio fauxdio fauxdio-inline">
<input id="to-do-specific-time" type="radio" name="set-to-do-time">
<label for="to-do-specific-time">Specific Time</label>
</div>
</span>
<span id="set-to-do__time__opts" class="set-to-do__time__opts hide">
<select class="selectpicker" data-style="btn-default btn-xs" data-width="50px">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select class="selectpicker" data-style="btn-default btn-xs" data-width="50px">
<option>00</option>
<option>15</option>
<option>30</option>
<option>45</option>
</select>
<select class="selectpicker" data-style="btn-default btn-xs" data-width="54px">
<option>am</option>
<option>pm</option>
</select>
</span>
</div>
<div class="set-to-do__category">
<select class="selectpicker" data-style="btn-default btn-sm" data-width="100%">
<option>Follow-up</option>
<option>Call</option>
<option>Email</option>
<option>Fax</option>
<option>Mail</option>
<option>Meeting</option>
<option>Arrival Date</option>
<option>Showing</option>
<option>Closing</option>
<option>Open House</option>
<option>Thank You</option>
</select>
</div>
<div class="set-to-do__comments">
<textarea class="form-control" rows="3" placeholder="Optional details"></textarea>
</div>
<div class="set-to-do__assign">
<p class="small">Assign To-Do to:</p>
<select class="selectpicker" data-style="btn-default btn-sm" data-width="100%">
<option>Sean McCambridge (assassin)</option>
<option>Mark Funk (overlord)</option>
<option>Geore Mountis (joker)</option>
</select>
</div>
</div> <!-- end set-to-do__body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div> <!-- end set-to-do -->Texting
Modular component for texting.
Basic texting example
This is the basic construction of the texting component. In proper mobile-first fashion, the texting component begins in a stacked layout.
Texting Character Count
When the texting character count texting__charcount drops below 10, add the color modifier class texting__charcount--danger to indicate that remaining characters are limited.
<div class="texting">
<div class="texting__body">
<div class="texting__convo">
<div class="texting__convo__inner">
<div class="texting__msg">
<div class="texting__msg__time">Thursday 6:00 pm</div>
<div class="texting__msg__bubble">
C'mon, throw in a buck!
<aside class="texting__msg__bubble__avatar">
<svg class="icon icon-user"><use xlink:href="#icon-user"/></svg>
</aside>
</div>
</div> <!-- end texting__msg -->
<div class="texting__msg texting__msg--user">
<div class="texting__msg__time">Thursday 6:01 pm</div>
<div class="texting__msg__bubble">
Uh-uh, I don't tip.
<aside class="texting__msg__bubble__avatar">
<img src="images/fpo-avatar.jpg">
</aside>
</div>
</div> <!-- end texting__msg -->
<div class="texting__msg">
<div class="texting__msg__time">Thursday 6:02 pm</div>
<div class="texting__msg__bubble">
You don't tip?
<aside class="texting__msg__bubble__avatar">
<svg class="icon icon-user"><use xlink:href="#icon-user"/></svg>
</aside>
</div>
</div> <!-- end texting__msg -->
<div class="texting__msg texting__msg--user">
<div class="texting__msg__time">Thursday 6:03 pm</div>
<div class="texting__msg__bubble texting__msg__bubble--error">
Nah, I don't believe in it.
<aside class="texting__msg__bubble__avatar">
<img src="images/fpo-avatar.jpg">
</aside>
</div>
<div class="texting__msg__status texting__msg__status--error">
<svg class="icon icon-warning"><use xlink:href="#icon-warning"/></svg> Message Failed To Send. <a href="">Click to retry.</a>
</div>
</div> <!-- end texting__msg -->
</div> <!-- end texting__convo__inner -->
</div> <!-- end texting__convo -->
<div class="texting__actions">
<div class="texting__actions__phones">
<select class="selectpicker form-control" data-style="btn-default btn-sm">
<option>888-555-1111 (home)</option>
<option>888-555-2222 (cell)</option>
<option>888-555-3333 (work)</option>
</select>
</div>
<div class="texting__actions__phone-assign">
<a href="#">Create New Lead</a> | <a href="#">Add to Existing Lead</a>
</div>
<hr class="texting__actions__hr">
<div class="texting__actions__templates">
<select class="selectpicker form-control" data-style="btn-default btn-sm">
<option>templates</option>
<option>templates</option>
<option>templates</option>
</select>
</div>
<div class="texting__actions__compose">
<div class="form-group">
<textarea class="form-control" rows="3" placeholder="Compose text message"></textarea>
<div class="texting__charcount">160</div>
</div>
<button class="btn btn-default btn-sm btn-primary btn-block">Send</button>
</div>
</div> <!-- end texting__actions -->
</div> <!-- end texting__body -->
</div> <!-- end texting -->Texting layout options
Utilize the .texting--md modifier class to alter layout for use in wide containers. Simply add .texting--md to the .texting class directly or use media queries to extend the .texting--md class at different break points.
<div class="texting texting--md">
...
</div>Texting panel
This is the texting component wrapped in a panel. Add the .texting--panel modifier class to the .texting class.
Text Message: Mr. White
<div class="panel panel-default texting texting--panel texting--md">
<div class="panel-heading">
<h3 class="panel-title"><svg class="icon icon-sms"><use xlink:href="#icon-sms"/></svg> Text Message: Mr. White</h3>
</div>
<div class="panel-body texting__body">
<div class="texting__convo">
<div class="texting__convo__inner">
<div class="texting__msg">
<div class="texting__msg__time">Thursday 6:00 pm</div>
<div class="texting__msg__bubble">
C'mon, throw in a buck!
<aside class="texting__msg__bubble__avatar">
<svg class="icon icon-user"><use xlink:href="#icon-user"/></svg>
</aside>
</div>
</div> <!-- end texting__msg -->
<div class="texting__msg texting__msg--user">
<div class="texting__msg__time">Thursday 6:01 pm</div>
<div class="texting__msg__bubble">
Uh-uh, I don't tip.
<aside class="texting__msg__bubble__avatar">
<img src="images/fpo-avatar.jpg">
</aside>
</div>
</div> <!-- end texting__msg -->
<div class="texting__msg">
<div class="texting__msg__time">Thursday 6:02 pm</div>
<div class="texting__msg__bubble">
You don't tip?
<aside class="texting__msg__bubble__avatar">
<svg class="icon icon-user"><use xlink:href="#icon-user"/></svg>
</aside>
</div>
</div> <!-- end texting__msg -->
<div class="texting__msg texting__msg--user">
<div class="texting__msg__time">Thursday 6:03 pm</div>
<div class="texting__msg__bubble">
Nah, I don't believe in it.
<aside class="texting__msg__bubble__avatar">
<img src="images/fpo-avatar.jpg">
</aside>
</div>
</div> <!-- end texting__msg -->
<div class="texting__msg texting__msg--user">
<div class="texting__msg__time">Thursday 6:13 pm</div>
<div class="texting__msg__bubble">
Where did you go?
<aside class="texting__msg__bubble__avatar">
<img src="images/fpo-avatar.jpg">
</aside>
</div>
</div> <!-- end texting__msg -->
</div> <!-- end texting__convo__inner -->
</div> <!-- end texting__convo -->
<div class="texting__actions">
<div class="texting__actions__phones">
<select class="selectpicker form-control" data-style="btn-default btn-sm">
<option>888-555-1111 (home)</option>
<option>888-555-2222 (cell)</option>
<option>888-555-3333 (work)</option>
</select>
</div>
<div class="texting__actions__phone-assign">
<a href="#">Create New Lead</a> | <a href="#">Add to Existing Lead</a>
</div>
<hr class="texting__actions__hr">
<div class="texting__actions__templates">
<select class="selectpicker form-control" data-style="btn-default btn-sm">
<option>templates</option>
<option>templates</option>
<option>templates</option>
</select>
</div>
<div class="texting__actions__compose">
<div class="form-group">
<textarea class="form-control" rows="3" placeholder="Compose text message"></textarea>
<div class="texting__charcount">160</div>
</div>
<button class="btn btn-default btn-sm btn-primary btn-block">Send</button>
</div>
</div> <!-- end texting__actions -->
</div> <!-- end texting__body -->
</div> <!-- end texting -->Texting in modal
This is the texting component wrapped in a modal. Add the .texting--modal modifier class to the .texting class.
<div class="modal">
<div class="modal-dialog texting texting--modal">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><svg class="icon icon-sms"><use xlink:href="#icon-sms"/></svg> Text Message: Vincent</h4>
</div>
<div class="modal-body texting__body">
<div class="texting__convo">
<div class="texting__convo__inner">
<div class="texting__msg">
<div class="texting__msg__time">Thursday 6:00 pm</div>
<div class="texting__msg__bubble">
Yeah, but do you consider a dog to be a filthy animal?
<aside class="texting__msg__bubble__avatar">
<svg class="icon icon-user"><use xlink:href="#icon-user"/></svg>
</aside>
</div>
</div> <!-- end texting__msg -->
<div class="texting__msg texting__msg--user">
<div class="texting__msg__time">Thursday 6:01 pm</div>
<div class="texting__msg__bubble">
I wouldn't go so far as to call a dog filthy but they're definitely dirty. But, a dog's got personality. Personality goes a long way.
<aside class="texting__msg__bubble__avatar">
<img src="images/fpo-avatar.jpg">
</aside>
</div>
</div> <!-- end texting__msg -->
<div class="texting__msg">
<div class="texting__msg__time">Thursday 6:02 pm</div>
<div class="texting__msg__bubble">
Ah, so by that rationale, if a pig had a better personality, he would cease to be a filthy animal. Is that true?
<aside class="texting__msg__bubble__avatar">
<svg class="icon icon-user"><use xlink:href="#icon-user"/></svg>
</aside>
</div>
</div> <!-- end texting__msg -->
<div class="texting__msg texting__msg--user">
<div class="texting__msg__time">Thursday 6:03 pm</div>
<div class="texting__msg__bubble texting__msg__bubble--error">
Well we'd have to be talkin' about one charming pig. I mean he'd have to be ten times more charmin' than that Arnold on Green Acres, you know what I'm sayin'?
<aside class="texting__msg__bubble__avatar">
<img src="images/fpo-avatar.jpg">
</aside>
</div>
</div> <!-- end texting__msg -->
</div> <!-- end texting__convo__inner -->
</div> <!-- end texting__convo -->
<div class="texting__actions">
<div class="texting__actions__phones">
<select class="selectpicker form-control" data-style="btn-default btn-sm">
<option>888-555-1111 (home)</option>
<option>888-555-2222 (cell)</option>
<option>888-555-3333 (work)</option>
</select>
</div>
<div class="texting__actions__phone-assign">
<a href="#">Create New Lead</a> | <a href="#">Add to Existing Lead</a>
</div>
<hr class="texting__actions__hr">
<div class="texting__actions__templates">
<select class="selectpicker form-control" data-style="btn-default btn-sm">
<option>templates</option>
<option>templates</option>
<option>templates</option>
</select>
</div>
<div class="texting__actions__compose">
<div class="form-group">
<textarea class="form-control" rows="3" placeholder="Compose text message"></textarea>
<div class="texting__charcount">160</div>
</div>
<button class="btn btn-default btn-sm btn-primary btn-block">Send</button>
</div>
</div> <!-- end texting__actions -->
</div> <!-- end texting__body -->
</div>
</div>
</div> <!-- end texting -->Texting welcome message
This is a simple text messaging welcome message.
<div class="texting">
<div class="texting__body">
<div class="texting__convo">
<div class="texting__convo__inner">
<div class="texting__welcome">
Hey! It's quiet in here. Send <strong>Vincent Vega</strong> a text.
<div class="message-face message-face-arrow-right">
<div class="message-face-eyes">
<span class="message-face-eye"></span>
<span class="message-face-eye"></span>
</div>
<div class="message-face-mouth"></div>
</div> <!-- end message-face -->
</div> <!-- end texting__welcome -->
</div> <!-- end texting__convo__inner -->
</div> <!-- end texting__convo -->
<div class="texting__actions">
<div class="texting__actions__phones">
<select class="selectpicker form-control" data-style="btn-default btn-sm">
<option>888-555-1111 (home)</option>
<option>888-555-2222 (cell)</option>
<option>888-555-3333 (work)</option>
</select>
</div>
<div class="texting__actions__phone-assign">
<a href="#">Create New Lead</a> | <a href="#">Add to Existing Lead</a>
</div>
<hr class="texting__actions__hr">
<div class="texting__actions__templates">
<select class="selectpicker form-control" data-style="btn-default btn-sm">
<option>templates</option>
<option>templates</option>
<option>templates</option>
</select>
</div>
<div class="texting__actions__compose">
<div class="form-group">
<textarea class="form-control" rows="3" placeholder="Compose text message"></textarea>
<div class="texting__charcount">160</div>
</div>
<button class="btn btn-default btn-sm btn-primary btn-block">Send</button>
</div>
</div> <!-- end texting__actions -->
</div> <!-- end texting__body -->
</div> <!-- end texting -->Switchers
Toggle switches.
Default switcher
The switcher is ON when the switcher's input selector (.switcher__input) is "checked."
<div class="switcher">
<input type="checkbox" checked class="switcher__input" id="switcher-demo">
<label class="switcher__label" for="switcher-demo">
<div class="switcher__inner">
<div class="switcher__on"><svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark"/></svg></div>
<div class="switcher__off"><svg class="icon icon-cross"><use xlink:href="#icon-cross"/></svg></div>
</div>
</label>
</div>Small switcher
Smaller verstion of the switcher. Add .switcher--sm modifier class to the .switcher class. Add .switcher__label--sm modifier class to the .switcher__label class.
<div class="switcher switcher--sm">
<input type="checkbox" class="switcher__input" id="switcher-sm-demo">
<label class="switcher__label switcher__label--sm" for="switcher-sm-demo">
<div class="switcher__inner">
<div class="switcher__on"><svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark"/></svg></div>
<div class="switcher__off"><svg class="icon icon-cross"><use xlink:href="#icon-cross"/></svg></div>
</div>
</label>
</div>Disabled switcher
Make buttons look unclickable by fading them back 50%. Add .switcher--disabled modifier class to the .switcher class.
<div class="switcher switcher--disabled">...</div>
<div class="switcher switcher--sm switcher--disabled">...</div>
Wells
Default well
Use the well as a simple effect on an element to give it an inset effect.
<div class="well">...</div>
Optional classes
Control padding and rounded corners with two optional modifier classes.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>