Page Elements

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.

View Accessibility Notes

<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.

<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.

Ghost Buttons

For accent use only.
The .btn-ghost and .btn-outline-ghost are semi-transparent for use on dark backgrounds or photo backgrounds.


 

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

Buttons come in four sizes:

<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.

<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.

<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.

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 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.

Heading sizes with small secondary text

h1 Bootstrap heading Secondary text

h2 Bootstrap heading Secondary text

h3 Bootstrap heading Secondary text

h4 Bootstrap heading Secondary text

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

Lead paragraph

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Small paragraph
This line of text is meant to be treated as fine print.
<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>

Mixed heading
Fancy display heading With faded secondary text
<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:

Reverse Blockquote

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

Someone famous in Source Title
Address Block
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Unstyled List
  • Integer molestie lorem at massa
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
  • Faucibus porta lacus fringilla vel

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.

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>

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>

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.

Example Listing Entry Log

Kathleen Knight made a change via BrokerWolf 3/16/17 9:05AM

MLS#: T5598201

Classification: Listing Side

Property Type: Residential

Street Number: 140

Street Name: Saint-Collins Ave

MLS#: MLS100023810

Classification: Listing Side

Property Type: Residential

Street Number: 145

Street Name: Saint-Collins Ave

Kathleen Knight made a change via BrokerWolf 3/17/17 8:12AM

Contact Type: Corporation

Company Name: TD Ameritrade

Representing: Buyer

First Name: Morgan

Last Name: Smith

Email: bill@buyers.com

Phone: 1112223333

Fax: 1112223330

Address 1: 666 Alice Ave

Address 2:

City: Bunny

Province: British Columbia

Postal Code: b1b1b1

Country: Canada

Source of Business: CANVASS - DOOR (K)

Contact Type: Corporation

Company Name: TD Ameritrade

Representing: Buyer

First Name: Morgan

Last Name: Stanley

Email: bill@buyers.com

Phone: 1112223333

Fax: 1112223330

Address 1: 666 Alice Ave

Address 2:

City: Bunny

Province: British Columbia

Postal Code: b1b1b1

Country: Canada

Source of Business: CANVASS - DOOR (K)

scan00010.pdf added 3/21/17 2:12PM by Joe Buyers

scan00009.pdf added 3/21/17 2:16PM by Joe Buyers

scan00008.pdf added 3/21/17 2:17PM by Joe Buyers

scan00010.pdf rejected 3/21/17 4:48PM by Tracie Coordinator

Tracie Coordinator added a comment 3/21/17 4:48PM
scan00010.pdf REJECTED. Wrong property, plese submit Home Warrenty for 1175 Glendon St N.

scan00010.pdf added 3/21/17 2:12PM by Joe Buyers

scan00009.pdf added 3/21/17 2:16PM by Joe Buyers

scan00008.pdf added 3/21/17 2:17PM by Joe Buyers

scan00010.pdf rejected 3/21/17 4:48PM by Tracie Coordinator

Tracie Coordinator added a comment 3/21/17 4:48PM
scan00010.pdf REJECTED. Wrong property, plese submit Home Warrenty for 1175 Glendon St N.

scan00009.pdf approved 3/22/17 4:16PM by Tracie Coordinator to Receipt of Deposit/Copy of Cheque

Receipt of Deposit/Copy of Cheque approved 3/22/17 4:16PM by Tracie Coordinator

scan00008.pdf rejected 3/22/17 4:19PM by Tracie Coordinator

Tracie Coordinator added a comment 3/22/17 4:19 PM
scan00008.pdf REJECTED. Missing signature on p 6, 7 and 12.

warrenty-1175-glendon.pdf added 3/22/17 2:12PM by Joe Buyers

agreement-1175-glendon.pdf added 3/22/17 2:13PM by Joe Buyers

scan00010.pdf moved to trash 3/22/17 5:02PM by Tracie Coordinator

scan00009.pdf moved to trash 3/22/17 5:06PM by Tracie Coordinator

warrenty-1175-glendon.pdf approved 3/22/17 5:11PM by Tracie Coordinator to Home Warrenty

Home Warrenty approved 3/22/17 5:11PM by Tracie Coordinator

agreement-1175-glendon.pdf approved 3/22/17 5:13PM by Tracie Coordinator to Agreement of Purchase and Sale

Agreement of Purchase and Sale approved 3/22/17 5:13PM by Tracie Coordinator

Receipt of Deposit/Copy of Cheque approved 3/22/17 4:16PM

Client Survey overdue 3/25/17 1:00AM
Notification sent to Joe Buyers

Install Yard Sign overdue 3/25/17 1:00AM
Notification sent to Joe Buyers

Tracie Coordinator added a comment 3/26/17 4:28 PM
Buyers are out of town until the April 1. On hold until they return.

<!-- 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.

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.

 vs. 


Example: Show different message based on screen size.

Slowly resize your browser window.

Is your screen larger than 768px?

Is your screen smaller than 768px?

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!

View Accessibility Notes

Google Icon Set


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

Overdue
Incomplete
Ready for Review
Not Yet Approved
Complete
No File

Block Labels

No File

<!-- 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.

View Accessibility Notes

Card image cap

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.

Someone famous in Source Title
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 image cap

Special title here

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

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

Someone famous in Source Title

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

Someone famous in Source Title
<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>

Tables

All Boostrap classes for tables are supported and improved.

View Accessibility Notes

Simple Table with Actions
Ranking# Name Title Since Total Sales Actions
1 Helen K. Pompeii Sales Representative 2013 $225,810,000
2 Michelle Brown Broker 2012 $221,295,000
3 Franky Ocean Sales Representative 2010 $198,332,000
<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.

Name Email Status Tools Billing
Helen K. Pompeii hkpompeii@gmail.com Active
Michelle Brown m.brown@examplerealty.com Active
Franky Ocean frankyo@hotmail.com Active
<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.

View Accessibility Notes

First Name Last Name Gender English Japanese Calculus Actions
KatherineWongfemale807092
StacySinatrafemale9088100
StephenGillmale859580
GordonMcAllenmale6055100
Alisafemale728095
JustinSmithmale10099100
RobMmale856890
PhilFoalsmale1009090
TeaganFoalsmale805065
Carlmale85100100
HelenWongfemale8685100
JoeyDeraymale1007570
Heatherfemale10080100
Brittanyfemale504555
ChristopherKmale9535100
GillianWongfemale807092
SammySinatrafemale9088100
KianGillmale859580
MeridethMcAllenmale6055100
Felicityfemale728095
AustinSmithmale10099100
BillMmale856890
AlistonFoalsmale1009090
NicolaFoalsmale805065
Kashamale85100100
JasonWongfemale8685100
GeorgeDeraymale1007570
Hamiltonfemale10080100
Bethfemale504555
KrisKmale9535100
1 - 10 / 15 (15)

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.

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

This list has no items.


For use on Darker Background

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

This list has no items.

<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>