Style Guide

Headings
Typography Classes
Buttons
Layout
Margin & Padding
Borders
Responsive
Icons
Cards
Video
Tables
Anchors

Headings

Heading 1 = h1

Heading 2 = h2

Heading 3 = h3

Heading 4 = h4

Heading 5 = h5

Heading 6 = h6

Typography Classes

Apply classes below to elements to style them as explained in the descriptions. text-center: center-aligned text text-left: left-aligned text text-right: right-aligned text small: de-emphasizes inline or block of text by reducing its point size lead: makes a paragraph stand out by making point size bigger (ideal for intro paragraphs) text-lowercase: makes all of the letters in the selected text lowercase text-uppercase: makes all of the letters in the selected text uppercase text-capitalize: capitalizes the first letter of each word in the selected text.

Go to top

Buttons

Buttons are available in two sizes, two fill colors, and two outlines. Use btn-block class to create block level buttons (span the full width of a parent)

<a href ="#"><button class="btn btn-primary" type="button">Text Here</button></a>

<a href ="#"><button class="btn btn-primary btn-sm" type="button">Text Here</button></a>

<a href ="#"><button class="btn btn-secondary" type="button">Text Here</button></a>

<a href ="#"><button class="btn btn-secondary btn-sm" type="button">Text Here</button></a>

<a href ="#"><button class="btn btn-outline-primary" type="button">Text Here</button></a>

<a href ="#"><button class="btn btn-outline-primary btn-sm" type="button">Text Here</button></a>

<a href ="#"><button class="btn btn-outline-secondary" type="button">Text Here</button></a>

<a href ="#"><button class="btn-outline-secondary btn-sm" type="button">Text Here</button></a>

Go to top

Layout and Grid

Row Layout 1/2

one-half


<div class="row"> 
  <div class="col-md-6">
    CONTENT
  </div>
  <div class="col-md-6">
    CONTENT
  </div>
</div>

Row Layout 2/3, 1/3

two-thirds

one-third


<div class="row"> 
  <div class="col-md-8">
    CONTENT
  </div>
  <div class="col-md-4">
    CONTENT
  </div>
</div>

Row Layout 1/3, 2/3

one-third

two-thirds


<div class="row"> 
  <div class="col-md-4">
    CONTENT
  </div>
  <div class="col-md-8">
    CONTENT
  </div>
</div>

Row Layout 1/3

one-third


<div class="row"> 
  <div class="col-md-4">
    CONTENT
  </div>
  <div class="col-md-4">
    CONTENT
  </div>
  <div class="col-md-4">
    CONTENT
  </div>
</div>

Row Layout 1/4

one-fourth


<div class="row"> 
  <div class="col-md-3">
    CONTENT
  </div>
  <div class="col-md-3">
    CONTENT
  </div>
  <div class="col-md-3">
    CONTENT
  </div>
  <div class="col-md-3">
    CONTENT
  </div>
</div>

Go to top

Margin and padding

Margin and padding classes follow this format: property - side - size where:

Property: mfor margin, and pfor padding
Side: t for top, r for right, b for bottom, l for left, x for both left and right, and y is for both top and bottom
Size can be between 0 and 5. This is based on the default space which is 1rem (about 16px).

0 sets margin or padding to 0
1 represents .25 of 1rem (quarter)
2 represents .5 of 1rem (half)
3 represents 1rem (full)
4 represents 1.5 * 1rem (one and a half)
5 represents 3 * 1rem (three times)

Examples:

mt-0 no margin top ml-0 no margin left px-2 padding left and right p-3 padding on all sides Go to top

Borders

border
border-between
border-top
border-right
border-bottom
border-left
border-0

Responsive Classes

Use responsive classes below to show or hide elements by screen size.

Screen Size	Class
Hidden on all	`d-none`
Hidden only on xs	`d-none d-sm-block`
Hidden only on sm	`d-sm-none d-md-block`
Hidden only on md	`d-md-none d-lg-block`
Hidden only on lg	`d-lg-none d-xl-block`
Hidden only on xl	`d-xl-none`
Visible on all	`d-block`
Visible only on xs	`d-block d-sm-none`
Visible only on sm	`d-none d-sm-block d-md-none`
Visible only on md	`d-none d-md-block d-lg-none`
Visible only on lg	`d-none d-lg-block d-xl-none`
Visible only on xl	`d-none d-xl-block`

Float Control the placement of an element by screen size.

float-left
float-right
float-none
float-sm-left
float-sm-right
float-sm-none
float-md-left
float-md-right
float-md-none
float-lg-left
float-lg-right
float-lg-none
float-xl-left
float-xl-right
float-xl-none

Go to top

Icons

Sizes

<i class="fas fa-camera-retro fa-fw"></i> size: 1x <i class="fas fa-camera-retro fa-2x"></i> size: 2x <i class="fas fa-camera-retro fa-5x"></i> size: 5x <i class="fas fa-camera-retro fa-7x"></i> size: 7x <i class="fas fa-camera-retro fa-9x"></i> size: 9x

Font Awesome Icon Gallery

Add icons to page design as needed. Do not over use. Please use thoughtfully. Search All 2,986 Font Awesome Icons

Go to top

Cards

Variations on Card Types

Basic Card with Title

