Lone Wolf UI Kit

Before you begin...

Make sure you are familiar with Bootstrap 4's general structure and what's available out-of-the-box. Review their documentation on proper use of the The Grid System and Responsive Utilities in particular, these sections are imperative to writing Bootstrap semantic markup and will save you time with responsive work.

Standard sizes for Bootstrap 4 are based off xs, sm, md, lg and xl references:

// xs: Extra small devices (portrait phones, less than 544px, all classes that include “xs")
// No media query since this is the default in Bootstrap

// sm: Small devices (landscape phones, 544px and up, all classes that include “sm")
@media (min-width: 544px) { ... }

// md: Medium devices (tablets, 768px and up, all classes that include “md")
@media (min-width: 768px) { ... }

// lg: Large devices (desktops, 992px and up, all classes that include “lg")
@media (min-width: 992px) { ... }

// xl: Extra large devices (large desktops, 1200px and up, all classes that include “xl")
@media (min-width: 1200px) { ... }

Get Started

Any of the elements and components found within this UI Kit are ready to use! Just copy and paste. We've made a point of including accessibility attributes—these are important for those who use screen readers and other assistance tools, don't forget to update them so they are logical in the context you are using them in.

Buttons

Default Buttons

These are the two main button classes. 'Default' should be used in most instances, unless drawing attention to an important action. Link buttons are great for a subtle effect and for areas that are cramped for space, such as within modal footers and sidebars.

accessibility View Accessibility Notes

Default Primary Link Button

<button class="btn btn-secondary">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-link">Link Button</button>

Action Buttons

These buttons should be used very sparingly, and only to accentuate or support an important action.

Info Success Warning Danger

<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>

Outline Buttons

For accent use only.
Create a stylized, minimalist look using the .btn-*-outline classes.

Primary Secondary Info Success Warning Danger

<button class="btn btn-ghost">Ghost Button</button>
<button class="btn btn-ghost-outline">Ghost Outline</button>

Sizes

Buttons come in four sizes:

Large Normal Small X-Small

<button class="btn btn-raised btn-primary btn-lg">Large</button>
<button class="btn btn-raised btn-primary">Normal</button>
<button class="btn btn-raised btn-primary btn-sm">Small</button>
<button class="btn btn-raised btn-primary btn-xs">Extra Small</button>

Condensed

Buttons can be modified so they fit nicely into condensed areas. The button will have no margining and a reduced amount of horizontal padding.

info_outline Condensed Large info_outline Condensed Normal info_outline Condensed Small info_outline Condensed Extra Small

<button class="btn btn-secondary btn-lg btn-condensed"><i class="material-icons">info_outline</i> Condensed Large</button>
<button class="btn btn-secondary btn-condensed"><i class="material-icons">info_outline</i> Condensed Normal</button>
<button class="btn btn-secondary btn-sm btn-condensed"><i class="material-icons">info_outline</i> Condensed Small</button>
<button class="btn btn-secondary btn-xs btn-condensed"><i class="material-icons">info_outline</i> Condensed Extra Small</button>

Style Variations

Add a raised effect to a button by adding the .btn-raised class.
The circular Floating Action Button, or .btn-fab buttons, should be reserved only for appropriate important page actions. A Floating Action Button should only be used ONCE per page. See Google's Documentation.

Default Raised done arrow_back With Icon favorite add

<button class="btn btn-secondary">Default</button>
<button class="btn btn-secondary btn-raised">Raised</button>
<button class="btn btn-secondary btn-raised" aria-label="REPLACE ME"><i class="material-icons" aria-hidden="true">done</i></button>
<button class="btn btn-secondary btn-raised"><i class="material-icons" aria-hidden="true">arrow_back</i> With Icon</button>
<button class="btn btn-secondary btn-raised btn-fab btn-fab-mini" aria-label="REPLACE ME"><i class="material-icons" aria-hidden="true">favorite</i></button>
<button class="btn btn-secondary btn-raised btn-fab" aria-label="REPLACE ME"><i class="material-icons" aria-hidden="true">add</i></button>

Spinning Refresh Icon

Add a spin animation on focus to refresh buttons with an icon by using the .btn-refresh class.

<button class="btn btn-success btn-refresh"><i class="material-icons" aria-hidden="true">cached</i> Refresh</button>

Button Groups

