<div class="container-fluid text-sans-serif">
  <div class="row py-3 align-items-center">
    <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 Material Kit</h1>
    </div>
  </div>

  <div class="row py-3 align-items-center">
    <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 Material Kit</h2>
    </div>
  </div>

  <div class="row py-3 align-items-center">
    <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 Material Kit</h3>
    </div>
  </div>

  <div class="row py-3 align-items-center">
    <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 Material Kit</h4>
    </div>
  </div>

  <div class="row py-3 align-items-center">
    <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 Material Kit</h5>
    </div>
  </div>

  <div class="row py-3 align-items-center">
    <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 Material Kit</h6>
    </div>
  </div>

  <div class="row py-3 align-items-center">
    <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="row py-3 align-items-center">
    <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="row py-3 align-items-center">
    <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="row py-3 align-items-center">
    <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 class="container">
  <div class="row py-5 mt-3 text-center">
    <div>
      <button type="button" class="btn bg-gradient-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
        Tooltip on top
      </button>
      <button type="button" class="btn bg-gradient-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
        Tooltip on right
      </button>
      <button type="button" class="btn bg-gradient-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
        Tooltip on bottom
      </button>
      <button type="button" class="btn bg-gradient-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
        Tooltip on left
      </button>
    </div>
  </div>
</div>


  <!-- initialization script -->
  <script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    })
  </script>
  

  <div class="container py-7">
  <div class="row mt-3">
    <div class="col-sm-4 col-6 mx-auto">
      <!-- Button trigger modal -->
      <button type="button" class="btn bg-gradient-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Launch demo modal
      </button>

      <!-- Modal -->
      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Your modal title</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              Society has put up so many boundaries, so many limitations on what’s right and wrong that it’s almost impossible to get a pure thought out.
              <br><br>
              It’s like a little kid, a little boy, looking at colors, and no one told him what colors are good, before somebody tells you you shouldn’t like pink because that’s for girls, or you’d instantly become a gay two-year-old.
            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn bg-gradient-dark" data-bs-dismiss="modal">Close</button>
              <button type="button" class="btn bg-gradient-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

  

  <!--  Datepicker -->
<div class="row py-3">
  <div class="col-md-6 mx-auto">
    <div class="row">
      <div class="col-lg-6 mx-auto col-md-8 col-sm-5">
        <div class="input-group input-group-static">
          <span class="input-group-text"><i class="fas fa-calendar"></i></span>
          <input class="form-control datepicker" placeholder="Please select date" type="text" >
        </div>
      </div>
    </div>
  </div>
</div>

  <!-- initialization script -->
<script>
  if (document.querySelector(".datepicker")) {
     flatpickr(".datepicker", {});
  }
</script>