Contribute
Bootstrap

Bootstrap Text And CSS Typography

Bootstrap's Default Settings

  • The global font-size in bootstrap is 14px and line-height is 1.428.
  • All paragraphs are included in <body>
  • All <p> elements have bottom margin equal to half of their computer line-height (10px default).

What is Typography

  • All the elements are below HTML elements that are styled a little differently in Bootstrap than browser defaults.
  • There are number of classes using the typography.

Typography classes and sample program and output

<h1>-<h6> or .h1-.h6

  • There are 6 types of headings used in HTML
  • Each tag is different from the another in font size
  • h1: font-size is=36px
  • h2: font-size is=30px
  • h3: font-size is=24px
  • h4: font-size is=18px
  • h5: font-size is=14px
  • h6: font-size is=12px

Program for heading tag 

  1. <!DOCTYPE html>  
  2. <html >  
  3. <head>  
  4.           
  5.         <meta charset="utf-8">  
  6.         <meta name="viewport" content="width=device-width, initial scale=1">  
  7.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  8.           
  9.     </head>  
  10.     <body>  
  11. <div class="container">  
  12.   <div class="row">  
  13.   <div class="col-ls-12 well">  
  14.   <h1>h1 Bootstrap heading is(36px)</h1>  
  15.   <h2>h2 Bootstrap heading is(30px)</h2>  
  16.   <h3>h3 Bootstrap heading is(24px)</h3>  
  17.   <h4>h4 Bootstrap heading is(18px)</h4>  
  18.   <h5>h5 Bootstrap heading is(14px)</h5>  
  19.   <h6>h6 Bootstrap heading is(12px)</h6>  
  20.   </div>  
  21. </div>  
  22. </div>      
  23. <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  24. <script type="text/css" src="js/jquery"></script>   
  25. </body>  
  26. </html>   

Output

Bootstrap

<Small>

  • In the small tag, element is used to create a lighter and secondary text in any heading.
  • This small element is used to display the text in light shade in a particular heading tag.

Program for <small> 

  1. <!DOCTYPE html>  
  2. <html >  
  3. <head>  
  4.           
  5.         <meta charset="utf-8">  
  6.         <meta name="viewport" content="width=device-width, initial scale=1">  
  7.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  8.           
  9.     </head>  
  10.     <body>  
  11. <div class="container">  
  12.   <div class="row">  
  13.   <div class="col-ls-12 well">  
  14.      
  15.   <h1>h1 Bootstrap heading is<small>(36px)<small></h1>  
  16.   <h2>h2 Bootstrap heading is<small>(30px)<small></h2>  
  17.   <h3>h3 Bootstrap heading is<small>(24px)<small></h3>  
  18.   <h4>h4 Bootstrap heading is<small>(18px)<small></h4>  
  19.   <h5>h5 Bootstrap heading is<small>(14px)<small></h5>  
  20.   <h6>h6 Bootstrap heading is<small>(12px)<small></h6>  
  21.   </div>  
  22. </div>  
  23. </div>  
  24. <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  25. <script type="text/css" src="js/jquery"></script>   
  26. </body>  
  27. </html>   

Output

Bootstrap

<mark>

  • Mark tag is used to highlight the particular word in a given paragraph.
  • The color of the highlight is light yellow by default.

Sample program for <mark> 

  1. <!DOCTYPE html>  
  2. <html >  
  3. <head>  
  4.       
  5.     <meta charset="utf-8">  
  6. <meta name="viewport" content="width=device-width, initial scale=1">  
  7. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  8.           
  9.     </head>  
  10.     <body>  
  11. <div class="container">  
  12.   <div class="row">  
  13.   <div class="col-ls-12 well">  
  14.   <p>  
  15.   On the Insert tab, the galleries include items that are<mark> designed</mark> to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.  
  16.   On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.  
  17.   </p>  
  18. </div>  
  19. </div>  
  20. <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  21. <script type="text/css" src="js/jquery"></script>   
  22. </body>  
  23. </html>    

Output

Bootstrap

<abbr>

  • The <abbr> element indicates an abbreviation or acronym.
  • Abbreviations with a title attribute have a dotted bottom border and a help cursor on hover, providing additional context on hover.
  • Inside the <abbr> tag, we should create the title that is used to expand that particular element.

Sample program for <abbr> 

  1. <!DOCTYPE html>  
  2. <html >  
  3. <head>  
  4.           
  5.         <meta charset="utf-8">  
  6.         <meta name="viewport" content="width=device-width, initial scale=1">  
  7.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  8.           
  9.     </head>  
  10.     <body>  
  11. <div class="container">  
  12.   <div class="row">  
  13.   <div class="col-ls-12 well">  
  14.  <h3> <abbr title="Bootstrap">BT</abbr>   Typography</h3>  
  15. </div>  
  16. </div>      
  17. <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  18. <script type="text/css" src="js/jquery"></script>   
  19. </body>  
  20. </html>   