Group Buttons together using the .btn-group class. You can style and size all buttons within the group using the .btn-group-* classes.

accessibility View Accessibility Notes

<div class="btn-group" role="group" aria-label="REPLACE ME">
<button type="button" class="btn btn-primary">One</button>
<button type="button" class="btn btn-primary">Two</button>
<button type="button" class="btn btn-primary">Three</button>
</div>

<div class="btn-group btn-group-sm btn-group-raised" role="group" aria-label="REPLACE ME">
<button type="button" class="btn btn-secondary" aria-label="REPLACE ME">
	<i class="material-icons" aria-hidden="true">format_align_left</i>
</button>
<button type="button" class="btn btn-secondary" aria-label="REPLACE ME">
	<i class="material-icons" aria-hidden="true">format_align_center</i>
</button>
<button type="button" class="btn btn-secondary" aria-label="REPLACE ME">
	<i class="material-icons" aria-hidden="true">format_align_right</i>
</button>
<button type="button" class="btn btn-secondary" aria-label="REPLACE ME">
	<i class="material-icons" aria-hidden="true">format_align_justify</i>
</button>
</div>

Circle Select Button

Circle button transforms to a check_circle icon once selected. Use the .selected class on a parent element to activate the selected icon style.

<div class="card email-card">
	<div class="card-block">
		<h5 class="card-title">Select This Item</h5>
		<small class="text-muted"><a href="#">Submitted by Rebecca</a> today 11:42am</small>
		<div class="text-sm-right">
			<button type="button" class="btn btn-select" href="javascript:void(0)" aria-label="Select"><i class="material-icons" aria-hidden="true">check_circle</i></a>
		</div>
	</div>
</div>

<script>
    $(function(){
    	// Place .select on parent .card element
    	$('.btn-select').click(function(){
            $(this).closest('.card').toggleClass('selected');
        });
    });
</script>

Collapsable

Read more about creating collapsible content in the Bootstrap 4 Documentation.

Expandable Trigger With Arrow

With BS4, any element can trigger an expandable area using the data-target attribute. Add a rotating arrow to the end of your trigger to help itentify its function.

Don't forget the aria-expanded and aria-controls accessbility markup!

<div class="card email-card">
	<div class="card-block">
		<h5 class="card-title">Expand This Item</h5>
		<div class="card-text muted">
			<p class="expand collapsed" data-toggle="collapse" href="javascript:void(0)" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
			    5 PDF attachements found.
			</p>
			<div class="collapse" id="collapseExample">
			    <p><a class="open-doc001" href="#">scan00001.pdf</a></p>
				<p><a class="open-doc002" href="#">scan00002.pdf</a></p>
				<p><a class="open-doc001" href="#">scan00003.pdf</a></p>
				<p><a class="open-doc002" href="#">scan00004.pdf</a></p>
				<p><a class="open-doc001" href="#">scan00005.pdf</a></p>
			</div>
		</div>
		<small class="text-muted"><a href="#">Submitted by Rebecca</a> today 11:42am</small>
	</div>
</div>

Typography

Headings & Lead Paragraphs

Use typography styles as defined in Bootstrap. We will review a few key typography style options here on this page, but you should refer to Bootstrap's documentation for the full range of options.

<h1>h1 Bootstrap heading <small>Secondary text</small></h1>

<h5>Lead paragraph</h5>
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
<h5>Small paragraph</h5>
<small>This line of text is meant to be treated as fine print.</small>

<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>

Text Utilities

Blockquote, Address Block, List Styles + more! Knowing these Text Utilities is handy when you need to format text. Here are just a few options:

IMPORTANT! Again, these are just a few examples to get you started. For a full-list and in-depth customization options, please refer to the Bootstrap documentation.

open_in_browser Text Utilities (Open in new tab)

Element Utilities

Make use of utilities for styling, sizing and aligning elements. Utility classes include things like .float-md-left, .clearfix, .rounded-circle, .text-success and .text-md-left.
Here are just a few examples, please see the Bootstrap documentation for the full list of options.

Border Radius + Sizing

Image has border radius of 50% and a width of 100%;

<img src="IMAGE PATH" alt="..." class="rounded-circle w-100">

Colors & Alignment

Style to make 'muted' text.

Style to make 'primary' text.

Make 'success' text and align to middle for screens larger than 'md' breakpoint.

