Typography Details Other Pages Hits: 3438Heading Texth1. Heading Secondary texth2. Heading Secondary texth3. Heading Secondary texth4. Heading Secondary texth5. Heading Secondary texth6. Heading Secondary textTIPS: Create lighter, secondary text in any heading with a generic <small> tag or the .small class.Example body textThis 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-7890Full Name P: (123) 456-7890 This email address is being protected from spambots. You need JavaScript enabled to view it.Emphasis classesThis 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 classesThis is a left aligned text .text-leftThis is a center aligned text .text-centerThis is a right aligned text .text-rightThis 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.BlockquotesLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Quote's author in Source TitleLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Quote's author in Source TitleTagshotel booking discount location map travelColor SwatchesBrand Colors#132e5eBrand Primary#aa8844Brand Secondary#f0ad4eBrand Warning#d9534fBrand Danger#5bc0deBrand Info#5cb85cBrand SuccessGrayscale Levels#111Gray Darker#222Gray Dark#555Gray#888Gray Light#eaeaeaGray Lighter#f7f7f7Gray LightestButtons Normal Button Primary Button Success Button Warning Button Danger Button Info Button NavigationsTabsHomeProfileDisabled Dropdown ActionAnother actionAnother actionIn 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 MenusActive Menu ItemMenu ItemMenu ItemDisabled Menu Item Dropdown ActionAnother actionSomething else hereSeparated linkInputsInput success Input error Input warning Disabled input IndicatorsAlerts and Notificationserror message titleDonec 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 titleDonec 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 titleDonec 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 titleDonec eget purus nec tellus tincidunt lacinia et sed lorem. Cras ac dignissim mauris. Duis odio diam, rutrum ut est at, scelerisque malesuada risus.BadgesHome 42Profile Messages 25Notices 2LabelsDefault Primary Success Info Warning DangerMiscList groups14 Cras justo odio2 Dapibus ac facilisis inMorbi leo risus1 Morbi leo risus2 Dapibus ac facilisis in9 Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at erosList group item headingDonec id elit non mi porta gravida at eget metus risus varius blandit.List group item headingDonec id elit non mi porta gravida at eget metus.List group item headingDonec id elit non mi porta gravida at eget metus.PanelsPanel headingPanel contentPanel primaryPanel contentPanel successPanel contentPanel warningPanel contentPanel dangerPanel contentPanel infoPanel contentWellsLook, I'm in a small well!Look, I'm in a well!Look, I'm in a large well! Previous article: Error page Prev Next article: What we do Next