Skip to main content

Theme Colors


Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

White

Black

Headings - Nunito


h1 Heading 1 - 4.4rem

h2 Heading 2 - 3.85rem

h3 Heading 3 - 3.3rem

h4 Heading 4 - 2.75rem

h5 Heading 5 - 2.2rem
h6 Heading 6 - 1.65rem

Display Headings - Nunito


Display 1 - 5.75rem

Display 2 - 5.5rem

Display 3 - 5.25rem

Display 4 - 5rem

Display 5 - 4.75rem

Display 6 - 4.5rem

Paragraph Styles - Open Sans


Paragraph Lead - Duis vulputate diam at orci commodo, quis ultrices lacus sagittis. Sed scelerisque consectetur sodales. Etiam arcu dolor, bibendum et purus eget, posuere sollicitudin justo. Aenean eget sem nec nibh pharetra dapibus vel eu sem. Sed aliquet dictum tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eu condimentum eros, placerat dignissim lectus.

Paragraph - Duis vulputate diam at orci commodo, quis ultrices lacus sagittis. Sed scelerisque consectetur sodales. Etiam arcu dolor, bibendum et purus eget, posuere sollicitudin justo. Aenean eget sem nec nibh pharetra dapibus vel eu sem. Sed aliquet dictum tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eu condimentum eros, placerat dignissim lectus.

Inline Text Elements


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 in Primary Color.

This line rendered in Secondary Color.

This line rendered as italicized text.

Regular Link

Regular Lists


  • Regular Unordered List Item and stuff
  • Lorem Ipsum Dolor Sit Amet
  • Duis vulputate diam at orci commodo, quis ultrices lacus sagittis. Sed scelerisque consectetur sodales. Etiam arcu dolor, bibendum et purus eget, posuere sollicitudin justo
  • Lead Unordered List Item and stuff
  • Lorem Ipsum Dolor Sit Amet
  • Duis vulputate diam at orci commodo, quis ultrices lacus sagittis. Sed scelerisque consectetur sodales. Etiam arcu dolor, bibendum et purus eget, posuere sollicitudin justo
  1. Regular Ordered List Item and stuff
  2. Lorem Ipsum Dolor Sit Amet
  3. Duis vulputate diam at orci commodo, quis ultrices lacus sagittis. Sed scelerisque consectetur sodales. Etiam arcu dolor, bibendum et purus eget, posuere sollicitudin justo

List Group


  • List Group setup
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item

Custom Spacing (padding/margin)


.p-1 (.25rem) mb-1 (.25rem)
.p-2 (.5rem) mb-2 (.5rem)
.p-3 (1rem) mb-3 (1rem)
.p-4 (1.5rem) mb-4 (1.5rem)
.p-5 (2rem) mb-5 (2rem)
.p-6 (2.5rem) mb-6 (2.5rem)
.p-7 (3rem) mb-7 (3rem)

Base Gradients


.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient

Rounded Corners


rounded-1
rounded-2
rounded-3
rounded-4

Borders


border
border-primary
border-1
border-2
border-3
border-4

Shadows


.shadow
.shadow-sm
.shadow-lg

Shadow Directions


.shadow .top-left
.shadow .top
.shadow .top-right
.shadow .left
.shadow .center
.shadow .right
.shadow .bottom-left
.shadow .bottom
.shadow .bottom-right

Images


...
Use a 'figure' when caption is needed.

Forms


Form Control


This email address is being protected from spambots. You need JavaScript enabled to view it.

Form Sizing


Form Disabled


Form Readonly


Form File Input


Color Picker


Datalist


Select


Sizing Large

Sizing Small

Multiple Select

Checks & Radios


Checks

Radios

Switches

Inline

Checkbox Toggle Buttons

Radio Toggle Buttons

Outlined and other styles

Range Slider


Standard

Disabled

Min and Max

Steps

Input Groups


Basic Examples

@
@example.com
https://example.com/users/
$ .00
@
With textarea

Sizing

Small
Default
Large

Floating Lables


This email address is being protected from spambots. You need JavaScript enabled to view it.Email address
This email address is being protected from spambots. You need JavaScript enabled to view it.Input with value

Validation


Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.