EXAMPLE CODE SNIPPETS

Link: Bootstrap: Overview & CSS

Tag	Sample	Code
Heading w/Link	Heading w/Link	<a href="/paste/url-here">Heading w/Link</a>
Click to Call Link	Click to Call Link	<a href="tel:+1-XXX-XXX-XXXX">Click to Call Link</a>
Green Click to Call Button	Click to Call Button	<a href="tel:+1-XXX-XXX-XXXX" class="btn btn-success">Click to Call Button</a>
Heading Bold & Color	Bold text Light Blue text	<strong>Bold text here</strong><span class="blue">Light Blue text</span>
Heading Bold & Color	Bold & Light Blue text	<class="bold blue-light">Bold & Light Blue text</span>
Use of Periods	Periods will be not be used in the following: Headings Subheadings Bullets
Button Size	Except in rare occasions, the button size will almost always be set to "Medium"
Telephone Format	All telephone numbers on AAA.com will use the "click-to-call" HTML tag and be formatted like the following (XXX) XXX-XXXX	<a href="tel:+1-XXX-XXX-XXXX">(XXX) XXX-XXXX</a>
Multi-Accordion Dropdown	Used in event Schedules: /car/driver-training/signup /car/driver-training /car Title 1 [ + ] Data Title 2 [ + ] Data Title 3 [ + ] Data	<!-- START 1st ACCORDION HERE --> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading" style="background-color: #d9edf7;"> <h4 class="panel-title"><a data-parent="#accordion" data-toggle="collapse" href="#tb5collapse1"><!-- TITLE OF DROPDOWN HERRE --> [ + ]</a></h4> </div> <div class="panel-collapse collapse" id="tb5collapse1"> <div class="panel-body"> <p><!--CONTENT FOR ACCORDION DROPDOWN HERE --></p> </div> </div> </div> </div> <!-- START 2nd ACCORDION HERE --> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading" style="background-color: #d9edf7;"> <h4 class="panel-title"><a data-parent="#accordion" data-toggle="collapse" href="#tb6collapse1"><!-- TITLE OF DROPDOWN HERRE --> [ + ]</a></h4> </div> <div class="panel-collapse collapse" id="tb6collapse1"> <div class="panel-body"> <p><!--CONTENT FOR ACCORDION DROPDOWN HERE --></p> </div> </div> </div> </div> <!-- START 3rd ACCORDION HERE --> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading" style="background-color: #d9edf7;"> <h4 class="panel-title"><a data-parent="#accordion" data-toggle="collapse" href="#tb7collapse1"><!-- TITLE OF DROPDOWN HERRE --> [ + ]</a></h4> </div> <div class="panel-collapse collapse" id="tb7collapse1"> <div class="panel-body"> <p><!--CONTENT FOR ACCORDION DROPDOWN HERE --></p> </div> </div> </div> </div> <!-- ********************************************* NOTES | IMPORTANT ***********************************************--> <!--change the tb number sequentially in "tb4collapse1" or whatever the tb# is and make sure it matches the id="" IE: href="#tb4collapse1" must match id="tb4collapse1" in div class="panel-collapse" -->

---

<TAGS>

Link: Bootstrap: Typography

Tag	Sample	Code
<a>	Link to aaa	<a href="www.aaa.com">Link to aaa</a>
<small>	This is small text	This is <small>small</small> text
<strong>	This is small text	This is <strong>small</strong> text
<em>	This is italicized text	This is <em>italicized</em> text
<br >	Line 1 Line 2	Line 1<br >Line 2
<p>	This is paragraph 1 This is paragraph 2	<p>This is paragraph 1</p><p>This is paragraph 2</p>
<hr >		<hr >
H1	H1 Heading Text Size	<h1>H1 Title</h1>
H2	H2 Heading Text Size	<h2>H2 Title</h2>
H3	H3 Heading Text Size	<h3>H3 Title</h3>
H4	H4 Heading Text Size	<h4>H4 Title</h4>
H5	H5 Heading Text Size	<h5>H5 Title</h5>
H6	H6 Heading Text Size	<h6>H6 Title</h6>

---

HEADING .CLASS SIZES

Link: Bootstrap: Typography

