Heading Text

h1. Heading Secondary text

h2. Heading Secondary text

h3. Heading Secondary text

h4. Heading Secondary text

h5. Heading Secondary text

h6. Heading Secondary text

TIPS: Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

Example body text

This is a lead paragraph.
Make a paragraph stand out by adding .lead.

Link Colors

This is a link color blue .link-blue

This is a link color green .link-green

This is a link color caribbean-green .link-caribbean-green

This is a link color red .link-red

This is a link color yellow .link-yellow

This is a link color orange .link-orange

This is a link color pink .link-pink

This is a link color purple .link-purple

Address

Company Name
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Full Name
P: (123) 456-7890

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

Emphasis classes

This is a .mute paragraph.

This is a .text-primary paragraph.

This is a .text-warning paragraph.

This is a .text-danger paragraph.

This is a .text-success paragraph.

This is a .text-info paragraph.

Alignment classes

This is a left aligned text .text-left

This is a center aligned text .text-center

This is a right aligned text .text-right

This is a justify aligned text which is often used in Book Design, Magazine or special Typo Pages. Create a justify aligned text with .text-justify class.

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Quote's author in Source Title

Color Swatches

Brand Colors

#ff7f3a: Brand Primary

#428bca: Brand Secondary

#f0ad4e: Brand Warning

#d9534f: Brand Danger

#5bc0de: Brand Info

#5cb85c: Brand Success

Grayscale Levels

#222222: Gray Darker

#333333: Gray Dark

#555555: Gray

#999999: Gray Light

#eeeeee: Gray Lighter

#f7f7f7: Gray Lightest

Buttons

Normal Button Primary Button Success Button Warning Button Danger Button Info Button

Blue Button green Button Red Button Yellow Button Orange Button Pink Button Purple Button

Small Button Normal Button Large Button

Tabs

In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.

GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).

In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.

GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).

In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.

GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).

In the area of graphical user interfaces (GUI), a tabbed document interface (TDI) or a Tab is one that allows multiple documents to be contained within a single window, using tabs as a navigational widget for switching between sets of documents. It is an interface style most commonly associated with web browsers, web applications, text editors, and preference panes.

GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the desktop metaphor).

Vertical Menus

Inputs

Input success

Input error

Input warning

Disabled input

Indicators

Alerts and Notifications

error message title

Donec eget purus nec tellus tincidunt lacinia et sed lorem. Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

sussess message title

Donec eget purus nec tellus tincidunt lacinia et sed lorem. Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

info message title

Donec eget purus nec tellus tincidunt lacinia et sed lorem. Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

warning message title

Donec eget purus nec tellus tincidunt lacinia et sed lorem. Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.

Badges

Labels

Default Primary Success Info Warning Danger

Misc

List groups

14 Cras justo odio
2 Dapibus ac facilisis in
Morbi leo risus
1 Morbi leo risus
2 Dapibus ac facilisis in

9 Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

List group item heading

Donec id elit non mi porta gravida at eget metus risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus.

List group item heading

Donec id elit non mi porta gravida at eget metus.

Panels

Panel heading

Panel content

Panel primary

Panel content

Panel success

Panel content

Panel warning

Panel content

Panel danger

Panel content

Panel info

Panel content

Wells

Look, I'm in a small well!

Look, I'm in a well!

Look, I'm in a large well!

Typography

Heading Text

h1. Heading Secondary text

h2. Heading Secondary text

h3. Heading Secondary text

h4. Heading Secondary text

h5. Heading Secondary text

h6. Heading Secondary text

Example body text

Link Colors

Address

Emphasis classes

Alignment classes

Blockquotes

Tags

Color Swatches

Brand Colors

Grayscale Levels

Buttons

Navigations

Tabs

Vertical Menus

Inputs

Indicators

Alerts and Notifications

error message title

sussess message title

info message title

warning message title

Badges

Labels

Misc

List groups

List group item heading

List group item heading

List group item heading

Panels

Panel primary

Panel success

Panel warning

Panel danger

Panel info

Wells

How to enroll your child to a class?