Make 'info' text and align to middle for screens larger than 'md' breakpoint.

Make 'warning' text and align to right always.

Make 'danger' text and align to right always.

<p class="text-success text-md-center">Make 'success' text and align to middle for screens larger than 'md' breakpoint.</p>
<p class="text-danger text-right">Make 'danger' text and align to right always.</p>

clear

Close Button

Quickly add a close button to an element. Use a float class to pull to to the right side if you like.

Responsive Embed

Responsive embeds: video, object, iframe or embed element dimensions can be scaled proportionately by a 16:9 aspect ratio using .embed-responsive.embed-responsive-16by9. Or select a different ratio.

<button type="button" class="close float-xs-right" aria-label="Close">
<span aria-hidden="true" class="material-icons">clear</span>
</button>

open_in_browser All Utilities (Open in new tab)

Entry Log and Entries

Use the .entry class to seperate entries in a list. Use the container class .entry-log to house the entries in a scrollable area with a max-height: 600px.

Entries that show before and after changes should use .col columns to seperate the original and edited content. Use .entry-subtration s to cross out the value that was changed and .entry-addition span to hilight the new value.

TIP: Use collapse functionality to save vertical space. The example below shows two entries using columns to compare before and after states. And they have been tucked into a collapsible area to save space.

<!-- log title with export button -->
<div class="row">
	<div class="col-sm-8">
		<h4>Example Listing Entry Log</h4>
	</div>
	<div class="col-sm-4">
		<button type="button" class="btn btn-secondary float-sm-right m-0">EXPORT</button>
	</div>
</div>
<!-- entry log -->
<div class="entry-log">
	<div class="entry">
		<p><a href="javascript:void(0);">Someone</a> made a change via Something  DD/MM/YY</p>
		<p class="expand collapsed" data-toggle="collapse" href="javascript:void(0)" data-target="#CHANGEME" aria-expanded="false" aria-controls="DESCRIPTIONHERE">
			Title of Change
		</p>
		<div class="collapse" id="CHANGEME">
			<div class="row">
				<div class="col">
					<p>...</p>
					<p class="entry-subtraction"><strong>Label:</strong> <s>Old Value</s></p>
					<p>...</p>
				</div>
				<div class="col">
					<p>...</p>
					<p class="entry-addition"><strong>Label:</strong> <span class="bg-warning text-white">New Value</span></p>
					<p>...</p>
				</div>
			</div>
		</div>
	</div>
	<div class="entry">
		<p>...</p>
	</div>
	<div class="entry">
		<p>...</p>
	</div>
	<div class="entry">
		<p>...</p>
	</div>
</div>

Responsive Layout Utilities

If you haven't already, we highly recommend brushing up on the Responsive Layout Utilities, like .hidden-lg-down and .hidden-sm-up, to be aware of ways to easily show or hide content/elements based on screen size.

These classes are especially helpful when designing for smaller screens. A simple example would be hiding text within a button on mobile devices to save horizontal space.

accessibility View Accessibility Notes

Example: Hide button text on smaller screens

Slowly resize your browser window, the text within the second button should become hidden around 1200px.

Example: Show different message based on screen size.

Slowly resize your browser window.

open_in_browser Responsive Layout Utilities (Open in new tab)

Icons

We are using Google's Material Design (GMD) icon set. Google provides a full library of the icons. Just navigate to the Full Icon Set, then copy and paste icons!

accessibility View Accessibility Notes

Google Icon Set

open_in_browser Full Icon Set (open in a new tab)

<i class="material-icons" aria-hidden="true">done</i>

IMPORTANT! You do not need to link to the font stylesheet shown below if you are working within one of the re-branded Lone Wolf products; the link should already be included in the head of the document. This link is only provided for reference if your project is starting from scratch.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

Status Labels

Show the status of an element with text and color to give the user an idea of the status at a quick glance. The user can quickly identify if the status is good or bad and an action needs to be taken.

Inline Labels

Block Labels

<!-- Display inline-block on label -->
<div class="status-colored scolor-red">Overdue</div>
<div class="status-colored scolor-orange">Incomplete</div>
<div class="status-colored scolor-blue">Ready for Review</div>
<div class="status-colored scolor-yellow">Not Yet Approved</div>
<div class="status-colored scolor-green">Complete</div>
<div class="status-colored scolor-grey">No File</div>