.Class	Sample	Code
H1	H1 Heading Text Size	<div class="h1>H1> Title</div>
H1	H2 Heading Text Size	<div class="h2>H2> Title</div>
H1	H3 Heading Text Size	<div class="h3>H3> Title</div>
H1	H4 Heading Text Size	<div class="h4>H4> Title</div>
H1	H5 Heading Text Size	<div class="h5>H5> Title</div>
H1	H6 Heading Text Size	<div class="h6>H6> Title</div>

---

FONT STYLES & SIZES

Link: Bootstrap: Typography

Tag	Sample	Code
Default Font	This is the default font	<span class="regular">Regular Font</span></textareaarea></td> </tr> <tr> <td><span class="light">h1, Light Font</span></td> <td>This is a <span class="light h1">h1, Light font</span>default size</td> <td><textarea><span class="light h1">h1, Light Font</span>
h2, Light Italic Font	This is a h3, Italic fontdefault size	<span class="light-italic h2">h2, Light Italic Font</span>
Default Italic Font	This is a h3, Italic fontdefault size	<span class="regular-italic h3">h3, Bold Italic Font Font</span>
h4, Bold Font	This is a h4, bold fontdefault size	<span class="bold h4">h4, Bold Font</span>
h5, Bold Italic Font	This is a h5, bold italic fontdefault size	<span class="bold-italic h5">h5, Bold Italic Font</span>
h6, Bold Italic Font	This is a h6, bold italic fontdefault size	<span class="bold-italic h6">h6, Bold Italic Font</span>

---

SPECIAL CHARACTERS

Link: W3.org: Character Entity Reference Chart

Tag	Sample	Code
&reg;	Registered® Trademark	<sup>&reg;</sup>
Small &reg;	®	<sup><small>&reg;</small></sup>
Small &reg; w/Color	®	<sup><small class="red">&reg;</small></sup>
&copy;	©	<sup>&copy;</sup>
Superscript	This what Superscript looks like	<sup>Superscript</sup>
Subscript	This what Subscript looks like	<sub>Subscript</sub>
&cent;	99¢	&cent;
&mdash;	Separeted by a — dash	Separeted by a &mdash; dash
&#189;	½ off sale	&#189; off sale
&amp;	Flys & Honey	Flys &amp; Honey
&nbsp;	Spaces    between    words	Spaces&nbsp;&nbsp;&nbsp; between&nbsp;&nbsp;&nbsp; words

---

GLYPH ICONS

Link: Bootstrap: Glyph Icons

Tag	Sample	Code
	Seel All Glyph Icons Here	<span class="glyphicon glyphicon-menu-right">&nbsp;</span>
	email@email.com	&nbsp;<span class="glyphicon glyphicon-envelope">&nbsp;</span>

---

BREAKPOINTS

Link: Bootstrap: Grid System

Tag	Sample	Code
Desktop	<lg>	<visible-lg> OR <hidden-lg>
Tablet	<md>	<visible-md> OR <hidden-md>
Sm Tablet / Lg Phone	<sm>	<visible-sm> OR <hidden-sm>
Phone	<xs>	<visible-xs> OR <hidden-xs>

---

FONT COLORS

Link: Bootstrap: Typography

Tag	Sample	Code
Gray Lighter Font	This is the Gray Lighter font	<span class="gray-lighter">Gray Lighter</span>
Gray Light Font	This is the Gray Light font	<span class="gray-light">Gray Light</span>
Gray Font	This is the Gray font	<span class="gray">Gray</span>
Gray Dark Font	This is the Gray Dark font	<span class="gray-dark">Gray Dark</span>
Gray Darker Font	This is the Gray Darker font	<span class="gray-darker">Gray Darker</span>
Black Font	This is the Black font	<span class="black">Black</span>
Blue Light Font	This is the Blue Light font	<span class="blue-light">Blue Light</span>
Blue Light Dark Font	This is the Blue Light Dark font	<span class="blue-light-dark">Blue Light</span>
Blue Font	This is the Blue font	<span class="blue">Blue</span>
Blue Dark Font	This is the Blue Dark font	<span class="blue-dark">Blue Dark</span>
Green Font	This is the Green font	<span class="green">Green</span>
Green Dark Font	This is the Green Dark font	<span class="green-dark">Green Dark</span>
Orange Font	This is the Orange font	<span class="orange">Orange</span>
Orange Dark Font	This is the Orange Dark font	<span class="orange-dark">Orange Dark</span>
Red Font	This is the Red font	<span class="red">Red</span>
Red Dark Font	This is the Red Dark font	<span class="red-dark">Red Dark</span>

