Page Elements

Lone Wolf UI Kit

Before you begin...

Make sure you are familiar with Bootstrap'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. Their JavaScript section covers all the plug-ins that come with the framework.

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-raised btn-default">Default</button>
 <button class="btn btn-raised 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-raised btn-info">Info</button>
 <button class="btn btn-raised btn-success">Success</button>
 <button class="btn btn-raised btn-warning">Warning</button>
 <button class="btn btn-raised 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>

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-default">Default</button>
 <button class="btn btn-default btn-raised">Raised</button>
 <button class="btn btn-default btn-raised" aria-label="REPLACE ME"><i class="material-icons" aria-hidden="true">done</i></button>
 <button class="btn btn-default btn-raised"><i class="material-icons" aria-hidden="true">arrow_back</i> With Icon</button>
 <button class="btn btn-default 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-default btn-raised btn-fab" aria-label="REPLACE ME"><i class="material-icons" aria-hidden="true">add</i></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-default" aria-label="REPLACE ME">
		<i class="material-icons" aria-hidden="true">format_align_left</i>
	</button>
	<button type="button" class="btn btn-default" aria-label="REPLACE ME">
    	<i class="material-icons" aria-hidden="true">format_align_center</i>
    </button>
	<button type="button" class="btn btn-default" aria-label="REPLACE ME">
		<i class="material-icons" aria-hidden="true">format_align_right</i>
	</button>
	<button type="button" class="btn btn-default" aria-label="REPLACE ME">
		<i class="material-icons" aria-hidden="true">format_align_justify</i>
	</button>
 </div>

Typography

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>

Text and Helper Classes

Use paragraph and span styles as defined in Bootstrap. Make use of their Helper Classes for both text and layout when needed. Helper Classes include things like .clearfix, .text-justify and .pull-left which help with layout structure, as well as contextual color options for text.
Here are just a few examples, please see the Bootstrap documentation for the full list of options.

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.

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

Contextual Colors

Style to make 'muted' text.

Style to make 'primary' text.

Style to make 'success' text.

Style to make 'info' text.

Style to make 'warning' text.

Style to make 'danger' text.

<p class="text-warning">Style to make 'warning' text.</p>

Blockquote, Address Block and List Styles

Knowing these helpful typographic elements is handy when you need to format text. Here are 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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
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.

All Bootstrap Elements (Open in new tab)

Responsive Utilities

If you haven't already, we highly recommend brushing up on the Responsive Utilities, like .hidden-xs, .visible-md-inline-block, to be aware of ways to easily show or hide content/elements based on pre-defined Media Queries.

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.

All Responsive 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" />

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

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.

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>

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.

View Accessibility Notes

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

<div class="dropdown">
	<a href="#" class="btn btn-default btn-raised dropdown-toggle" data-toggle="dropdown" aria-expanded="false"  role="button" aria-haspopup="true">
		Dropdown Menu
	</a>
	<ul class="dropdown-menu" role="menu" aria-hidden="true" aria-expanded="false" aria-haspopup="true">
		<li><a href="#" role="menuitem" role="menuitem">Action</a></li>
		<li><a href="#" role="menuitem" role="menuitem">Another action</a></li>
		<li><a href="#" role="menuitem" role="menuitem">Something else here</a></li>
		<li role="separator" class="divider"></li>
		<li><a href="#" role="menuitem" role="menuitem">Separated link</a></li>
		<li role="separator" class="divider"></li>
		<li><a href="#" role="menuitem" role="menuitem">One more separated link</a></li>
	</ul>
</div>

Tables

All Boostrap classes for tables are supported and improved.

View Accessibility Notes

Simple Table with Actions

Ranking#	Name	Title	Since	Total Sales
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>Helen K. Pompeii</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-default 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-default 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-default 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
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>Helen K. Pompeii</td>
				<td>hkpompeii@gmail.com</td>
				<td>Active</td>
				<td class="text-right">
					<button type="button" rel="tooltip" title="View Notes" class="btn btn-default 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-default 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-default 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-default 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-default btn-sm">Billing</button>
						<button type="button" class="btn btn-default 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-default 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-default 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-default 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-default 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-default btn-sm">Billing</button>
						<button type="button" class="btn btn-default 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-default 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-default 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-default 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-default 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-default btn-sm">Billing</button>
						<button type="button" class="btn btn-default 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
	Gillian	Wong	female	80	70	92
	Stacy	Sinatra	female	90	88	100
	Stephen	Gill	male	85	95	80
	Gordon	McAllen	male	60	55	100
	Alisa		female	72	80	95
	Justin	Smith	male	100	99	100
	Rob	M	male	85	68	90
	Phil	Foals	male	100	90	90
	Teagan	Foals	male	80	50	65
	Carl		male	85	100	100
	Helen	Wong	female	86	85	100
	Joey	Deray	male	100	75	70
	Heather		female	100	80	100
	Brittany		female	50	45	55
	Christopher	K	male	95	35	100
Items Per Page: Change Page:

Filtered tables require a plugin to function. Please visit the tablesorter.js GitHub page for more information on use and customization.

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.

View Accessibility Notes

 <!-- 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="REPLACE ME" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="material-icons">clear</span></button>
				<h4 class="modal-title" id="REPLACE ME">Modal title</h4>
			</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-link" 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.

View Accessibility Notes

Regular ol' alert: When you have a moment, read our Tips To Get Started guide to learn what our apps can do for you.

Info Alert: Your Ticket #33333 has been updated.

Success Alert: The changes you made have been saved.

Warning Alert: Your account does not have an associated MLS ID.

Error Alert: You've hit an error, please check your information and try again.

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