<div style="position:relative;padding-top:4rem">
  <div class="text-sans-serif container">
    <h2 class="h2 mb-5">
      <span>Typography - Font Family Serif</span>
    </h2>
    <div class="py-3 align-items-center row">
      <div class="col-sm-3">
        <small class="text-uppercase font-weight-bold">Heading 1</small>
      </div>

      <div class="col-sm-9">
        <h1 class="mb-0">H1 Soft Design System</h1>
      </div>
    </div>

    <div class="py-3 align-items-center row">
      <div class="col-sm-3">
        <small class="text-uppercase font-weight-bold">Heading 2</small>
      </div>

      <div class="col-sm-9">
        <h2 class="mb-0">H2 Soft Design System</h2>
      </div>
    </div>

    <div class="py-3 align-items-center row">
      <div class="col-sm-3">
        <small class="text-uppercase font-weight-bold">Heading 3</small>
      </div>

      <div class="col-sm-9">
        <h3 class="mb-0">H3 Soft Design System</h3>
      </div>
    </div>

    <div class="py-3 align-items-center row">
      <div class="col-sm-3">
        <small class="text-uppercase font-weight-bold">Heading 4</small>
      </div>

      <div class="col-sm-9">
        <h4 class="mb-0">H4 Soft Design System</h4>
      </div>
    </div>

    <div class="py-3 align-items-center row">
      <div class="col-sm-3">
        <small class="text-uppercase font-weight-bold">Heading 5</small>
      </div>

      <div class="col-sm-9">
        <h5 class="mb-0">H5 Soft Design System</h5>
      </div>
    </div>

    <div class="py-3 align-items-center row">
      <div class="col-sm-3">
        <small class="text-uppercase font-weight-bold">Heading 6</small>
      </div>

      <div class="col-sm-9">
        <h6 class="mb-0">H6 Soft Design System</h6>
      </div>
    </div>

    <div class="py-3 align-items-center row">
      <div class="col-sm-3">
        <small class="text-uppercase font-weight-bold">Lead text</small>
      </div>

      <div class="col-sm-9">
        <p class="lead mb-0">
          I will be the leader of a company that ends up being worth
          billions of dollars, because I got the answers. I understand
          culture. I am the nucleus. I think that&#39;s a responsibility that I
          have, to push possibilities, to show people, this is the level
          that things could be at.
        </p>
      </div>
    </div>

    <div class="py-3 align-items-center row">
      <div class="col-sm-3">
        <small class="text-uppercase font-weight-bold">Paragraph</small>
      </div>

      <div class="col-sm-9">
        <p class="mb-0">
          I will be the leader of a company that ends up being worth
          billions of dollars, because I got the answers. I understand
          culture. I am the nucleus. I think that&#39;s a responsibility that I
          have, to push possibilities, to show people, this is the level
          that things could be at.
        </p>
      </div>
    </div>

    <div class="py-3 align-items-center row">
      <div class="col-sm-3">
        <small class="text-uppercase font-weight-bold">Small</small>
      </div>

      <div class="col-sm-9">
        <p class="text-sm mb-0">
          I will be the leader of a company that ends up being worth
          billions of dollars, because I got the answers. I understand
          culture. I am the nucleus. I think that&#39;s a responsibility that I
          have, to push possibilities, to show people, this is the level
          that things could be at.
        </p>
      </div>
    </div>

    <div class="py-3 align-items-center row">
      <div class="col-sm-3">
        <small class="text-uppercase font-weight-bold">Tiny</small>
      </div>

      <div class="col-sm-9">
        <p class="text-xs mb-0">
          I will be the leader of a company that ends up being worth
          billions of dollars, because I got the answers. I understand
          culture. I am the nucleus. I think that&#39;s a responsibility that I
          have, to push possibilities, to show people, this is the level
          that things could be at.
        </p>
      </div>
    </div>
  </div>
</div>