WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Text/Typography


Bootstrap's Default Settings

Bootstrap's global default font-size is 14px, with a line-height of 1.428.

This is applied to the <body> and all paragraphs.

In addition, all <p> elements have a bottom margin that equals half their computed line-height (10px by default).



<h1> - <h6>

By default, Bootstrap will style the HTML headings (<h1> to <h6>) in the following way:

Example

I am h1 Bootstrap heading (36px)

I am h2 Bootstrap heading (30px)

I am h3 Bootstrap heading (24px)

I am h4 Bootstrap heading (18px)

I am h5 Bootstrap heading (14px)
I am h6 Bootstrap heading (12px)
Try it Yourself »

<small>

In Bootstrap the HTML <small> element is used to create a lighter, secondary text in any heading:

Example

I am h1 heading secondary text

I am h2 heading secondary text

I am h3 heading secondary text

I am h4 heading secondary text

I am h5 heading secondary text
I am h6 heading secondary text
Try it Yourself »

<mark>

Bootstrap will style the HTML <mark> element in the following way:

Example

This is a highlight text.

Try it Yourself »

<abbr>

Bootstrap will style the HTML <abbr> element in the following way:

Example

The GOOGLE was founded in 1999.

Try it Yourself »

<blockquote>

Bootstrap will style the HTML <blockquote> element in the following way:

Example

Google is a American company which have include online advertising technologies, search engine, cloud computing, software, and hardware .

From Google website
Try it Yourself »

To show the quote on the right, use the .blockquote-reverse class:

Example

Google is a American company which have include online advertising technologies, search engine, cloud computing, software, and hardware .

From Google website
Try it Yourself »

<dl>

Bootstrap will style the HTML <dl> element in the below:

Example

Apple/dt>
- red fruit
banana
- yellow fruit
Try it Yourself »

<code>

Bootstrap will style the HTML <code> element in the below:

Example

The following HTML elements: span, section, and div defines a section in a document.

Try it Yourself »

<kbd>

Bootstrap will style the HTML <kbd> element in the below:

Example

Use ctrl + c to open the copy file.

Try it Yourself »

<pre>

Bootstrap will style the HTML <pre> element in the below

Example

This text is pre elements.
Try it Yourself »

Contextual Colors and Backgrounds

Bootstrap also has some contextual classes that can be used to provide "meaning through colors".

The classes for text colors are:.text-muted, .text-primary, .text-success, .text-info, .text-warning, and .text-danger:

Example

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Try it Yourself »

The classes for background colors are:.bg-primary, .bg-success, bg-info, bg-warning, and .bg-danger:

Example

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Try it Yourself »