---

HORIZONTAL LINE BREAKS

Tag	Sample	Code
Default		<hr />
Blue		<hr class="blue" />
Red		<hr class="red" />
Gray		<hr class="gray" />

---

BUTTONS

Link: Bootstrap: Buttons

Tag	Sample	Code
Extra Small Size, White Button	White Button	<a href="/paste/url-here" class="btn btn-white btn-xs">White Button</span>
Small Size, Black Button	Black Button	<a href="/paste/url-here" class="btn btn-black btn-sm">Black Button</span>
Default Size, Gray Light Button	Gray Light Button	<a href="/paste/url-here" class="btn btn-gray-light">Gray Light Button</span>
Large Size, Gray Dark Button	Gray Dark Button	<a href="/paste/url-here" class="btn btn-gray-dark btn-lg">Gray Dark Button</span>
Extra Small Size, Blue Light Button	Blue Light Button	<a href="/paste/url-here" class="btn btn-blue-light btn-xs">Blue Light Button</span>
Small Size, Blue Medium Button	Blue Medium Button	<a href="/paste/url-here" class="btn btn-blue-medium btn-sm">Blue Medium Button</span>
Default Size, Blue Dark Button	Blue Dark Button	<a href="/paste/url-here" class="btn btn-blue-dark">Blue Dark Button</span>
Large Size, Blue AAA Button	Blue AAA Button	<a href="/paste/url-here" class="btn btn-blue-aaa btn-lg">Blue AAA Button</span>
Extra Small Size, Gold Button	Gold Button	<a href="/paste/url-here" class="btn btn-gold btn-xs">Gold Button</span>
Small Size, Orange Button	Orange Button	<a href="/paste/url-here" class="btn btn-orange btn-sm">Orange Button</span>
Default Size, Orange Dark Button	Orange Dark Button	<a href="/paste/url-here" class="btn btn-orange-dark">Orange Dark Button</span>
Large Size, Green Button	Green Button	<a href="/paste/url-here" class="btn btn-green btn-lg">Green Button</span>
Extra Small Size, Red AAA Button	Red AAA Button	<a href="/paste/url-here" class="btn btn-red-aaa btn-xs">Red AAA Button</span>
Small Size, Red Dark Button	Red Dark Button	<a href="/paste/url-here" class="btn btn-red-dark btn-sm">Red Dark Button</span>
Extra Small Size, White Outline Button	White Outline Button	<a href="/paste/url-here" class="btn btn-white-outline btn-xs">White Button</span>
Small Size, Black Outline Button	Black Outline Button	<a href="/paste/url-here" class="btn btn-black-outline btn-sm">Black Button</span>
Default Size, Gray Light Outline Button	Gray Light Outline Button	<a href="/paste/url-here" class="btn gray-light-outline">Gray Light Button</span>
Large Size, Gray Dark Outline Button	Gray Dark Outline Button	<a href="/paste/url-here" class="btn btn-gray-dark-outline btn-lg">Gray Dark Button</span>
Extra Small Size, Blue Light Outline Button	Blue Light Outline Button	<a href="/paste/url-here" class="btn btn-blue-light-outline btn-xs">Blue Light Button</span>
Small Size, Blue Medium Outline Button	Blue Medium Outline Button	<a href="/paste/url-here" class="btn btn-blue-medium-outline btn-sm">Blue Medium Button</span>
Default Size, Blue Dark Outline Button	Blue Dark Outline Button	<a href="/paste/url-here" class="btn btn-blue-dark-outline">Blue Dark Button</span>
Large Size, Blue AAA Outline Button	Blue AAA Outline Button	<a href="/paste/url-here" class="btn btn-blue-aaa-outline btn-lg">Blue AAA Button</span>
Extra Small Size, Gold Outline Button	Gold Outline Button	<a href="/paste/url-here" class="btn btn-gold-outline btn-xs">Gold Button</span>
Small Size, Orange Outline Button	Orange Outline Button	<a href="/paste/url-here" class="btn btn-orange-outline btn-sm">Orange Button</span>
Default Size, Orange Dark Outline Button	Orange Dark Outline Button	<a href="/paste/url-here" class="btn btn-orange-dark-outline">Orange Dark Button</span>
Large Size, Green Outline Button	Green Outline Button	<a href="/paste/url-here" class="btn btn-green-outline btn-lg">Green Button</span>
Extra Small Size, Red AAA Outline Button	Red AAA Outline Button	<a href="/paste/url-here" class="btn btn-red-aaa-outline btn-xs">Red AAA Button</span>
Small Size, Red Dark Outline Button	Red Dark Outline Button	<a href="/paste/url-here" class="btn btn-red-dark-outline btn-sm">Red Dark Button</span>