Output

Bootstrap

<blockquote>
  • It is used to highlight the quotes.
  • The <blockquote> tag has <footer> tag also. It is used, for example, highlighting the author name.

Sample program for <blockquote> 

  1. <!DOCTYPE html>  
  2. <html >  
  3. <head>  
  4.           
  5.         <meta charset="utf-8">  
  6.         <meta name="viewport" content="width=device-width, initial scale=1">  
  7.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  8.           
  9.     </head>  
  10.     <body>  
  11. <div class="container">  
  12.   <div class="row">  
  13.   <div class="col-ls-12 well">  
  14. <blockquote>  
  15. "Learn More Be Smart"  
  16. <footer>C# Corner</footer>  
  17. </blockquote>  
  18. </div>  
  19. </div>  
  20.       
  21. <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  22. <script type="text/css" src="js/jquery"></script>   
  23. </body>  
  24. </html>   

Output

Bootstrap

<kbd>

If you are creating some lines of content that line will have some Shortcut keys, means that key will be highlighted in the different style.

Sample program for <kbd> 

  1. <!DOCTYPE html>  
  2. <html >  
  3. <head>  
  4.           
  5.         <meta charset="utf-8">  
  6.         <meta name="viewport" content="width=device-width, initial scale=1">  
  7.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  8.           
  9.     </head>  
  10.     <body>  
  11. <div class="container">  
  12.   <div class="row">  
  13.   <div class="col-ls-12 well">  
  14.     <h5>please press <kbd>CTRL+C</kbd>to copy...</h5>  
  15. </div>  
  16. </div>  
  17. <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  18. <script type="text/css" src="js/jquery"></script>   
  19. </body>  
  20. </html>   

Output

Bootstrap

<code>

  • Bootstrap will style the HTML <code> element in the following way.
  • The following HTML elements:span, section, and div define a section in a document.

<pre>

  • The pre tag is used to print the text the same way it is typed.
  • That is displayed in a fixed width, font, space, line break.

Sample program for <pre> 

  1. <!DOCTYPE html>  
  2. <html >  
  3. <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial scale=1">  
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  7.           
  8.     </head>  
  9.     <body>  
  10. <div class="container">  
  11.     
  12.   <pre>  
  13.             This is   
  14.                       C#corner   
  15.                                 Contribution  
  16.   </pre>  
  17.   
  18. <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  19. <script type="text/css" src="js/jquery"></script>   
  20. </body>  
  21. </html>   

Output

Bootstrap

<dl>

  • A description list with terms and description.
  • <dl>tag is used in conjuction with <dt>(terms/name) <dd>(describes each terms//names).
  • The <dl> tag also supports the global attributes in HTML tags.

Sample program for <dl> 

  1. <!DOCTYPE html>  
  2. <html >  
  3. <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial scale=1">  
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"  
  7.     </head>  
  8. <body>  
  9.           
  10.     <div class="container">  
  11.         <div class="row well">  
  12.             <dl>  
  13.             <dt>Coffee</dt>  
  14.             <dd>Black hot drink</dd>  
  15.             <dt>Milk</dt>  
  16.             <dd>White cold drink</dd>  
  17.             </dl>  
  18.         </div>  
  19.      </div>  
  20.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  21.     <script type="text/css" src="js/jquery"></script>   
  22. </body>  
  23. </html>   

Output

Bootstrap

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
  • .text-danger

The classes for background colors are

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger:

These classes are used to change the font color and background color

More Typography Classes

ClassDescription
.leadMakes a paragraph stand out
.smallsmaller text (set to 85% of the size of the parent)
.text-leftleft-aligned text
.text-centercenter-aligned text
.text-rightright-aligned text
.text-justifyjustified text
.text-nowrapno wrap text
.text-lowercaselowercased text
.text-uppercaseuppercased text
.text-capitalizecapitalized text
.initialismDisplays the text inside an <abbr> element in a slightly smaller font size
.list-unstyledworks on both <ul> and <ol>to remove the default list-style from any nested lists, apply this class to any nested lists as well
.list-inlinePlaces all list items on a single line
.dl-horizontalLines up the terms (<dt>) and descriptions (<dd>) in <dl> elements side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side
.pre-scrollableMakes a <pre> element scrollable
<del>deleted text
<s>Indicates no longer relevant text: No longer relevant text 
<ins>Inserted text
<u>Underlined text
<strong>Bold text
<em>Italic text
<ul>unordered list
<ol>ordered list

Conclusion

I hope, now you understand how to use bootstrap typography in HTML webpages. In the future, we will learn about more bootstrap techniques step by step. Stay tuned!

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs