Styles


Button Styles

Styles

Default Button

Raised Button

Floating Action Button

Icon Toggle Button

Flat Button

<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

btn-xs btn-sm btn 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>	
		

Text Colors

	<h3 class="main-title text-center" style="color:#003359;">Text <strong>Colors</strong></h3>
					
.text-default-dark
.text-default
.text-default-light
.text-default-bright
.text-primary
.text-primary-light
.text-primary-bright
.text-accent
.text-accent-light
.text-accent-bright
.text-danger
.text-warning
.text-success
.text-info
		<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>	
		

Callouts

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

Alerts

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