<!-- Display block on label -->
<div class="status-colored scolor-grey scolor-block">No File</div>

Badge Labels

A .badge indicates status or numeric count. Add .badge-pill to give a rounded appearance.

Example heading New

Email count 7

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

<!-- text with badge -->
<h4>Example heading <span class="badge badge-default">New</span></h4>
<h4>Email count <span class="badge badge-pill badge-info">7</span></h4>
<!-- badges -->
<span class="badge badge-default">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<!-- pill badges -->
<span class="badge badge-pill badge-default">Default</span>
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-danger">Danger</span>

Cards

Cards are introduced in Bootstrap 4, but go ahead and use them now whenever you want.

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you're familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards. — Source.

Cards accept a variety of structural and class mix-ins to quickly change their look, such as .card-primary+ .card-inverse, .text-xs-center, .card-primary-outline, .card-secondary-outline, and .card-raised.
Add headers and footers to the .card-block with .card-header and .card-footer.

accessibility View Accessibility Notes

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Featured Card Header

Special title here

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Support card subtitle

Card link Card link

clear

Special title here

Some quick example text to build on the card title and make up the bulk of the card's content.

Footer of the card info.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<div class="card">
<div class="card-header">
	Featured Card Header
</div>
<div class="card-block">
	<h4 class="card-title">Special title here</h4>
	<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>

Widget Cards

Introduce a slight raise to your card. Best for use on Dashboards.

<div class="row text-center mt-4">
	<div class="col-6 col-lg-3">
		<a href="?page=inbox" class="card widget db-widget-new-documents">
			<div class="widget-title text-primary">12</div>
			<p class="card-text">Emails in Inbox</p>
		</a>
	</div>
	<div class="col-6 col-lg-3">
		<a href="?page=deals" class="card widget db-widget-overdue-tasks">
			<div class="widget-title text-info">53</div>
			<p class="card-text">Documents Waiting to File</p>
		</a>
	</div>
	<div class="col-6 col-lg-3">
		<a href="?page=tasks" class="card widget db-widget-new-deals">
			<div class="widget-title text-danger">11</div>
			<p class="card-text">Overdue Tasks</p>
		</a>
	</div>
	<div class="col-6 col-lg-3">
		<a href="?page=deals" class="card widget db-widget-ready-for-review">
			<div class="widget-title text-muted">2</div>
			<p class="card-text">Deals Without Activity</p>
		</a>
	</div>
</div>

Dropdown

Dropdowns should be used for hiding a menu of action items or a selection of related items.
Use either a .btn combined with the .dropdown-toggle class, or the more_vert Material Icon to indicate a dropdown. The .dropdown-toggle class will automatically include a caret triangle ::after the button text.
The dropdown menus that come with Bootstrap 4 are more flexible: you can use traditional ul li markup, plain a tags or even buttons. Just ensure you have the .dropdown-item class added. New with BS 4 is the option to quick

accessibility View Accessibility Notes

IMPORTANT! To position the dropdown menu correctly when active, both the trigger button and the dropdown menu need to be in a container with the .dropdown class applied.

<!-- Standard Dropdown -->
<div class="dropdown">
	<a href="#" class="btn btn-secondary btn-raised dropdown-toggle" id="dropdownMenuLink01" data-toggle="dropdown" aria-expanded="false" role="button" aria-haspopup="true">
		Dropdown Menu
	</a>
	<div class="dropdown-menu" aria-labelledby="dropdownMenuLink01">
		<a href="#" class="dropdown-item" role="menuitem">Action</a>
		<a href="#" class="dropdown-item" role="menuitem">Another action</a>
		<a href="#" class="dropdown-item" role="menuitem">Something else here</a>
		<div role="separator" class="dropdown-divider"></div>
		<a href="#" class="dropdown-item" role="menuitem">Separated link</a>
		<div role="separator" class="dropdown-divider"></div>
		<a href="#" class="dropdown-item" role="menuitem">One more separated link</a>
	</div>
</div>


