Style Guide Code Snippets
When trying to include the following content into your side, please use the following guide to assist you with structuring and styling content on a page within the AODA Drupal Theme. Many of the recommended code snippets are from the Bootstrap Framework. Visit Bootstrap CSS for a full list of CSS classes. Please note that a majority of the following information requires a high level of technical understanding and general knowledge of web development.
The following code snippets demonstrate the style classes you would use to style a button or a link so that it looks like a button. You can control the colour and size of each button.

If clicking the button causes the user to go to a different page, use a link.
<a href="#" class="btn btn-default">Link styled as a button</a>
If clicking the button triggers a change on the page (but does not go to a different page), use a button.
<button class="btn btn-default">Button that causes a change on the current page</button>

Image of white bootstrap button
<!-- Standard button style -->
<button type="button" class="btn btn-default">Default</button>
<a href="#" class="btn btn-default">Default</a>

Image of all bootstrap buttons
<!-- Identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<a href="#" class="btn btn-primary">Primary</a>

Image of all bootstrap buttons
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<a href="#" class="btn btn-success">Success</a>

Image of all bootstrap buttons
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<a href="#" class="btn btn-info">Info</a>

Image of all bootstrap buttons
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<a href="#" class="btn btn-warning">Warning</a>

Image of all bootstrap buttons
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<a href="#" class="btn btn-danger">Danger</a>

Image of all bootstrap buttons
<!-- Large button: This can be done with any of the aforementioned colours -->
<button type="button" class="btn btn-default btn-lg">Large</button>
<a href="#" class="btn btn-default btn-lg">Large</a>

Image of all bootstrap buttons
<!-- Smallbutton: This can be done with any of the aforementioned colours -->
<button type="button" class="btn btn-default btn-sm">Small</button>
<a href="#" class="btn btn-default btn-sm">Small</a>

Image of all bootstrap buttons
<!-- Full Width Button: This can be done with any of the aforementioned colours -->
<button type="button" class="btn btn-default btn-block">Full-width button</button>
<a href="#" class="btn btn-default btn-block">Full-width button</a>
The following code snippets demonstrates a button toggle that will show or hide the section of text below it. Replace 'uniqueNameForControl' with a unique name for the code snippet. Every time you use this snippet on a page, you will need to provide a different 'uniqueNameForControl' for that particular code snippet (eg. uniqueName1, uniqueName2, uniqueName3, etc.).
<h2><button aria-controls="uniqueNameForControl" aria-expanded="false" class="btn btn-primary" data-target="#uniqueNameForControl" data-toggle="collapse" type="button">More Info about Expandable Section</button></h2>
<div aria-expanded="false" class="collapse" id="uniqueNameForControl" role="region">
<p>Content that will be shown or hidden using the button</p>
</div>
<h2><button aria-controls="uniqueNameForControl2" aria-expanded="false" class="btn btn-primary" data-target="#uniqueNameForControl2" data-toggle="collapse" type="button">More Info about Expandable Section</button></h2>
<div aria-expanded="false" class="collapse" id="uniqueNameForControl2" role="region">
<p>Content that will be shown or hidden using the button</p>
</div>
This demonstrates an image with rounded corners using the img-rounded class.
<img src="/link/to/image" class="img-responsive img-rounded" />

Image of all bootstrap buttons
This demonstrates an image with rounded square corners and a border using the img-thumbnail class.
<img src="/link/to/image" class="img-responsive img-thumbnail" />

Image of all bootstrap buttons
This demonstrates a circular image using the img-circle class.
<img src="/link/to/image" class="img-responsive img-circle" />

Image of all bootstrap buttons
Avoid using
<center>
to center images on the page. Instead, use the "center-block" class.<img src="..." class="img-responsive center-block" alt="Descriptive alt text" />
Use the "pull-left" or "pull-right" classes to float images left or right.
<img src="..." class="img-responsive pull-left" alt="Descriptive alt text" />
<img src="..." class="img-responsive pull-right" alt="Descriptive alt text" />
To clear a float, you can put a "clearfix" class on the parent element.
<div class="clearfix"><img src="..." class="img-responsive pull-right" alt="Descriptive alt text" /></div>
Use the following code to add a formatted caption to your image
<figure class="thumbnail">
<img alt="" class="img-responsive img-rounded" src="/src/for/your/image" />
<figcaption class="caption">Your caption text here</figcaption>
</figure>
Note: the
img-rounded
class is optional. The code above will provide the following effect:
Image of all bootstrap buttons
By default, the border expands to fill available width in the area where the image has been placed. If you don't want that much white space on either side, you can either use a larger image or apply the
pull-left
or pull-right
class to figure
like so:<figure class="thumbnail pull-right">
This will give you the following effect instead:

Image of all bootstrap buttons
Use the following code to create one row of a 2 column grid. Repeat for as many rows as you need. Remember to replace each
img
element with a decorative image that relates to the associated text link.<div class="row">
<div class="col-md-6 col-lg-6 col-xs-12 col-sm-6">
<figure class="thumbnail">
<img alt="" class="img-responsive center-block img-rounded" src="/src/for/your/image" />
<figcaption class="caption"><a href="#">Name of Link 1</a></figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-6 col-xs-12 col-sm-6">
<figure class="thumbnail">
<img alt="" class="img-responsive center-block img-rounded" src="/src/for/your/image" />
<figcaption class="caption"><a href="#">Name of Link 2</a></figcaption>
</figure>
</div>
</div>

Image of all bootstrap buttons
Use the following code to create one row of a 3 column grid. Repeat for as many rows as you need. Remember to replace each
img
element with a decorative image that relates to the associated text link.<div class="row">
<div class="col-md-4 col-lg-4 col-xs-12 col-sm-4">
<figure class="thumbnail">
<img alt="" class="img-responsive center-block img-rounded" src="/src/for/your/image" />
<figcaption class="caption"><a href="#">Name of Link 1</a></figcaption>
</figure>
</div>
<div class="col-md-4 col-lg-4 col-xs-12 col-sm-4">
<figure class="thumbnail">
<img alt="" class="img-responsive center-block img-rounded" src="/src/for/your/image" />
<figcaption class="caption"><a href="#">Name of Link 2</a></figcaption>
</figure>
</div>
<div class="col-md-4 col-lg-4 col-xs-12 col-sm-4">
<figure class="thumbnail">
<img alt="" class="img-responsive center-block img-rounded" src="/src/for/your/image" />
<figcaption class="caption"><a href="#">Name of Link 3</a></figcaption>
</figure>
</div>
</div>

Image of all bootstrap buttons
Use the following code to create one row of a 4 column grid. Repeat for as many rows as you need. Remember to replace each
img
element with a decorative image that relates to the associated text link.<div class="row">
<div class="col-sm-3">
<figure class="thumbnail">
<img alt="" class="img-responsive center-block img-rounded" src="/src/for/your/image" />
<figcaption class="caption"><a href="#">Name of Link 1</a></figcaption>
</figure>
</div>
<div class="col-sm-3">
<figure class="thumbnail">
<img alt="" class="img-responsive center-block img-rounded" src="/src/for/your/image" />
<figcaption class="caption"><a href="#">Name of Link 2</a></figcaption>
</figure>
</div>