Typography Details Other Pages Hits: 3576 Heading 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. AddressCompany 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 Title Tagshotel booking discount location map travel Color SwatchesBrand Colors #132e5eBrand Primary #aa8844Brand Secondary #f0ad4eBrand Warning #d9534fBrand Danger #5bc0deBrand Info #5cb85cBrand Success Grayscale Levels #111Gray Darker #222Gray Dark #555Gray #888Gray Light #eaeaeaGray Lighter #f7f7f7Gray Lightest Buttons Normal Button Primary Button Success Button Warning Button Danger Button Info Button NavigationsTabs 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 InputsInput 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. Badges Home 42 Profile Messages 25 Notices 2 LabelsDefault Primary Success Info Warning Danger MiscList 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 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 content WellsLook, 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