Working with Twitter Bootstrap Typography

Bootstrap uses Helvetica Neue, Helvetica, Arial, and sans-serif in its default font, font-size of 14px, and a lineheight of 1.428. In addition, <p> receive a bottom margin of half their computed line-height (10px by default).
Using typography feature of Bootstrap you can create headings, paragraphs, lists and other inline elements.
Headings: Bootstrap formats heading differently from that of browser default.
element will create a lighter, secondary text in any heading

 

h1 heading lighter, smaller text

h2 heading lighter, smaller text

h3 heading lighter, smaller text

h4 heading lighter, smaller text

h5 heading lighter, smaller text
h6 heading lighter, smaller text

highlight
WHO
This is deleted text

This is some descriptive text This is some descriptive text This is some descriptive text This is some
descriptive text This is some descriptive text This is some descriptive text This is some descriptive text

From Author Name
Note: Add .blockquote-reverse for a blockquote to right-aligned content.

This content is within small tag
This content is within strong tag

This content is within em tag and is rendered as italics

This is an example paragraph demonstrating the use of lead body copy.

Left aligned text.

Center aligned text.

Right aligned text.

This content is muted

This content carries a primary class

This content carries a success class

This content carries a info class

This content carries a warning class

This content carries a danger class

Lowercased text.

Uppercased text.

Capitalized text.

Some Company Pvt Ltd…Street No 007Some City, State XXXXXP: (123) 456-7890
Jamesmailto@somedomain.com

Example of Ordered List

  1. Item 1
  2. Item 2

Example of Un-Ordered List

  • Item 1
  • Item 2

Example of Unstyled List

  • Item 1
  • Item 2

Example of Inline List – Place all list items on a single line and some light padding.

  • Item 1
  • Item 2

Example of Definition List

Description 1
This is description of Item 1
Description 2
This is description of Item 2

Example of Horizontal Definition List

Description 1
This is description of Item 1
Description 2
This is description of Item 2

<header> is wrapped as an inline element.
To display code as a standalone block element use <pre> tag as:

<article>
<h1>Article Heading</h1>
</article>
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
}

 

Leave a Reply