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

HelperClasses

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

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

You can use the mark tag tohighlighttext.

HTML

You can use the mark tag tohighlighttext.

Left Aligned Text

Center Aligned Text

Right Aligned Text

Justified Text

No Wrap Text

HTML

class="text-left">Left Aligned Text

class="text-center">Center Aligned Text

class="text-right">Right Aligned Text

class="text-justify">Justified Text

class="text-nowrap">No Wrap Text

Lowercased Text

Uppercased Text

Capitalized Text

HTML

class="text-lowercase">Lowercased Text

class="text-uppercase">Uppercased Text

class="text-capitalized">Capitalized Text

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

Someone famous inSource Title

HTML

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

Someone famous inhref="#">Source Title

ImageStyles

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

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

...
...
...

HTML

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

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

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

ButtonStyles

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

Basic Button
BB Button BB2 Button
Solid Color Button Outlined Button

HTML

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

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

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

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

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

AU Blue AU Gray
Accent Blue Accent Green

HTML

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

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

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

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

CalloutStyles

HTML

class="alert alert-callout alert-success"role="alert">

Well done!You successfully read this.

class="alert alert-callout alert-info"role="alert">

Heads up!This alert needs your attention, but it's not super important.

class="alert alert-callout alert-warning"role="alert">

Warning!Better check yourself, you're not looking too good.

class="alert alert-callout alert-danger"role="alert">

Oh snap!Change a few things up and try submitting again.

AlertStyles

HTML

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

Well done!This is a success or positive alert.

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

Heads up!This is a information or notification alert.

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

Warning!This is a warning or attention alert.

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

Oh snap!This is a danger or emergency alert.

TableStyles

For basic styling-light padding and only horizontal dividers-add the base class .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

class="table">

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

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

HTML

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

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

class="table-responsive" >

class="table">

Baidu
map