---

BACKGROUND COLORS

Link: Bootstrap: Contextual Backgrounds

Tag	Sample	Code
White Background	#ffffff	<a href="/paste/url-here" class="white-background">#ffffff</span>
Gray Lighter Background	#f7f8f8	<a href="/paste/url-here" class="gray-lighter-background">#f7f8f8</span>
Gray Light Background	#e6e7e8	<a href="/paste/url-here" class="gray-light-background">#e6e7e8</span>
Gray Medium Background	#a0a0a0	<a href="/paste/url-here" class="gray-medium-background">#a0a0a0</span>
Gray Background	#7c7c7c	<a href="/paste/url-here" class="gray-background">#7c7c7c</span>
Gray Dark Background	#414141	<a href="/paste/url-here" class="gray-dark-background">#414141</span>
Gray Darkest Background	#000000	<a href="/paste/url-here" class="gray-darker-background">HEXCOLOR</span>
Blue Light Background	#74c4ea	<a href="/paste/url-here" class="blue-light-background">#74c4ea</span>
Blue Medium Background	#5291bc	<a href="/paste/url-here" class="blue-medium-background">#5291bc</span>
AAA Blue Background	#005296	<a href="/paste/url-here" class="blue-background">#005296</span>
Blue Dark Background	#1b3e6e	<a href="/paste/url-here" class="blue-dark-background">#1b3e6e</span>
Orange Background	#e59100	<a href="/paste/url-here" class="orange-background">#e59100</span>
Orange Dark Background	#e59100	<a href="/paste/url-here" class="orange-dark-background">#e59100</span>
Green Background	9ab33b	<a href="/paste/url-here" class="green-background">9ab33b</span>
Green Dark Background	#718729	<a href="/paste/url-here" class="green-dark-background">#718729</span>
AAA Red Background	#ed1b2d	<a href="/paste/url-here" class="red-background">#ed1b2d</span>
Red Dark Background	#b00f1d	<a href="/paste/url-here" class="red-dark-background">#b00f1d</span>
Gold Background	#cea92b	<a href="/paste/url-here" class="gold-background">#cea92b</span><

---

ALERT BOXES

Link: Bootstrap: Alerts

<div class="alert alert-dismissible alert-warning"> <button type="button" class="close" data-dismiss="alert">×</button> <h4>Warning!</h4> <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p> </div>

<div class="alert alert-dismissible alert-danger"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. </div>

<div class="alert alert-dismissible alert-success"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>. </div>

<div class="alert alert-dismissible alert-info"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important. </div>

---

SIMPLE TABLES & GRIDS

Link: Bootstrap: Tables

Link: Bootstrap: Grid System

2 Column 50/50 Table

<div class="container"> <div> <div class="col-sm-6""> <h3 class="blue">Left Heading</h3> <h4><span class="blue">Left Sub Heading</span></h4><br /> <p>Left Paragraph Text</p> <p><a href="/" class="btn btn-primary btn-md" target="_self" role="button">LEFT BUTTON</a></p> </div> <div class="col-sm-3""> <h3 class="blue">Right Heading</h3> <p>Left Paragraph Text</p> </div> </div> </div>

3 Column 50/25/25 Table

