Overview
Intro
Welcome to the iHire Web Styles Guide!

This is your friendly resource for all things web design-development - BootStrap, CSS, and HTML. Our websites should be cohesive and have clean code. Use this guide as a reference point for any BootStrap components and other website structure to ensure design guidelines are followed.
Contents
Typography
DocumentationDisplay 1
Display 2
Display 3
Display 4
Display 5
Display 6
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a lead paragraph. It stands out from regular paragraphs.
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined.
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
A well-known quote, contained in a blockquote element.
- This is a list.
- It appears completely unstyled.
- Structurally, it's still a list.
- However, this style only applies to immediate child elements.
-
Nested lists:
- are unaffected by this style
- will still show a bullet
- and have appropriate left margin
- This may still come in handy in some situations.
- This is a list item.
- And another one.
- But they're displayed inline.
Images
DocumentationTables
Documentation# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Class | Heading | Heading |
---|---|---|
Default | Cell | Cell |
Primary | Cell | Cell |
Secondary | Cell | Cell |
Success | Cell | Cell |
Danger | Cell | Cell |
Warning | Cell | Cell |
Info | Cell | Cell |
Light | Cell | Cell |
Dark | Cell | Cell |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
Figures
DocumentationForms
Overview
DocumentationDisabled forms
DocumentationSizing
DocumentationInput group
DocumentationFloating labels
DocumentationValidation
DocumentationComponents
Accordion
Documentation.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
Alerts
DocumentationWell done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Badge
DocumentationExample heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Breadcrumb
DocumentationButtons
DocumentationButtons
Our typical CTA color
Example uses:
- Form submissions
- Linking to another page
Our secondary CTA color
Example uses:
- TODO
Our important CTA color
Example uses:
- Registration submissions
- Purchase submissions
- Landing page hero CTA
- Actions we want to direct focus on
- Postive actions (add, enable, start, etc.)
Information actions
Example uses:
- Display additional information
Our alternate important CTA color for dark backgrounds
Example uses:
- Registration submissions
- Purchase submissions
- Actions we want to direct focus on
- Landing page hero CTA
Our negative CTA color
Example uses:
- Delete / Trash
- Negative actions (remove, disable, end, etc.)
Utility actions
Example uses:
- Download
Utility actions
Example uses:
- TODO
Button group
DocumentationCard
DocumentationCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
- An item
- A second item
- A third item
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Carousel
DocumentationDropdowns
DocumentationList group
Documentation- A disabled item
- A second item
- A third item
- A fourth item
- And a fifth one
- An item
- A second item
- A third item
- A fourth item
- And a fifth one
Modal
DocumentationModals have three optional sizes, available via modifier classes to be placed on a .modal-dialog
. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
Size | Class | Modal max-width |
---|---|---|
Small | .modal-sm |
300px |
Default | None | 500px |
Large | .modal-lg |
800px |
Extra large | .modal-xl |
1140px |
Our default modal without modifier class constitutes the “medium” size modal.
Navs
DocumentationNavbar
DocumentationPagination
DocumentationPopovers
DocumentationProgress
DocumentationScrollspy
DocumentationFirst heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Second heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Third heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fourth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Fifth heading
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Spinners
DocumentationToasts
DocumentationToastr Notifications