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:
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
or .h3->24px
or .h4->18px
or .h5->14px
or .h6->12px
or .h5->14px
or .h6->12px
Example:
H1 Element
or H1 ClassH2 Element
or H2 ClassH3 Element
or H3 ClassH4 Element
or H4 ClassH5 Element
or H5 ClassH6 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:
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:
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:
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 etcExample:
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:
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
example:
- 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:
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:
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:
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:
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:
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:
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
This is a paragraph.
Make left-aligned text
to make a text left align use the class name text-left text
example
This is a paragraph.
Make right-aligned text
to make right align text use the class name text-right
example
This is a paragraph.
Make center align text
to make the text align center use the class name text-center
example
This is a paragraph.
Make a text-justify
to make a text-justify use the class name text-justify
example
This is a paragraph.
Make no wrap text
to make a text no-wrap use the class name text-nowrap
example
This is a paragraph.
Make text capitalize
To make capitalize text use the class name text-capitalize
example
This is a paragraph.
Make text uppercase
Tomake text uppercase use the class name text-uppercase
example
This is a paragraph.
Make text lowercase
to make text lowercase use the class name text-lowercase
example
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:
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:
- 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:
- element 1
- element 2
- element 3
Make dl and dt horizontal
use the class name dl-horizontal to make all dl horizontal
Example:
- 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:
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.