Bootstrap 4 Typography

learn use of  Bootstrap Typography Classes

Bootstrap 4 Headings:

h1 - Heading 1 (36px)

h2 - Heading 2 (30px)

h3 - Heading 3 (24px)

h4 - Heading 4 (18px)

h5 - Heading 5 (14px)
h6 - Heading 6 (12px)

All HTML heading from <h1 - h6> can be used using class .h1 to .h6 These classes apply the font styling of a Header element and keeps the text inline. 

Example: Bootstrap 4 Utilities Spacing

<!-- Header Typography -->

<h1>h1 -  Heading 1 (36px)</h1>
<h2>h2 -  Heading 2 (30px)</h2>
<h3>h3 -  Heading 3 (24px)</h3>
<h4>h4 -  Heading 4 (18px)</h4>
<h5>h5 -  Heading 5 (14px)</h5>
<h6>h6 -  Heading 6 (12px)</h6>

Bootstrap 4 Custom Headings:

<h2> Bootstrap 4 <small class="text-muted">Typography</small> </h2>
  <!-- Custom Element and class within header -->

Bootstrap 4 Display Headers

Display Header 1

Display Header 2

Display Header 3

Display Header 4

The Header elements are designed to be used within Text Content, to create Display Headers use class display-*

Example : 

<!-- Header Typography -->
<h1 class="display-1">Display Header 1</h1>
<h2 class="display-2">Display Header 2</h2>
<h3 class="display-3">Display Header 3</h3>
<h4 class="display-4">Display Header 4</h4>

Bootstrap 4 Lead:

To Display a paragraph distinctly for content around it use class .lead

Example:

<p class="lead">Bootstrap 4 Lead : To make a paragraph stand out the surrounding </p>
   <!-- class="lead" -->
<p>Bootstrap 4 Lead : To make a paragraph stand out the surrounding </p>

Bootstrap 4 Inline Text Element

HTML element mark is used to highlight text.

To Denote text which has been deleted.

To Denote text that is no longer accurate or relevant.

To Denote text which is a new addition to the Document.

This element is used to underline the text

To display text in small print.

To Display text as a bold text.

To display the text in italic font-style

Example:

<p>HTML element mark is used to <mark>highlight</mark> text.</p> <!-- element <mark> -->
<p><del>To Denote text which has been deleted.</del></p> <!-- element <del> -->
<p><s>To Denote text that is no longer accurate or relevant.</s></p> <!-- element <s> -->
<p><ins>To Denote text which is a new addition to the Document.</ins></p> <!-- element <ins> -->
<p><u>This element is used to underline the text</u></p> <!-- element <u> -->
<p><small>To display text in small print.</small></p> <!-- element <small> -->
<p><strong>To Display text as a bold text.</strong></p> <!-- element <strong> -->
<p><em>To display the text in italic font-style</em></p> <!-- element <em> 

Bootstrap 4   Abbreviations

Bootstrap 4 provides a styled implementation of HTML element <abbr> used for abbreviations and acronyms, displaying the expanded version when hovered. The Value of the abbreviaition is provided using the attribute title, the text has a light dotted bottom border and help symbol cursor. The class .initialism is used to display the abbreviation is a smaller sized font.

<p><abbr title="United States of America">USA</abbr></p>

            <!-- .initialism -->
<p><abbr title="CSS" class="initialism">Cascading Style Sheets</abbr></p>

Bootstrap Blockquote :

<blockquote class="blockquote"> <!-- class .blockquote -->

<!-- class .m-b-0 sets margin at bottom to zero -->
  <p class="m-b-0">Straight Trees are cut first, don't be too innocent, its a provocation for attack.</p>
</blockquote>

Bootstrap 4 Citing a Source

To create a blockquote with source use <blockquote class="blockquote-footer"> with element <cite>

<blockquote class="blockquote"> <!-- class .blockquote -->

<!-- class .m-b-0 sets margin at bottom to zero -->
  <p class="m-b-0">Straight Trees are cut first, don't be too innocent, its a provocation for attack.</p>
 
   <footer class="blockquote-footer">An Unknown Person in <cite title="Source Title">Source Title</cite></footer>
             <!-- class=".blockquote-footer" -->                <!-- title="value" -->
 </blockquote>

Bootstrap 4  Reverse Layout

To Display the Blockquote with reversed layout use class .blockquote-reverse

<blockquote class="blockquote blockquote-reverse"> <!-- class .blockquote-reverse -->

<!-- class .m-b-0 sets margin at bottom to zero -->
  <p class="m-b-0">Straight Trees are cut first, don't be too innocent, its a provocation for attack.</p>
 
   <footer class="blockquote-footer">An Unknown Person in <cite title="Source Title">Source Title</cite></footer>
             <!-- class=".blockquote-footer" -->                <!-- title="value" -->
 </blockquote>

Bootstrap 4 Unstyled List 

To Create an Unstyled list use class .list-unstyled to create unordered list with no dots and left margin.

<ul class="list-unstyled">  <!-- class=".list-styled"  -->
  <li>United States of America</li>
  <li>China</li>
  <li>Japan</li>
  <li>France</li>
  <li>India
    <ul>       <!-- class .list-styled not used, hence regular unordered list -->
      <li>Mumbai</li>
      <li>Delhi</li>
      <li>Chennai</li>
      <li>Bangaluru</li>
    </ul>
  </li>
  <li>Australia</li>
  <li>Germany</li>
  <li>Russia</li>
</ul>

Bootstrap 4 Inline List

Bootstrap 4 List class .list-inline is used to create an inline list.

<ul class="list-inline">   <!-- class .list-inline -->
  <li class="list-inline-item">Apples</li>  <!-- .list-inline-item -->
  <li class="list-inline-item">Mango</li>
  <li class="list-inline-item">Pineapple</li>
</ul>

Bootstrap 4 Horizontal Description

Bootstrap 4 Typography class .dl-horizontal is used align term and its description horizontally buy using grid system class. Additionally, the class .text-truncate is used to truncate the text with ellipsis

<!-- class .dl-horizontal -->
<dl class="dl-horizontal">
  <dt class="col-sm-3">Mercury</dt>
  <dd class="col-sm-9">The First Planet in the Solar System, too hot.</dd>

  <dt class="col-sm-3">Venus</dt>
  <dd class="col-sm-9">The Second Planet in the Solar System, not feasible for human life.</dd>
  <dd class="col-sm-9 col-sm-offset-3">A NASA Mission to Venus is in pipeline.</dd>

  <dt class="col-sm-3">Earth</dt>
  <dd class="col-sm-9">The Third Planet in the Solar System, perfect for Human Life.</dd>

  <dt class="col-sm-3 text-truncate">United Status of America</dt>
  <dd class="col-sm-9">The worlds the Largest Economy and Military Power and hence political power.</dd>
</dl>

Bootstrap 4 Responsive Typography

The Bootstrap 4 supports Responsive Typography, i.e scaling text and other components by changing the root element's font-size property within media queries for multiple viewport sizes.

<style>
   html{font-size:14px;}
  
  @include media-breakpoint-up(sm){
      html{font-size: 16px;}
	}
	
  @include media-breakpoint-up(md){
      html{font-size: 20px;}
	}
	
  @include media-breakpoint-up(lg){
      html{font-size: 28px;}
	}	  
</style>

 

 

Thank You for visit Webriceter.com Design & Develop by Abdur Rahaman