<ul class="timeline">
  <li class="timeline-item">
    <div class="timeline-item-content">
      <h5 class="mb-0">Timeline item</h5>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-item-content">
      <h5 class="mb-0">Timeline item</h5>
    </div>
  </li>
</ul>

<ul class="timeline">
  <li class="timeline-item timeline-item-active">
    <div class="timeline-item-content">
      <h5 class="mb-0">Active timeline item</h5>
    </div>
  </li>
</ul>

<ul class="timeline timeline-labelled">
  <li class="timeline-item">
    <div class="timeline-item-label">Label</div>
    <div class="timeline-item-content">
      <h5 class="mb-0">Timeline item with label</h5>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-item-label">
      <div class="badge badge-subtle text-uppercase px-1">Label</div>
    </div>
    <div class="timeline-item-content">
      <h5 class="mb-0">Timeline item with label wrapped in a badge</h5>
    </div>
  </li>
</ul>

<button class="btn btn-light" onclick="toggleClass()">Toggle active state</button>
<ul class="timeline timeline-labelled">
  <li class="timeline-item timeline-item-active" id="timeline-item-toggle">
    <div class="timeline-item-label">
      <div class="badge badge-subtle text-uppercase px-1">Day 0</div>
    </div>
    <div class="timeline-item-content">
      <h5>First Request</h5>
      <div class="py-2 px-3 bg-gray rounded">
        <div class="d-flex flex-column">
          <div class="d-sm-flex align-items-center">
            <div class="mr-2"><strong>Send via</strong></div>
            <div class="hm-checkbox hm-input-box hm-input-box-sm mr-1">
              <input class="hm-input" type="checkbox" id="first-request-ch-email" checked>
              <label class="hm-label" for="first-request-ch-email">Email</label>
            </div>
            <div class="hm-checkbox hm-input-box hm-input-box-sm mr-1">
              <input class="hm-input" type="checkbox" id="first-request-ch-sms">
              <label class="hm-label" for="first-request-ch-sms">SMS</label>
            </div>
            <div class="hm-checkbox hm-input-box hm-input-box-sm mr-1">
              <input class="hm-input" type="checkbox" id="first-request-ch-wa">
              <label class="hm-label" for="first-request-ch-wa">WhatsApp</label>
            </div>
            <div class="hm-checkbox hm-input-box hm-input-box-sm mr-1">
              <input class="hm-input" type="checkbox" id="first-request-ch-letter">
              <label class="hm-label" for="first-request-ch-letter">Letter</label>
            </div>
          </div>
        </div>
        <div class="toggle">
          <div class="row pt-2">
            <div class="col-sm-4">
              <div><strong>Send on</strong></div>
              <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                  <div class="input-group-text">Day</div>
                </div>
                <input type="number" class="form-control" value="0">
              </div>
            </div>
            <div class="col-sm-4">
              <div><strong>Invoice due date</strong></div>
              <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                  <div class="input-group-text">Day</div>
                </div>
                <input type="number" class="form-control" value="14" disabled="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-item-label">
      <div class="badge badge-subtle text-uppercase px-1">Day 12</div>
    </div>
    <div class="timeline-item-content">
      <h5>Second Request</h5>
      <div class="bg-gray rounded">
        <div class="d-flex flex-column ">
          <div class="d-sm-flex align-items-center pt-2 px-3">
            <div class="mr-2"><strong>Send via</strong></div>
            <div class="hm-checkbox hm-input-box hm-input-box-sm mr-1">
              <input class="hm-input" type="checkbox" id="second-request-ch-email">
              <label class="hm-label" for="second-request-ch-email">Email</label>
            </div>
            <div class="hm-checkbox hm-input-box hm-input-box-sm mr-1">
              <input class="hm-input" type="checkbox" id="second-request-ch-sms">
              <label class="hm-label" for="second-request-ch-sms">SMS</label>
            </div>
            <div class="hm-checkbox hm-input-box hm-input-box-sm mr-1">
              <input class="hm-input" type="checkbox" id="second-request-ch-wa">
              <label class="hm-label" for="second-request-ch-wa">WhatsApp</label>
            </div>
            <div class="hm-checkbox hm-input-box hm-input-box-sm mr-1">
              <input class="hm-input" type="checkbox" id="second-request-ch-letter">
              <label class="hm-label" for="second-request-ch-letter">Letter</label>
            </div>
          </div>
        </div>
      <div class="row px-3 py-2">
          <div class="col-sm-4">
            <div><strong>Send on</strong></div>
            <div class="input-group input-group-sm">
              <div class="input-group-prepend">
                <div class="input-group-text">Day</div>
              </div>
              <input type="number" class="form-control" value="12">
            </div>
          </div>
          <div class="col-sm-4">
            <div><strong>Invoice due date</strong></div>
            <div class="input-group input-group-sm">
              <div class="input-group-prepend">
                <div class="input-group-text">Day</div>
              </div>
              <input type="number" class="form-control" value="14" disabled="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>