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 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 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 #0077bb 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 #f7f7f7 Gray Lightest Navigations Horizontal Navbar Toggle navigation Brand Link Link Dropdown Action Another action Something else here Separated link One more separated link Submit Tabs Home Profile Disabled Dropdown Action Another action Another action 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 Active Menu Item Menu Item Menu Item Disabled Menu Item Dropdown Action Another action Something else here Separated link Forms Buttons Default Button Primary Button Success Button Inverse Button Info Button Warning Button Danger Button Disabled Button Inputs Input success Input error Input warning Disabled input Sample Basic Form Legend Email Password Checkbox Textarea A longer block of help text that breaks onto a new line and may extend beyond one line. Radios Option one is this Option two can be something else Selects 1 2 3 4 5 1 2 3 4 5 Cancel Submit 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 Thumbnails Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more. Default example By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup. Custom content With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails. Thumbnail label Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Button Button Thumbnail label Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Button Button Thumbnail label Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Button Button 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 Home 42 Profile Messages 25 Notices 2 Friends 15 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!