In egestas erat imperdiet sed euismod nisi porta lorem. Turpis massa tincidunt dui ut ornare lectus sit. Sit amet nisl purus in mollis nunc. Habitant morbi tristique senectus et. Gravida cum sociis natoque penatibus et magnis dis parturient montes.

Footer with Button

Interdum varius sit amet mattis vulputate enim nulla. At elementum eu facilisis sed odio morbi quis commodo odio. Vestibulum morbi blandit cursus risus at ultrices mi. Id neque aliquam vestibulum morbi blandit cursus risus at ultrices.

Details

Card with No Border

Venenatis tellus in metus vulputate eu scelerisque felis. Quis risus sed vulputate odio ut. Eu feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Viverra orci sagittis eu volutpat odio facilisis mauris sit. Tempus egestas sed sed risus pretium quam. Quis auctor elit sed vulputate mi sit.

Basic Card with Title

<div class="card p-3">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Body copy</p>
</div>
</div>

Card with Button

<div class="card">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Body copy</p>
</div>
<div class="card-footer text-center bg-white border-0"><a class="btn btn-primary text-uppercase" href="#">Link</a></div>
</div>
</div>

Card with No Border

<div class="card border-0">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Body copy</p>
</div>
</div>

Basic Card with Header Image

Quis ipsum suspendisse ultrices gravida dictum. Fringilla urna porttitor rhoncus dolor. Consequat id porta nibh venenatis. Sagittis aliquam malesuada bibendum arcu. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Porta nibh venenatis cras sed felis eget velit. Tortor posuere ac ut consequat semper viverra nam libero justo. Blandit aliquam etiam erat velit scelerisque in.

Example with Image and Button

This card uses an image with Creative Commons licensing. This uses the Bootstrap Popover to display the CC licensing

Details

Card with FA Icon Header

Commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Nunc sed blandit libero volutpat sed cras ornare arcu. Ultrices eros in cursus turpis massa tincidunt dui ut.

Basic Card with Header Image

<div class="card">
<p><img class="card-img-top" src=“/image.jpg" alt="Title"></p>
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Body copy</p>
</div>
</div>

Basic Card with Header Image and button


<div class="card">
<img class="card-img-top" src="/image.jpg">
<div class="card-body p-3">
<h4 class="card-title">Title</h4>
<p>Body copy</p>
</div>
<div class="card-footer text-center bg-white border-0"><a class="btn btn-secondary text-uppercase" href="#">Link</a></div>
</div>

Card with FA Icon Header

<div class="card">
<div class="mt30 text-center"><i class="fas fa-camera-retro fa-5x"></i> </div>
<div class="card-body">
<h4 class="card-title text-center">Title</h4>
<p>Body copy </p>
</div>
<div class="card-footer text-center bg-white border-0"><a class="btn btn-primary text-uppercase" href="#">Search</a></div>
</div>

Use this type of card to call attention to a link that goes elsewhere. Use this sparingly.

Call to Action

This is an example of a card with an image BG. Choose your graphic wisely.

More Info

Card with text header

Special Title

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.

January 19, 2019

Card with background color and text

<div class="card bg-primary text-white p-2">
<div class="card-body text-center text-uppercase">Text here.</div>
<div class="card-body text-center"><a class="btn btn-secondary text-uppercase" href="#">Call to Action</a></div>
</div>

Card with image background of text overlay

<div class="card text-white text-uppercase border-0">
<p><img class="card-img" src="/image.jpg" alt="Card image"></p>
<div class="card-img-overlay text-center bg-gradient-light">
<p><strong>Text overlay</strong></p>
<div class="card-footer align-bottom"><a class="btn btn-primary text-uppercase" href="#">More Info</a></div>
</div>
</div>

Card with header and footer

<div class="card">
<div class="card-header">Header title</div>
<div class="card-body">
<h4 class="card-title">Content Title</h4>
<p class="card-text">Body copy</p>
</div>
<div class="card-footer text-muted text-right">Footer text</div>
</div>

Go to top

Embed Video

SOURCE CODE

<div class="embed-responsive embed-responsive-16by9">
                              <iframe class="embed-responsive-item"  src="..." width="..." height="..." allowfullscreen="allowfullscreen"></iframe>
                              </div>

Make sure to assign "embed-responsive" AND appropriate class for ratio to parent div PLUS "embed-responsive-icon" class to iframe to fix iframe embed height issue. Aspect Ratio Classes: embed-responsive-21by9, embed-responsive-16by9, embed-responsive-4by3, embed-responsive-1by1

Go to top

Tables

#	Column heading	Column heading	Column heading
1	Column content	Column content	Column content
2	Column content	Column content	Column content
3	Column content	Column content	Column content


SOURCE CODE
<table class="table table-striped">
  <thead>
      <tr>
      <th>#</th>
      <th>Column heading</th>
      <th>Column heading</th>
      <th>Column heading</th>
  </tr>
  </thead>
  <tbody>
    <tr class="">
      <th scope="row">1</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
    <th scope="row">2</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="">
    <th scope="row">3</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
  </tbody>
</table>

Go to top

Anchors

Links on the top are anchors to skip to the different sections of this page. Code below creates the anchor destination within the page <a name="anchorName"></a> Code below creates the anchor source and links to the anchor destination within the page <a href="#anchorName">Link</a>