Post
Ask Question

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

 
Class Description
.lead Makes a paragraph stand out
.small smaller text (set to 85% of the size of the parent)
.text-left left-aligned text
.text-center center-aligned text
.text-right right-aligned text
.text-justify justified text
.text-nowrap no wrap text
.text-lowercase lowercased text
.text-uppercase uppercased text
.text-capitalize capitalized text
.initialism Displays the text inside an <abbr> element in a slightly smaller font size
.list-unstyled works 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-inline Places all list items on a single line
.dl-horizontal Lines 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-scrollable Makes 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!


Similar Articles