Bootstrap Typography

By using bootstrap typography you can work with heading, parapgraph, list and other element. By default bootstrap uses helvetica, arial, sans-serif font falmily. Bootstrap's default font-size is 14px and line-height is 1.428 and it is applied to the body and paragraph element. Now we discuss about some bootstrap typography elements:

Heading with Bootstrap

By default, all Heading tags are styled with Bootstrap.

Example:

<h1> This is Heading 1 in Bootstrap. </h1>
<h2> This is Heading 2 in Bootstrap. </h2>
<h3> This is Heading 3 in Bootstrap. </h3>
<h4> This is Heading 4 in Bootstrap. </h4>
<h5> This is Heading 5 in Bootstrap. </h5>
<h6> This is Heading 6 in Bootstrap. </h6>

Run Example

Secondary Text with Heading

By using <small> tag you can write a secondary text with a heading.

Example:

<h1> This is heading 1 in Bootstrap.<small> This is secondary heading. </small> </h1>
<h2> This is heading 2 in Bootstrap.<small> This is secondary heading. </small> </h2>
<h3> This is heading 3 in Bootstrap.<small> This is secondary heading. </small> </h3>
<h4> This is heading 4 in Bootstrap.<small> This is secondary heading. </small> </h4>
<h5> This is heading 5 in Bootstrap.<small> This is secondary heading. </small> </h5>
<h6> This is heading 6 in Bootstrap.<small> This is secondary heading. </small> </h6>

Run Example

The <mark> element

By default, HTML <mark> tag is also styled by bootstrap.

Example:

<h1> This is heading 1 with the<mark> marked </mark> text. </h1>

Run Example

The <abbr> element

By default, HTML <abbr> tag is also styled by bootstrap.

Example:

<h1> He is a <abbr title="Computer Science and Engineering"> CSE </abbr> text. </h1>

Run Example

Emphasis with Bootstrap

Bootstrap also styles HTML's emphasis tags such as <small>,<strong>,<em> etc.

Example:

<h1> It is a <strong> strong </strong> text. </h1>
<h1> It is a <small> small </small> text. </h1>
<h1> This tag converts a text in <em> italic </em> format. </h1>

Run Example

There are some classes of Bootstrap that can be used to provide emphasis on text. They ar following:

  • text-right - Aligned in the right.
  • text-left - Aligned in the right.
  • text-center - Aligned in the center.
  • text-warning - Indicates warning text.
  • text-info - Indicates information text.
  • text-success - Indicates success text.
  • text-danger - Indicates danger text.
  • text-primary - Indicates primary text.
  • text-muted - Indicates muted text.

Example:

<p class="text-right"> Text aligned in the right </p>
<p class="text-warning"> Indicates warning text. </p>
<p class="text-muted"> Indicates muted text. </p>

Run Example

The <address> element

For writing addresses you can use the <address> tag.

Example:

<address>
<strong> K.D.A Approach Road, Sonadanga, Khulna </strong>
</address>

Run Example

The <blockquote> element

For writing addresses you can use the <address> tag.

Example:

<blockquote>
<p> Only a life lived for others is a life worthwhile. </p>
<footer> Albert Einstein </footer>
</blockquote>

Run Example

Recommended Posts: