Heading <h1></h1>
Heading <h2></h2>
Heading with link <h2></h2>
Heading <h3></h3>
Heading with link <h3></h3>
Heading <h4></h4>
Paragraph – Paragraphs use Din 2014 as the font. Default text size is 15px with line-height at 1.5. Font color is set to ##212529 on a white background.
Bold | Italics
Bullet List <ul>
- Default padding at 10px 0px 10px 40px
- Default bullets are discs
- With a link
Numbered List <ol>
- Default padding at 10px 0px 10px 40px
- List item two
- With a link
List of links with no bullets or bottom-border
Use <ul> with class="no-bull"
Links in body text
Links in body text are secondary orange (#c95100) with a gray border-bottom. On hover they are magnolia green (#154734).
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.
Buttons
Use on a button or text link, for example: <button class="btn btn-primary">
Images
Images are made responsive with .img-responsive. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
To float an image to the left use the class "float-left"
For rounded corners, use the class "rounded"
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.
To float an image to the left use the class "float-right"
For a circle, use the class "circle"
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.
Please contact a Web Developer for help with setting up a curtain effect.
Flash Cards
Carousel
Accordion
Collapse
Forms
Please contact a Web Developer for help with setting up a form.
Modals
Tables
Regular Table
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Table with "table-dark" class
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Table with "thead-dark" class
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Table with "thead-light" class
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Table with "table-striped" class
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |