Subscribe
More
    HomeUncategorised
    Super User
    Super User

    Latest Posts

    Typography

    Core Typography

    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
    first.last@example.com

    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

    This is a <blockquote> in a <.well>.

    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

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

    Quote’s author in Source Title

     

    Color Swatches

    Brand Colors

    #cc0000
    Brand Primary
    #669900
    Brand Secondary
    #ff8800
    Brand Warning
    #cc0000
    Brand Danger
    #0099cc
    Brand Info
    #669900
    Brand Success

    Grayscale Levels

    #222222
    Gray Darker
    #444444
    Gray Dark
    #666666
    Gray
    #999999
    Gray Light
    #eeeeee
    Gray Lighter
    #f8f8f8
    Gray Lightest

     

    Navigations

    Horizontal Navbar

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

    Vertical Menus

     

    Forms

    Buttons

    Default Button
    Primary Button
    Success Button
    Inverse Button
    Info Button
    Warning Button
    Danger Button
    Disabled Button

    Inputs

    Sample Basic Form

    Legend

    A longer block of help text that breaks onto a new line and may extend beyond one line.


     

    Hero Units

    Jumbotron

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    Call to Action

    Primary Jumbotron

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    Call to Action

    Masthead

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    Call to Action

    Primary Masthead

    This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

    Call to Action

     

    Media Object

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    More nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

     

    Tables

    Basic Tables

    # Column heading Column heading Column heading
    1 Column content Column content Column content
    2 Column content Column content Column content
    3 Column content Column content Column content
    4 Column content Column content Column content
    5 Column content Column content Column content
    6 Column content Column content Column content
    7 Column content Column content Column content
    # Column heading Column heading Column heading
    1 Column content Column content Column content
    2 Column content Column content Column content
    3 Column content Column content Column content
    4 Column content Column content Column content
    5 Column content Column content Column content
    6 Column content Column content Column content
    7 Column content Column content Column content

    Bordered Tables

    # Column heading Column heading Column heading
    1 Column content Column content Column content
    2 Column content Column content Column content
    3 Column content Column content Column content
    4 Column content Column content Column content
    5 Column content Column content Column content
    6 Column content Column content Column content
    7 Column content Column content Column content
    # Column heading Column heading Column heading
    1 Column content Column content Column content
    2 Column content Column content Column content
    3 Column content Column content Column content
    4 Column content Column content Column content
    5 Column content Column content Column content
    6 Column content Column content Column content
    7 Column content Column content Column content

     

    Indicators

    Alerts and Notifications

    Oh snap! Change a few things up and try submitting again.
    Well done! You successfully read this important alert message.
    Heads up! This alert needs your attention, but it’s not super important.
    Warning! Best check yo self, you’re not looking too good.

    Badges

    Labels

    Default Primary Success Info Warning Danger

     

    Other useful components

    List groups

    • 14 Cras justo odio
    • 2 Dapibus ac facilisis in
    • Morbi leo risus
    • Morbi leo risus
    • 1 Morbi leo risus
    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. Maecenas sed diam eget 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!

    Super User
    Super User

    Latest Posts

    spot_imgspot_img

    Don't Miss

    Stay in touch

    To be updated with all the latest news, offers and special announcements.

    Hollywood

    Music

    Beauty

    Fashion

    Stay in touch

    To be updated with all the latest news, offers and special announcements.

    Contact us