<!-- Dropdown inside a button group with alignment to the right side of its parent-->
<div class="btn-group" role="group" aria-label="Group of Buttons with Dropdown Example">
	<button type="button" class="btn btn-secondary">One</button>
	<button type="button" class="btn btn-secondary">Two</button>

	<div class="btn-group dropdown" role="group">
		<button type="button" class="btn btn-secondary " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Toggle Dropdown" aria-haspopup="true">
			<i class="material-icons" aria-hidden="true">more_vert</i>
		</button>
		<div class="dropdown-menu dropdown-menu-right">
		    <button class="dropdown-item" type="button" role="menuitem">Action</button>
		    <button class="dropdown-item" type="button" role="menuitem">Another action</button>
		    <button class="dropdown-item" type="button" role="menuitem">Something else here</button>
		</div>
	</div>
</div>

Tables

All Boostrap classes for tables are supported and improved.

accessibility View Accessibility Notes

Simple Table with Actions

<div class="table-responsive">
<table class="table">
	<thead>
		<tr>
			<th class="text-center" scope="col"><span class="sr-only">Ranking</span><span aria-hidden="true">#</span></th>
			<th scope="col">Name</th>
			<th scope="col">Title</th>
			<th scope="col">Since</th>
			<th class="text-right" scope="col">Total Sales</th>
			<th class="text-right" scope="col">Actions</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="text-center">1</td>
			<td><a href="#">Helen K. Pompeii</a></td>
			<td>Sales Representative</td>
			<td>2013</td>
			<td class="text-right"> $225,810,000</td>
			<td class="td-actions text-right">
				<button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-sm" aria-label="REPLACE ME">
					<i class="material-icons" aria-hidden="true">perm_identity</i>
				</button>
				<button type="button" rel="tooltip" title="Edit Profile" class="btn btn-secondary btn-sm" aria-label="REPLACE ME">
					<i class="material-icons" aria-hidden="true">settings</i>
				</button>
				<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-sm" aria-label="REPLACE ME">
					<i class="material-icons" aria-hidden="true">delete_forever</i>
				</button>
			</td>
		</tr>
		<tr>
			<td class="text-center">2</td>
			<td>Michelle Brown</td>
			<td>Broker</td>
			<td>2012</td>
			<td class="text-right"> $221,295,000</td>
			<td class="td-actions text-right">
				<button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-sm" aria-label="REPLACE ME">
					<i class="material-icons" aria-hidden="true">perm_identity</i>
				</button>
				<button type="button" rel="tooltip" title="Edit Profile" class="btn btn-secondary btn-sm" aria-label="REPLACE ME">
					<i class="material-icons" aria-hidden="true">settings</i>
				</button>
				<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-sm" aria-label="REPLACE ME">
					<i class="material-icons" aria-hidden="true">delete_forever</i>
				</button>
			</td>
		</tr>
		<tr>
			<td class="text-center">3</td>
			<td>Franky Ocean</td>
			<td>Sales Representative</td>
			<td>2010</td>
			<td class="text-right"> $198,332,000</td>
			<td class="td-actions text-right">
				<button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-sm" aria-label="REPLACE ME">
					<i class="material-icons" aria-hidden="true">perm_identity</i>
				</button>
				<button type="button" rel="tooltip" title="Edit Profile" class="btn btn-secondary btn-sm" aria-label="REPLACE ME">
					<i class="material-icons" aria-hidden="true">settings</i>
				</button>
				<button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-sm" aria-label="REPLACE ME">
					<i class="material-icons" aria-hidden="true">delete_forever</i>
				</button>
			</td>
		</tr>
	</tbody>
</table>
</div>

Complex Table with Many Actions

Alternate row background colours with .table-striped. Use the .table-hover to add row highlight on :hover.

For tables that contain many action items, make use of the .btn-group + .dropdown-toggle + .dropdown-menu combination. Read more about Button Groups and Dropdowns above.

