Typography

        
          <h1>h1. Front heading</h1>
          <h2>h2. Front heading</h2>
          <h3>h3. Front heading</h3>
          <h4>h4. Front heading</h4>
          <h5>h5. Front heading</h5>
          <h6>h6. Front heading</h6>
        
      

        
          <p class="h1">h1. Front heading</p>
          <p class="h2">h2. Front heading</p>
          <p class="h3">h3. Front heading</p>
          <p class="h4">h4. Front heading</p>
          <p class="h5">h5. Front heading</p>
          <p class="h6">h6. Front heading</p>
        
      

        
          <h3>Fancy display heading <small class="text-muted">With faded secondary text</small></h3>
        
      

        
          <!-- Table -->
          <table class="table">
            <tbody>
              <tr>
                <td><span class="display-1">Display 1</span></td>
              </tr>
              <tr>
              <td><span class="display-2">Display 2</span></td>
              </tr>
              <tr>
              <td><span class="display-3">Display 3</span></td>
              </tr>
              <tr>
              <td><span class="display-4">Display 4</span></td>
              </tr>
            </tbody>
          </table>
          <!-- End Table -->
        
      

        
          <p class="lead">This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is a key point.</p>
        
      

        
          <p>You can use the mark tag to <mark>highlight</mark> text.</p>
          <p><del>This line of text is meant to be treated as deleted text.</del></p>
          <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
          <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
          <p><u>This line of text will render as underlined</u></p>
          <p><small>This line of text is meant to be treated as fine print.</small></p>
          <p><span class="text-dark fw-semi-bold">This line rendered as bold text.</span></p>
          <p><em>This line rendered as italicized text.</em></p>
        
      

        
          <p><abbr title="attribute">attr</abbr></p>
          <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p></span>
        
      

        
          <blockquote class="blockquote">A well-known quote, contained in a blockquote element.</blockquote>
        
      

        
          <figure>
            <blockquote class="blockquote">
              <p>A well-known quote, contained in a blockquote element.</p>
            </blockquote>
            <figcaption class="blockquote-footer">
              Someone famous in <cite title="Source Title">Source Title</cite>
            </figcaption>
          </figure>
        
      

        
          <figure class="text-center">
            <blockquote class="blockquote">
              <p>A well-known quote, contained in a blockquote element.</p>
            </blockquote>
            <figcaption class="blockquote-footer">
              Someone famous in <cite title="Source Title">Source Title</cite>
            </figcaption>
          </figure>
        
      

        
          <figure class="text-end">
            <blockquote class="blockquote">
              <p>A well-known quote, contained in a blockquote element.</p>
            </blockquote>
            <figcaption class="blockquote-footer">
              Someone famous in <cite title="Source Title">Source Title</cite>
            </figcaption>
          </figure>
        
      

        
          <figure>
            <blockquote class="blockquote blockquote-sm">
              <p>This is small size blockquote</p>
            </blockquote>
          </figure>
        
      

        
          <dl class="row">
            <dt class="col-sm-3">Description lists</dt>
            <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

            <dt class="col-sm-3">Euismod</dt>
            <dd class="col-sm-9">
              <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
              <p>Donec id elit non mi porta gravida at eget metus.</p>
            </dd>

            <dt class="col-sm-3">Malesuada porta</dt>
            <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

            <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
            <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

            <dt class="col-sm-3">Nesting</dt>
            <dd class="col-sm-9">
              <dl class="row">
                <dt class="col-sm-4">Nested definition list</dt>
                <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
              </dl>
            </dd>
          </dl>