#                 
## Overview
In displaying text content on a web page, it's important to follow a concise and accessible format. 
**Bootstrap** is a popular CSS framework that provides customized headings, inline subheadings, lists, paragraphs, aligning, adding more design-oriented font styles and so on. We can implement them easily to deliver a good user interface.


By default, Bootstrap 4 uses a default font size of 16px and line height is 1.5.
The default font family is "Helvetica Neue," "Helvetica," "Arial," and "sans-serif."

## Typography styles in Bootstrap 

### Heading

This styles HTML headings `<h1>` to `<h6>`  with a bolder font-weight and an increased font-size.
Alternatively,
`.h1` - `.h6` classes are also available for when we want to match the font styling of a heading to another HTML element.

### Display heading

Display headings used to lay emphasis over normal headings with a larger and unique heading style. The classes range from `display-1` to `display-4.`



<html>
<head>
  <title>Bootstrap Typography</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
 <body>
   <div>
      <h1 class="display-1">Display 1</h1>
      <h1 class="display-2">Display 2</h1>
      <h1 class="display-3">Display 3</h1>
      <h1 class="display-4">Display 4</h1>
   </div>
 </body>
</html>

codemirror

## Lead

The `lead` tag can be used to make a paragraph stand out and be more distinct.


<html>
<head>
  <title>Bootstrap Typography</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
 <body>
   <div>
     <p class="lead">
      This is a lead paragraph. 
    </p>
   </div>
 </body>
</html>

## Inline text elements

Bootstrap also supports styling for common inline HTML5 elements such as:
- `<mark>`: This is used to highlight a text.

- `<u>`: This is used to underline a text.

- `<strong>`: This is used to bold a text.

- `<em>`: This is used to italicize a text.





<html>
<head>
  <title>Bootstrap Typography</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
 <body>
   <div>
   <p>The highlighted text is <mark class='bg-primary'> here</mark></p>
  
   <p><u>This sentence would be underlined </u></p>

   <p><strong>This sentence would be displayed bold</strong></p>

   <p><em>This sentence would be displayed italicized </em></p>
   </div>
 </body>
</html>

## Abbreviations
Abbreviations can be displayed on the page using the `<abbr> tag` and the title.
Abbreviations have a default underline and a cursor to provide additional context on hover and to users of assistive technologies.



<html>
<head>
  <title>Bootstrap Typography</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
 <body>
   <div>
      <p><abbr title="World Health Organization">WHO</abbr></p>
<p><abbr title="HyperText Markup Language">HTML</abbr></p>
   </div>
 </body>
</html>

## Blockquotes

Blockquotes represent quotes from another source within our page using the `<blockquote>` tag. Additionally, the source can also be added using the `.blockquote-footer` class wrapped in the `<cite>` tag.

<html>
<head>
  <title>Bootstrap Typography</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
 <body>
   <div>
    <blockquote class="blockquote">
    <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
  </blockquote>
   </div>
 </body>
</html>

## Lists

The representation of items in a list can be in different types depending on the use case, such as:

- **Unstyled list**: This removes the default bullet point style for the list elements. This can be done by including the `list-unstyled` class.

- **Inline list**: This displays the list items in an inline format using a combination of two classes, `.list-inline` and `.list-inline-item`.

- **Description list**: This is a list of terms with a description of each term.

Description lists are used with the description list tag `<dl>` tag in HTML. Inside the tag, we have description terms  represented with the `<dt>` tag. Also, we use the data description tag `<dd>` to define the term that we have stated. 

<html>
<head>
  <title>Bootstrap Typography</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
 <body>
   <div class='container'>
       <h3> Unstyled Lists </h3>
       <div class='mb-2'>
         <ul class="list-unstyled">
            <li>This is a list.</li>
            <li>This is a list.</li>
          </ul>
       </div>

       <h3> Inline Lists </h3>
       <div class='mb-2'>
         <ul class="list-inline">
            <li class="list-inline-item">This is a list item.</li>
            <li class="list-inline-item">This is a list item.</li>
          </ul>
       </div>

       <h3> Description Lists </h3>
       <div class='mb-2'>
         <dl>
            <dt>Topic One</dt>
            <dd>About Writing </dd>
            <dt>Topic Two</dt>
            <dd> Live tutorial session</dd>
         </dl>
       </div>
   </div>
 </body>
</html>

What is typography in Bootstrap 4?

Bootstrap 4 provides various typography enhancements, including customized headings, inline subheadings, lists, and paragraphs, ensuring accessible and appealing text presentation.