The bootstrap typography is the text style defined by bootstrap and it is a little bit different from browser default to make the text browser compatible

now the default text inside the body is 14px and line-height is 1.428 and the p tag has a margin that is 10 px by default.

example:

Try it yourself

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Now the heading of bootstrap

for heading you van use

to

or class name .h1 to .h6 and the size of the text inside heading is:

or .h1->36px

or .h2->30px

or .h3->24px

or .h4->18px

or .h5->14px

or .h6->12px

Example:

Try it yourself

H1 Element
 or H1 Class
H2 Element
 or H2 Class
H3 Element
 or H3 Class
H4 Element
 or H4 Class
H5 Element
 or H5 Class
H6 Element
 or H6 Class

The Small element of bootstrap

Use inside bootstrap heading to make the text lighter of the heading text mainly used to show the less important text of a heading

Example:

Try it yourself

H6 Element
 or H6 Class

The mark tag of bootstrap

the tag of bootstrap is used to make a text highlight by making its background yellow

Example:

 

Try it yourself

hi its the marked text inside a p tag

The abbr tag of bootstrap

The tag is used to make a text doted underline

Example:

 

Try it yourself

hi its the abbr text inside a p tag

The blockquote element of bootstrap

the

is used to make a text highlight by checking its front ita mainly used to denote the author name or post or testimonials by etc

Example:

 

Try it yourself

  
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
  

The class name .blockquote-reverse

the class .blockquote-reverse is used inside a blockquote tag to make the text right align and its used as

Example:

 

Try it yourself

  
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
  

The dl tag in bootstrap

The

is used for listing element

example:

 

Try it yourself

Coffee

- black hot drink

Milk

- white cold drink

The tag in bootstrap

The tag code is used to show an HTML or PHP or any code inside a line

* the code should be used in a single line element

Example:

 

Try it yourself

Hi its a code line inside a line

The tag of bootstrap

The tag is used to show keyboard element in bootstrap like as a key bord button

Example:

 

Try it yourself

Hi its a k y inside a line

The

element of bootstrap

and it is used to show multi-line code in a proper structure manner

Example:

 

Try it yourself

  Html Code will be here and the tag and other things have to be replaced by the special character

The text color in BootStrap

There is some class name to make the text color and they are as follows:

.text-muted used to make a text color muted,
.text-primary it makes a text color blue,
.text-success it makes a text color green,
.text-info to make a text color light blue,
.text-warning to make a text color orange,
and .text-danger to make a text color red

Example:

 

Try it yourself

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.

The background color in bootstrap

There are also some classes defined in bootstrap to make an element background-color

They are as follows:

.bg-primary the class name is used to make a background color blue,
.bg-success is used to making a background color green,
.bg-info is used to make a background color light blue,
.bg-warning the class is used to make a background color orange,
and .bg-danger to make a background color red

Example:

 

Try it yourself

This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.

Makes a paragraph stand out

use class name .lead to make a paragraph stand out

Example:

 

Try it yourself

This paragraph stands out.

Make smaller text than the parent

use class name small to make a text size 85% of its parent text size

example

 

Try it yourself

This is a paragraph.

Make left-aligned text

to make a text left align use the class name text-left text

example

 

Try it yourself

This is a paragraph.

Make right-aligned text

to make right align text use the class name text-right

example

 

Try it yourself

This is a paragraph.

Make center align text

to make the text align center use the class name text-center

example

 

Try it yourself

This is a paragraph.

Make a text-justify

to make a text-justify use the class name text-justify

example

 

Try it yourself

This is a paragraph.

Make no wrap text

to make a text no-wrap use the class name text-nowrap

example

 

Try it yourself

This is a paragraph.

Make text capitalize

To make capitalize text use the class name text-capitalize

example

 

Try it yourself

This is a paragraph.

Make text uppercase

Tomake text uppercase use the class name text-uppercase

example

 

Try it yourself

This is a paragraph.

Make text lowercase

to make text lowercase use the class name text-lowercase

example

 

Try it yourself

This is a paragraph.

The slightly small text inside abbr tag

to display slightly small text inside a tag use the class name initialism

Example:

 

Try it yourself

hi its the abbr text inside a p tag

Make a list un style from its default style

It is mainly used in case of ul and ol and to make them un style use the class name list-unstyled

Example:

 

Try it yourself

• Its a li

Place all elements in a single line

use the class name list-inline to make all elements in a single line

Example:

 

Try it yourself

• element 1
• element 2
• element 3

Make dl and dt horizontal

use the class name dl-horizontal to make all dl horizontal

Example:

 

Try it yourself

Coffee

- black hot drink

Milk

- white cold drink

Make scrollable pre or code portion

To make a code portion scrobble use the class name pre-scrollable

Example:

 

Try it yourself

  Text in a pre element
  its scroleble

The above is the text style or typography of bootstrap.

Thanks for reading and please provide your comment to make the site more useful.