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.

    Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

    The following snippet of text is rendered as bold text.

    The following snippet of text is rendered as italicized text.

    An abbreviation of the word attribute is attr.

    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.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    Quote's author in Source Title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    Quote's author in Source Title

    Brand Colors

    #d91e00
    Brand Primary
    #06b06d
    Brand Secondary
    #ffdb00
    Brand Warning
    #d9534f
    Brand Danger
    #0abceb
    Brand Info
    #5cb85c
    Brand Success

    Grayscale Levels

    #222222
    Gray Darker
    #333333
    Gray Dark
    #555555
    Gray
    #999999
    Gray Light
    #eeeeee
    Gray Lighter
    #f7f7f7
    Gray Lightest

    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).

    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.

    Labels

    Default Primary Success Info Warning Danger

    List groups

    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!