Table Heading
Row 2 Column 1 Title (Mobile)
Row 2 Column 1 Title	Row 2 Column 2 Blue	Row 2 Column 3 Green
Row 3 Column 1 Title (Mobile)
Row 3 Column 1 Title	Row 3 Column 3 Title	Row 3 Column 3 Title
Row 4 Column 1 Title (Mobile)
Row 4 Column 1 Title	Row 4 Column 2	Row 4 Column 3
Row 5 Column 1 Title (Mobile)
Row 5 Column 1 Title	Row 5 Column 2 Title	Row 5 Column 3 Title
Row 6 Blue Big Text Row 6 Green Huge Text Row 6 Gray Small Text

<p><strong>3 Column 33/33/33 Table</strong></p> <table class="simple-table big-font blue-dark"> <tbody> <tr class="gray-lighter-background"> <td class="text-left big-font" colspan="3">Table Heading</td> </tr> <tr class="hidden-lg hidden-md big-padding"> <th colspan="2"><strong>Row 2 Column 1 Title (Mobile)</strong></th> </tr> <tr class="big-padding"> <th class="hidden-sm hidden-xs text-left"><strong>Row 2 Column 1 Title</strong></th> <th class="blue-background"><strong>Row 2 Column 2 Blue</strong></th> <th class="green-background"><strong>Row 2 Column 3 Green</strong></th> </tr> <tr class="hidden-lg hidden-md"> <th colspan="2">Row 3 Column 1 Title (Mobile)</th> </tr> <tr> <th class="hidden-sm hidden-xs text-left">Row 3 Column 1 Title</th> <td>Row 3 Column 3 Title</td> <td class="green">Row 3 Column 3 Title</td> </tr> <tr class="hidden-lg hidden-md"> <th colspan="2">Row 4 Column 1 Title (Mobile)</th> </tr> <tr class="gray-lighter-background"> <th class="hidden-sm hidden-xs text-left">Row 4 Column 1 Title</th> <td>Row 4 Column 2</td> <td class="green">Row 4 Column 3</td> </tr> <tr class="hidden-lg hidden-md"> <th colspan="2">Row 5 Column 1 Title (Mobile)</th> </tr> <tr> <th class="hidden-sm hidden-xs text-left">Row 5 Column 1 Title</th> <td>Row 5 Column 2 Title</td> <td class="green">Row 5 Column 3 Title</td> </tr> <tr class="gray-lighter-background"> <td colspan="3"><span class="big-font">Row 6 Blue Big Text</span><br /> <span class="huge-font green"><strong>Row 6 Green Huge Text</strong></span><br /> <em>Row 6 Gray Small Text</em></td> </tr> </tbody> </table>

---

MORE STYLE INFORMATION

Link: Bootstrap: CSS Overview

Link: W3 Schools: Typography

Link: Bootstrap: Style Guide (CodePen )

Link: Bootstrap: Glyph Icons

Link: Bootstrap: 12 Column Grid System

Link: Online Editing Widget

---

HEADING .aaa-headingbar

<div class="aaa-headingbar bg-blue-dark"> <h1 class="fg-white">.bg-blue-dark</h1> <h2 class="fg-white">.fg-white</h2> </div>

FOREGROUND

.fg-white	.fg-white
.fg-black	.fg-black
.fg-gray-light	.fg-gray-light
.fg-gray-dark	.fg-gray-dark
.fg-blue-light	.fg-blue-light
.fg-blue-medium	.fg-blue-medium
.fg-blue-dark	.fg-blue-dark
.fg-blue-aaa	.fg-blue-aaa
.fg-gold	.fg-gold
.fg-orange	.fg-orange
.fg-orange-dark	.fg-orange-dark
.fg-green	.fg-green
.fg-red-aaa	.fg-red-aaa
.fg-red-dark	.fg-red-dark

BACKGROUND

.bg-white	.bg-white
.bg-black	.bg-black
.bg-gray-light	.bg-gray-light
.bg-gray-dark	.bg-gray-dark
.bg-blue-light	.bg-blue-light
.bg-blue-medium	.bg-blue-medium
.bg-blue-dark	.bg-blue-dark
.bg-blue-aaa	.bg-blue-aaa
.bg-gold	.bg-gold
.bg-orange	.bg-orange
.bg-orange-dark	.bg-orange-dark
.bg-green	.bg-green
.bg-red-aaa	.bg-red-aaa
.bg-red-dark	.bg-red-dark