Bootstrap Typography

Helvetica Neue, Helvetica, Arial, and sans-serif are the default font stack of Bootstrap. You can make headings styles, paragraphs styles, lists styles and other inline elements using the feature of Bootstrap typography. Let see thoroughly each one these in the following segments:


All HTML headings h1 though h6 are styled in Bootstrap. You can see an example is as shown below:

You can see Demo of above code segment with Bootstrap will produce.

Inline Subheadings

To adding an inline subheading to any of the headings, simply add <small> tag around any elements or add .small class and you will get smaller size text in a lighter color as shown in the Demo.

Here is Demo of above code segment with Bootstrap will produce following result:

Lead Body Copy

Defaul font size is 14px of Bootstrap’s global, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).

To add some emphasis to a paragraph, add class=”lead”. You will get larger font size, lighter weight, and a taller line height as in the following example:


Bootstrap is using some default emphasis tags of HTML just like <<small> (sets text at 85% the size of the parent), <strong> emphasizes a text style with heavier font-weight, <em> emphasizes a text style in italics.

Bootstrap giving a some classes that can be used to provide emphasis on texts as seen in the following example:


The HTML element provides markup for abbreviations or acronyms, like WWW or HTTP. Bootstrap styles <abbr> elements with a light dotted border along the bottom and reveals the full text on hover (as long as you add that text to the <abbr> title attribute). To get a a slightly smaller font size Add .initialism to <abbr>.

Basic Abbreviations

 To obtain the faintly smaller font size Add “.initialism” class to <abbr>.



<address> tag can help you to display the information of contacts on your web page with nice view. Since the <address> defaults to display:block; you will require to use tags to add line breaks to the with this address text.


You can use the default wrap <blockquote> around any HTML text as a quote. Other options are included like adding a <small> tag for identifies the source of the quote and right-aligning the blockquote using class .pull-right. The following example shows all these features:


Bootstrap also supports ordered lists, unordered lists, and definition lists.

Ordered lists

An ordered list of items is a list that falls in some type of sequential order and is prefaced by numbers.

<h3>Example of Ordered List</h3>

Unordered lists

An unordered list is a list that and is usually styled with bullets and does not have any picky order. If you do not want the bullets to show then you can remove that styling by applying the class “.list-unstyled”. Using class “.list-inline” you can also place all list items on a single line.

<h4>Example of UnOrdered List</h4>

Definition lists

In definition list type, every list item can consist of both the <dt> and the <dd> tags. <dt> stands for definition term, and like a dictionary, this is the word or phrase that is being defined. After, the <dd> is the definition of the <dt>.


Take out the default list-style and left margin on list items (immediate children only). This applies only on immediate children list items, meaning you will require to add the class for every nested lists also.


Place all list items on a single line with display: inline-block; and some light padding.

You can make terms and descriptions in <dl> line up side-by-side using class dl-horizontal.

Leave a Reply

Your email address will not be published. Required fields are marked *