Style Guide
h1 HEADING Heading
h2 HEADING Heading
h3 HEADING Heading
h4 HEADING Heading
h5 HEADING Heading
h6 HEADING Heading
h1 Heading
h2 Heading
h3 Heading
h4 Heading
h5 Heading
h6 Heading
This is a link
This is BODY copy. Aliquam feugiat semper purus mattis auctor. Sed placerat tempor eros sed feugiat. In massa ipsum, venenatis sit amet ligula in, congue tincidunt risus. Proin et ornare tortor. Etiam egestas. Proin id porta odio. Vivamus pulvinar bibendum est id imperdiet.
This is BODY copy. Aliquam feugiat semper purus mattis auctor. Sed placerat tempor eros sed feugiat. In massa ipsum, venenatis sit amet ligula in, congue tincidunt risus. Proin et ornare tortor. Etiam egestas. Proin id porta odio. Vivamus pulvinar bibendum est id imperdiet.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Small
Default
Default – Disabled State
Large
The same styles can be applied to anchor links.
Primary
Secondary
Tertiary
Accent
Call to Action
Link Button
Default Cards
...
...
...
...
...
...
...
...
...
Primary Cards
...
...
...
...
...
...
...
...
...
Secondary Cards
...
...
...
...
...
...
...
...
...
Tertiary Cards
...
...
...
...
...
...
...
...
...
Accent Cards
...
...
...
...
...
...
...
...
...
Call-To-Action Cards
...
...
...
...
...
...
...
...
...
Card with Collapse
...
...
Basic Table
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Default with Borders
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Default with Borders and Stripes
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Primary with Borders and Stripes
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Secondary with Borders and Stripes
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Tertiary
#
First Name
Last Name
Username
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Class Prefixes
Extra Small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra Large ≥1200px |
---|---|---|---|---|
.col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
12 Column Grid
2 Column with Sidebar
3 columns
9 columns
Two-Column, Proportions Change Depending on Breakpoint
md
devices6 columns on
sm
devices
md
devices6 columns on
sm
devices
Foo
Foo
Product Grid
On xl
devices the layout will be 4-Up (3 column / 12 column = 4)
On md
and lg
devices the layout will be 3-Up (4 column / 12 column = 3)
On xs
and sm
devices the layout will be 2-Up (6 column / 12 column = 2)
Product
Product
Product
Product
Product
Product
Product
Product
Product
Product
Product
Product
Offset
Centered Column
Default Form
Horizontal Form
Inline Form
Plus/Minus Quantity
Popovers
Tooltips
The following dialogs should be opened from a URL. This will open the page in an iframe
.
Default Dialog with Button
YouTube Dialog
PDF Dialog
Dialog without Header/Footer
Success This was done correctly. Collect $200.
Info This is information you might want to know.
Warning This is very important info.
Error You did something wrong. Please fix it and try again.
Alignment
Left aligned text.
Center aligned text.
Right aligned text.
Left aligned text.
Center aligned text.
Right aligned text.
Floats
...
...
Block Level


Images


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 |
Icons via Font Awesome
See this page for all available icons: https://fontawesome.com/icons?d=gallery&m=free