Style Sheet

Headings

h1

h2

h3

h4

h5
h6

HTML ELEMENTS

<small>Small Text</small>
<big>Big Text</big>

Small Text Big Text

Line break

<br />


Divider Line

<hr />

Lists

Unordered List

<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
  • List item
  • List item
  • List item
  • List item
  • List item

Ordered List

<ol>
<li>First</li>
<li>Second item</li>
<li>Third Item</li>
<li>Fourth item</li>
<li>Fifth item</li>
</ol>
  1. First
  2. Second item
  3. Third Item
  4. Fourth item
  5. Fifth item

Colors

You can change the color of text with classes. Available are .red, .blue, .burgundy, .grey., and .highlight

<span class="red">Will turn this text red.</span>

Will turn this text red.

Will turn this text blue.

Will turn this text burgundy.

Will turn this text grey.

Will highlight this text.

Images

There are a few classes you can use to style images.

.img-good

Gives the image a nice border and some shadows

<img class="img-good" src="/files/2019-03/tobias-van-schneider-230171-unsplash.jpg">

.img-gallery

If you have multiple images, you can add this class to each and make them small and tiled.

<img class="img-gallery" src="/files/2019-03/tobias-van-schneider-230171-unsplash.jpg" />

Text wrapped image

We can also wrap paragraph text around an image by using float classes. .pull-left and .pull-right

<img class="img-gallery pull-left" src="/files/2019-03/tobias-van-schneider-230171-unsplash.jpg" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Bootstrap

This website was built on the Bootstrap foundation, and anything you find in the docs will probably be available to use. Below I'll give some working examples of columns and some other elements. https://getbootstrap.com/docs/3.3/

Buttons

You can turn any ordinary link into a button by adding a couple of classes like so:

<a href="/your-destination/" class="btn btn-danger">Read More</a>

Three color options available. .btn-danger is burgundy, .btn-primary is blue, and .btn-default is grey.

Red Button

Blue Button

Grey Button

Alerts

These are handy for putting notices on a page. They come in a few colors as well.

<div class="alert alert-success" role="alert">Success</div>
<div class="alert alert-info" role="alert">Info</div>
<div class="alert alert-warning" role="alert">Warning</div>
<div class="alert alert-danger" role="alert">Danger</div>

Wells

<div class="well">
Look, I'm in a well!
</div>
Look, I'm in a well!

Columns

You can organize content easy with rows and columns. One row is equal to 12 columns, so you can use any combination of columns to make up one row. More info about this here, and some common examples below.

Two half columns
Two columns each with a class of .col-md-6, meaning they're equal width.

<div class="row"> 
   <div class="col-md-6">First column content</div> 
   <div class="col-md-6">Second column content</div> 
</div>
First column content
Second column content

Three equal columns
Here is three colums, each 4 columns wide.

<div class="row"> 
   <div class="col-md-4">First column content</div> 
   <div class="col-md-4">Second column content</div>
   <div class="col-md-4">Third column content</div>
</div>
First column content
Second column content
Third column content

Smaller Column
Here is a 1/3 and 2/3 row. This can be useful floating an image to one side of some text.

<div class="row"> 
   <div class="col-md-4">First column content</div> 
   <div class="col-md-8">Second column content</div>
</div>
Second column content will be double the size of the first.
  Find Help
-