Bootstrap's Default Settings

What is Typography

Typography classes and sample program and output

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

Program for heading tag
  1. <!DOCTYPE html>
  2. <html >
  3. <head>
  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">
  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>

Program for <small>
  1. <!DOCTYPE html>
  2. <html >
  3. <head>
  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">
  9. </head>
  10. <body>
  11. <div class="container">
  12. <div class="row">
  13. <div class="col-ls-12 well">
  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>

Sample program for <mark>
  1. <!DOCTYPE html>
  2. <html >
  3. <head>
  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">
  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>

Sample program for <abbr>
  1. <!DOCTYPE html>
  2. <html >
  3. <head>
  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">
  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>

Sample program for <blockquote>
  1. <!DOCTYPE html>
  2. <html >
  3. <head>
  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">
  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>
  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>
  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">
  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>

<pre>

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">
  8. </head>
  9. <body>
  10. <div class="container">
  12. <pre>
  13. This is
  14. C#corner
  15. Contribution
  16. </pre>
  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>

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>
  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
The classes for background colors are
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!