<div class="table-responsive">
<table class="table table-striped table-hover">
	<thead>
		<tr>
			<th scope="col">Name</th>
			<th scope="col">Email</th>
			<th scope="col">Status</th>
			<th class="text-right" scope="col">Tools</th>
			<th class="text-right" scope="col">Billing</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><a href="#">Helen K. Pompeii</a></td>
			<td>hkpompeii@gmail.com</td>
			<td>Active</td>
			<td class="text-right">
				<button type="button" rel="tooltip" title="View Notes" class="btn btn-secondary btn-sm" aria-label="REPLACE ME">
					<i class="material-icons" aria-hidden="true">assignment</i>
				</button>
				<button type="button" rel="tooltip" title="Tickets" class="btn btn-secondary btn-sm" aria-label="REPLACE ME">
					<i class="material-icons" aria-hidden="true">help</i>
				</button>
				<button type="button" rel="tooltip" title="Login" class="btn btn-info btn-sm" aria-label="REPLACE ME">
					<i class="material-icons" aria-hidden="true">person</i>
				</button>
				<button type="button" rel="tooltip" title="UA Documents" class="btn btn-secondary btn-sm" aria-label="REPLACE ME">
					<i class="material-icons" aria-hidden="true">folder</i>
				</button>
				<div class="btn-group dropdown">
					<button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-haspopup="true">
						More
						<span class="sr-only">Toggle Dropdown</span>
					</button>
					<ul class="dropdown-menu" role="menu"  aria-hidden="true">
						<li><a href="#" role="menuitem">Features</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="#" role="menuitem">Send Email</a></li>
						<li><a href="#" role="menuitem">Assign MLS</a></li>
						<li><a href="#" role="menuitem">Brokerage</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="#" role="menuitem">Domains</a></li>
					</ul>
				</div>
			</td>
			<td class="td-actions text-right">
				<!-- Split button -->
				<div class="btn-group dropdown">
					<button type="button" class="btn btn-secondary btn-sm">Billing</button>
					<button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-haspopup="true">
						<span class="sr-only">Toggle Dropdown</span>
					</button>
					<ul class="dropdown-menu" role="menu" aria-hidden="true">
						<li><a href="#" role="menuitem">Update Credit Card</a></li>
						<li><a href="#" role="menuitem">Place Charge</a></li>
						<li><a href="#" role="menuitem">Invoices</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="#" role="menuitem">Remove All Paid Features</a></li>
					</ul>
				</div>
			</td>
		</tr>
		<tr>
			<td>Michelle Brown</td>
			<td>m.brown@examplerealty.com</td>
			<td>Active</td>
			<td class="text-right">
				<button type="button" rel="tooltip" title="View Notes" class="btn btn-secondary btn-sm" aria-label="REPLACE ME">
					<i class="material-icons" aria-hidden="true">assignment</i>
				</button>
				<button type="button" rel="tooltip" title="Tickets" class="btn btn-secondary btn-sm" aria-label="REPLACE ME">
					<i class="material-icons" aria-hidden="true">help</i>
				</button>
				<button type="button" rel="tooltip" title="Login" class="btn btn-info btn-sm" aria-label="REPLACE ME">
					<i class="material-icons" aria-hidden="true">person</i>
				</button>
				<button type="button" rel="tooltip" title="UA Documents" class="btn btn-secondary btn-sm" aria-label="REPLACE ME">
					<i class="material-icons" aria-hidden="true">folder</i>
				</button>
				<div class="btn-group dropdown">
					<button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-haspopup="true">
						More
						<span class="sr-only">Toggle Dropdown</span>
					</button>
					<ul class="dropdown-menu" role="menu" aria-hidden="true">
						<li><a href="#" role="menuitem">Features</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="#" role="menuitem">Send Email</a></li>
						<li><a href="#" role="menuitem">Assign MLS</a></li>
						<li><a href="#" role="menuitem">Brokerage</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="#" role="menuitem">Domains</a></li>
					</ul>
				</div>
			</td>
			<td class="td-actions text-right">
				<!-- Split button -->
				<div class="btn-group dropdown">
					<button type="button" class="btn btn-secondary btn-sm">Billing</button>
					<button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-haspopup="true">
						<span class="sr-only">Toggle Dropdown</span>
					</button>
					<ul class="dropdown-menu" role="menu" aria-hidden="true">
						<li><a href="#" role="menuitem">Update Credit Card</a></li>
						<li><a href="#" role="menuitem">Place Charge</a></li>
						<li><a href="#" role="menuitem">Invoices</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="#" role="menuitem">Remove All Paid Features</a></li>
					</ul>
				</div>
			</td>
		</tr>
		<tr>
			<td>Franky Ocean</td>
			<td>frankyo@hotmail.com</td>
			<td>Active</td>
			<td class="text-right">
				<button type="button" rel="tooltip" title="View Notes" class="btn btn-secondary btn-sm" aria-label="REPLACE ME">
					<i class="material-icons" aria-hidden="true">assignment</i>
				</button>
				<button type="button" rel="tooltip" title="Tickets" class="btn btn-secondary btn-sm" aria-label="REPLACE ME">
					<i class="material-icons" aria-hidden="true">help</i>
				</button>
				<button type="button" rel="tooltip" title="Login" class="btn btn-info btn-sm" aria-label="REPLACE ME">
					<i class="material-icons" aria-hidden="true">person</i>
				</button>
				<button type="button" rel="tooltip" title="UA Documents" class="btn btn-secondary btn-sm" aria-label="REPLACE ME ">
					<i class="material-icons" aria-hidden="true">folder</i>
				</button>
				<div class="btn-group dropdown">
					<button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-haspopup="true">
						More
						<span class="sr-only">Toggle Dropdown</span>
					</button>
					<ul class="dropdown-menu" role="menu" aria-hidden="true">
						<li><a href="#" role="menuitem">Features</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="#" role="menuitem">Send Email</a></li>
						<li><a href="#" role="menuitem">Assign MLS</a></li>
						<li><a href="#" role="menuitem">Brokerage</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="#" role="menuitem">Domains</a></li>
					</ul>
				</div>
			</td>
			<td class="td-actions text-right">
				<!-- Split button -->
				<div class="btn-group dropdown">
					<button type="button" class="btn btn-secondary btn-sm">Billing</button>
					<button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-haspopup="true">
						<span class="sr-only">Toggle Dropdown</span>
					</button>
					<ul class="dropdown-menu" role="menu" aria-hidden="true">
						<li><a href="#" role="menuitem">Update Credit Card</a></li>
						<li><a href="#" role="menuitem">Place Charge</a></li>
						<li><a href="#" role="menuitem">Invoices</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="#" role="menuitem">Remove All Paid Features</a></li>
					</ul>
				</div>
			</td>
		</tr>
	</tbody>
