A style guide is a document of code standards that presents the various elements and patterns of a site or application. It is a one-stop place to see all visual styles of the site such as headers, links, buttons, colour palettes and any visual language that is used on the site.
text-size-large
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-medium
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-normal
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-small
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-tiny
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-style-quote
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-weight-xbold
text-weight-bold
text-weight-semibold
text-weight-normal
text-weight-light
text-align-left
text-align-center
text-align-right
text-style-strikethrough
text-style-italic
text-style-muted
text-style-allcaps
text-style-link
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Columns need to be nested within a row and a direct child of a container. All columns start off at equal-widths by defining the class of "col" and auto-collapse at the mobile portrait breakpoint if no responsive classes are defined.
To remove all padding from columns, use the no-gutters class preceded by the initial class of col.
Define your div with a class of container-fluid for full width.
To define our 12 column grid, all classes must precede with the initial class of col
Defining our tablet breakpoints, all classes must precede with the class of col and if defined, your desktop class of col-(1-12)
Defining our mobile landscape breakpoints, all classes must precede with the class of col and if defined, your desktop and tablet classes of col-(1-12)
Defining our mobile portrait breakpoints, all classes must precede with the class of col and if defined, your desktop and tablet classes of col-(1-12)
If responsive columns are placed within a single row and which the total result in greater then 12, they will automatically wrap onto a new line.
To align columns from the top, combine a class of align-start preceded by the class of row
To align columns from the top, combine a class of align-center preceded by the class of row
To align columns from the top, combine a class of align-end preceded by the class of row
To align columns from the left, combine a class of justify-start preceded by the by class of row
To align columns from the left, combine a class of justify-center preceded by the by class of row
To align columns from the left, combine a class of justify-end preceded by the by class of row
To align columns from the left, combine a class of justify-between preceded by the by class of row
To individually self-align columns, combine a class of self-start, self-center, self-end preceded by the by class of col
To individually reorder columns, combine a class of either order-first, order-last, preceded by the by class of col
