Back to Top

Information for:

Style Page

Primary Colors

 
#0064b4
#00559a
#014780
Augusta Blue
#002f55
 
#009cd6
#0083b4
#00648a
Athletic Blue
#00aeef

Secondary Colors

 
#d1d7da
#313534
Augusta Grey
#a5acaf
 
#4ff634
#309e1e
Accent Green
#44d62c
 
#7bc3f2
#477390
Accent Grey
#64a0c8

Style Tools

Helper Classes

These helper classes are used to help you customize your site on a more detailed level.

This is the Lead Class, you use it to highlight sentences or separate content from a regular paragraph.

HTML

<p class="lead">This is the Lead Class, you use it to highlight sentences or separate content from a regular paragraph.</p>

You can use the mark tag to highlight text.

HTML

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

Left Aligned Text

Center Aligned Text

Right Aligned Text

Justified Text

No Wrap Text

HTML

<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

HTML

<p class="text-lowercase">Lowercased Text</p>

<p class="text-uppercase">Uppercased Text</p>

<p class="text-capitalized">Capitalized Text</p>

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

Someone famous in Source Title

HTML

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

Responsive image

HTML

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

...
...
...

HTML

<img src=".." class="img-rounded" alt="Rounded Image">

<img src=".." class="img-circle" alt="Circle Image">

<img src=".." class="img-thumbnail" alt="Thumbnail Image">

Button Styles

Below are the button that you can access. For an easier way to get the button needed there is a snippet named Buttons, Various Styles that will give you all the below options.

Basic Button
BB Button   BB2 Button
Solid Color Button     Outlined Button

HTML

<a href="#" class="btn btn-primary" type="button">Basic Button</a>

<a href="#" class="bb-btn" type="button">BB Button</a>

<a href="#" class="bb2-btn" type="button">BB2 Button</a>

<a href="#" class="btn-solid" type="button">Solid Color Button</a>

<a href="#" class="btn-clear" type="button">Outlined Button</a>

AU Blue  AU Gray
Accent Blue   Accent Green

HTML

<a href="#" class="btn btn-primary btn-accent" type="button">AU Blue</a>

<a href="#" class="btn btn-primary btn-accent-bright" type="button">AU Gray</a>

<a href="#" class="btn btn-primary btn-primary-light" type="button">Accent Blue</a>

<a href="#" class="btn btn-primary btn-accent-light" type="button">Accent Green</a>

Callout Styles

HTML

<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

HTML

<div class="alert alert-success" role="alert">

<strong> Well done!</strong> This is a success or positive alert.

</div>

<div class="alert alert-info" role="alert">

<strong> Heads up!</strong> This is a information or notification alert.

</div>

<div class="alert alert-warning" role="alert">

<strong> Warning!</strong> This is a warning or attention alert.

</div>

<div class="alert alert-danger" role="alert">

<strong> Oh snap!</strong> This is a danger or emergency alert.

</div>

Table Styles

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

# First Name Last Name NetID
1 Princess Bubblegum peebles1
2 Marceline Abadeer marcy
3 Peppermint Butler pbutler

HTML

<table class="table">

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

# First Name Last Name NetID
1 Princess Bubblegum peebles1
2 Marceline Abadeer marcy
3 Peppermint Butler pbutler

HTML

<table class="table table-striped">

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

# First Name Last Name NetID
1 Princess Bubblegum peebles1
2 Marceline Abadeer marcy
3 Peppermint Butler pbutler

HTML

<table class="table table-condensed">

Create responsive tables by wrapping any .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.

# First Name Last Name NetID
1 Princess Bubblegum peebles1
2 Marceline Abadeer marcy
3 Peppermint Butler pbutler

HTML

<div class="table-responsive" >

<table class="table">

</table>

</div>