Bootstrap Typography

Hi, we will look at some HTML elements that will be styled differently by Bootstrap than browser defaults for some html elements .

Heading

The html heading tag ie from h1 tag to h6 tag . And for the property of the heading user can use the ,h1 to .h6 classes also, for when you want to match the font styling of a heading but still want your text to be displayed inline.

h1 or .h1 class the size of the tag is 36px and its semi boalt

h2 or .h2 class the size of the tag is 30px and its semi boalt

h3 or .h3 class the size of the tag is 24px and its semi boalt

h4 or .h4 class the size of the tag is 18px and its semi boalt

h5 or .h5 class the size of the tag is 14px and its semi boalt

h6 or .h6 class the size of the tag is 12px and its semi boalt

Exmple: 

h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading

For code and more details visit my site 

Body copy

Bootstrap’s global default font-size is 14px, with a line-height of 1.428. This is applied to the

Lead body copy

Make a paragraph stand out by adding .lead.

Built with Less

The typographic scale is based on two Less variables in variables.less: @font-size-base and @line-height-base. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts

Inline text elements

Marked text

For highlighting a run of text due to its relevance in another context, use the mark tag.

Example: mark tag to highlight text.

Deleted text

For indicating blocks of text that have been deleted use the del tag.

Example: treated as deleted text.

Strikethrough text

For indicating blocks of text that are no longer relevant use the s tag.

Example: treated as deleted text.

Inserted text

For indicating additions to the document use the ins tag.

Example: the text look like

Underlined text

To underline text use the u tag.

Example: the text look like

Small text

For de-emphasizing inline or blocks of text, use the small tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested small elements.

You may alternatively use an inline element with .small in place of any small.

Bold

For emphasizing a snippet of text with a heavier font-weight. fir thet have to use strong tag

Italics

For emphasizing a snippet of text with italics. For that have to use em tag.

Alignment classes

By using bootstrap alignment classes we can easily align element to center , left, right, or justify.

class text-left to Left aligned text.
class text-center to Center aligned text.
class text-right to Right aligned text.
class text-justify to Justified text.
class text-nowrap to No wrap text.

Transformation classes

In bootstrap there is options for make texts upper case, lower case and capitalized text,

class text-lowercase to Lower cased  text.class text-uppercase to Upper cased  text.class text-capitalize to Capitalized text.

Abbreviations

Stylized implementation of HTML’s abbr tag element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.

Initialism

Add .initialism to an abbreviation for a slightly smaller font-size.

Addresses

For properly formatted address user have to use address tag and inside address tag the text or line have to separated by br tag.

Blockquote options

Style and content changes for simple variations on a standard blockquote.

Naming a source

Add a footer for identifying the source. Wrap the name of the source work in cite.

Alternate displays

Add .blockquote-reverse for a blockquote with right-aligned content.

Lists

Unordered

A list of items in which the order does not explicitly matter. here have to use ul li tag.

Ordered

A list of items in which the order does explicitly matter. here have to use ol li tag.

Unstyled

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

Inline

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

Description

A list of terms with their associated descriptions.

Horizontal description

Make terms and descriptions in dl line up side-by-side. Starts off stacked like default dl s, but when the navbar expands, so do these.

For code and more details visit my site