</table>
</div>

Sorting Table With Filters

Use tablesorter.js to sort and filter data within tables using the inputs within the thead. You must include thead in your table for tablesorter.js to work!

Additionally, we pair the Bootstrap 3 Theme with the base plugin, so be sure to include the related CSS files for it.

accessibility View Accessibility Notes

Modals

We restyled the classic Bootstrap Modal and gave it a cleaner look.
IMPORTANT! Ensure you use the Material Design .material-icons icon for the close button.

Size variations are .modal-sm, .modal-lg, and .modal-xl. Place any of these classes on the .modal-dialog to change the width of the modal.

accessibility View Accessibility Notes

Launch demo modal

<!-- Button trigger modal -->
<button class="btn btn-primary btn-raised" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

<!-- Modal Example -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">Modal title</h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="material-icons">clear</span></button>
			</div>
			<div class="modal-body">
				Material icons are beautifully crafted, delightful, and easy to use in your web, Android, and iOS projects. Learn more about material design and our process for making these icons in the system icons section of the material design guidelines.
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary" data-dismiss="modal">Okay</button>
			</div>
		</div>
	</div>
</div>

Alerts

For these alert examples we used the .container-fluid class, so they will be fluid, please use the class .container when you use them outside of the .wrapper so they will be aligned with the general page container.

IMPORTANT! Ensure you use the Material Design .material-icons icon for the close button.

accessibility View Accessibility Notes

<div class="alert alert-info" role="alert" aria-label="REPLACE ME" aria-describedby="REPLACE ME">
<div class="container-fluid">
	<div class="alert-icon" aria-hidden="true">
		<i class="material-icons">info_outline</i>
	</div>
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
		<i class="material-icons" aria-hidden="true">clear</i>
	</button>

	<span id="REPLACE ME"><b>Info Alert:</b> Your Ticket #33333 has been updated.</span>
</div>
</div>

Empty/Default State for Lists

In some cases a table/list will be empty and should be replaced with the example below. If you're unsure please reference the project prototype or contact Design.

IMPORTANT! The verbiage in the empty list container should be updated to reflect the area it's within.

For use on White Background

For use on Darker Background

Extra class is added to remove background color. lw-empty-list-transparent

<div class="lw-empty-list">
	<p>
		This list has no items.<br>
		<button class="btn btn-primary" data-toggle="modal" data-target="#addItem">Add Items</button>
	</p>
</div>

<div class="lw-empty-list lw-empty-list-transparent">
	<p>
		This list has no items.<br>
		<button class="btn btn-primary" data-toggle="modal" data-target="#addItem">Add Items</button>
	</p>
</div>