<!-- Flat Picker -->
<div class="col-12 mb-6">
  <div class="card">
    <h5 class="card-header">Flatpickr</h5>
    <div class="card-body">
      <div class="row">

        <div class="col-md-6 col-12 mb-6">
          <label class="form-label">Date Picker</label>
          <input type="text" class="form-control flatpickr-date"/>
        </div>

        <div class="col-md-6 col-12 mb-6">
          <label class="form-label">Time Picker</label>
          <input type="text" class="form-control flatpickr-time" />
        </div>

        <div class="col-md-6 col-12 mb-6">
          <label class="form-label">Datetime Picker</label>
          <input type="text" class="form-control flatpickr-datetime"/>
        </div>

        <div class="col-md-6 col-12 mb-6">
          <label class="form-label">Range Picker</label>
          <input type="text" class="form-control flatpickr-range"/>
        </div>

          <div class="col-md-6 col-12 mb-6">
          <label class="form-label">Date Picker</label>
          <input type="text" class="form-control flatpickr-friendly" />
        </div>
      </div>
    </div>
  </div>
</div>
    

<!-- Bootstrap Daterangepicker -->
<div class="col-12 mb-6">
  <div class="card">
    <h5 class="card-header">Bootstrap Daterange Picker</h5>
    <div class="card-body">
      <div class="row">

        <div class="col-md-6 col-12 mb-6">
          <label class="form-label">Basic</label>
          <input type="text" class="form-control" id="bs-rangepicker-basic" />
        </div>

        <div class="col-md-6 col-12 mb-6">
          <label class="form-label">Single Picker</label>
          <input type="text" class="form-control" id="bs-rangepicker-single" />
        </div>

        <div class="col-md-6 col-12 mb-6">
          <label class="form-label">With Time Picker</label>
          <input type="text" class="form-control" id="bs-rangepicker-time" />
        </div>

        <div class="col-md-6 col-12 mb-6">
          <label class="form-label">Ranges</label>
          <input type="text" class="form-control" id="bs-rangepicker-range" />
        </div>

        <div class="col-md-6 col-12 mb-6">
          <label class="form-label">Week Numbers</label>
          <input type="text" class="form-control" id="bs-rangepicker-week-num" />
        </div>

        <div class="col-md-6 col-12">
          <label class="form-label">Month & Year Dropdown</label>
          <input type="text" class="form-control" id="bs-rangepicker-dropdown" />
        </div>

      </div>
    </div>
  </div>
</div>