Web Style Cheatsheet

Helper Classes

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

<p class="lead">...</p>

You can use the mark tag to highlight text.

You can use the mark tag to <mark>highlight</mark> text.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Lowercased text.

Uppercased text.

Capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

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

Someone famous in Source Title

		<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous in <a href="#">Source Title</a></small>
</blockquote>

Image Styles

Images in can be made responsive with the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

<img src="..." class="img-responsive" alt="Responsive image">

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
			<img src="..." alt="..." class="img-thumbnail">

Button Styles

Styles

<a href="#" class="btn btn-primary" type="button">Button</a> Default Button
<a href="#" class="btn btn-raised btn-primary" type="button">Button</a> Raised Button
<a href="#" class="btn btn-floating-action btn-primary" type="button"><i class="fa fa-star">&nbsp;</i></a> Floating Action Button
<a href="#" class="btn btn-icon-toggle btn-primary" type="button"><i class="fa fa-star">&nbsp;</i></a> Icon Toggle Button
<a href="#" class="btn btn-flat btn-primary" type="button">Button</a> Flat Button		

Sizes

Button btn-xs Button btn-sm Button btn Button btn-lg

<a href="#" type="button" class="btn btn-xs btn-primary">btn-xs</a>
<a href="#" type="button" class="btn btn-sm btn-primary">btn-sm</a>
<a href="#" type="button" class="btn btn btn-primary">btn</a>
<a href="#" type="button" class="btn btn-lg btn-primary">btn-lg</a>	

Button Colors

<a href="#" type="button" class="btn btn-block btn-default-bright">Default Bright</a>
<a href="#" type="button" class="btn btn-block btn-default-light">Default Light</a>
<a href="#" type="button" class="btn btn-block btn-default">Default</a>
<a href="#" type="button" class="btn btn-block btn-default-dark">Default Dark</a>
<a href="#" type="button" class="btn btn-block btn-primary">Athletic Blue</a>
<a href="#" type="button" class="btn btn-block btn-primary-bright">Clinical Blue</a>
<a href="#" type="button" class="btn btn-block btn-primary-light">Accent Blue</a>
<a href="#" type="button" class="btn btn-block btn-accent">AU Blue</a>
<a href="#" type="button" class="btn btn-block btn-accent-bright">AU Gray</a>
<a href="#" type="button" class="btn btn-block btn-accent-light">Accent Green</a>
<a href="#" type="button" class="btn btn-block btn-info">Info</a>
<a href="#" type="button" class="btn btn-block btn-success">Success</a>
<a href="#" type="button" class="btn btn-block btn-warning">Warning</a>
<a href="#" type="button" class="btn btn-block btn-danger">Danger</a>	
		

	<h3 class="main-title text-center" style="color:#003359;">Text <strong>Colors</strong></h3>
					

		<p class="text-default-dark">.text-default-dark</p>
<p class="text-default">.text-default</p>
<p class="text-default-light">.text-default-light</p>
<p class="text-default-bright">.text-default-bright</p>
<p class="text-primary">.text-primary</p>
<p class="text-primary-light">.text-primary-light</p>
<p class="text-primary-bright">.text-primary-bright</p>
<p class="text-accent">.text-accent</p>
<p class="text-accent-light">.text-accent-light</p>
<p class="text-accent-bright">.text-accent-bright</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-success">.text-success</p>
<p class="text-info">.text-info</p>
		

Divider

		<h4 class="ui horizontal divider header"><i class="icon fa fa-bullhorn" aria-hidden="true"></i>Divider </h4>	
		

Callout Styles

<div class="alert alert-callout alert-success" role="alert">
<strong>Well done!</strong> You successfully read this.</div>

<div class="alert alert-callout alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.</div>

<div class="alert alert-callout alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're not looking too good.</div>

<div class="alert alert-callout alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.</div>

Alert Styles

<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this.
</div>

<div class="alert alert-info" role="alert">
								<strong>Heads up!</strong> This alert isn't super important.
								</div>

	<div class="alert alert-warning" role="alert">
								<strong>Warning!</strong> Better check yourself, you're not looking too good.
							</div>

<div class="alert alert-danger" role="alert">		<strong>Oh snap!</strong> Change a few things and try again.
</div>

Table Styles

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

<table class="table">

Use .table-striped to add zebra-striping to any table row within the <tbody>.

<table class="table table-striped">

Add .table-condensed to make tables more compact by cutting cell padding in half.

<table class="table table-condensed">

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>