WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Text/Typography


Bootstrap default font-size is 16px, line-height is 1.5.

The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif.

Also, all <p> element margin-top: 0 , margin-bottom: 1rem (16px).



<h1> - <h6>

Bootstrap defines styles for all HTML headings (h1 to h6). Consider the following example:

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>

HTML in Bootstrap <small> Element used to create lighter text with smaller font size:

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 4 definition HTML <kbd> The style of the element is as follows:

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 »