<html>

  <head>
    <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
  </head>
  
  <body>
    <div class="col-md-8 col-sm-12" style="width: 100% !important">
      <div class="appointment-block">
        <h5 class="form-heading-title">
            <span class="form-heading-no">1.</span>
  Services</h5>
        <div class="row">
          <div class="col-sm-6">
            <input type="text" class="form-control date-pick searchBox" id="appointment-date" placeholder="Appointment Date" />
          </div>
          <button type="button" onclick="selectService()" class="btn btn-primary pull-right searchButton">Save</button>
        </div>
        <div class="table-responsive">
          <table id="tblServices" class="table table-condensed table-responsive tableBody">
            <thead>
              <tr>
                <th>S.No</th>
                <th>Service Name</th>
                <th>Service Price</th>
              </tr>
            </thead>
            <tbody id="tbodytblServices"></tbody>
          </table>
        </div>
      </div>
    </div>
  </body>

</html>
// Code goes here

/* Styles go here */