Сетка Bootstrap не работает для модального окна, созданного с помощью bootstrap.

Question

Второй элемент модального окна, то есть метка для =" section", остается в той же строке, что и предыдущий элемент, для размеров>= 992px. Пытался добавить смещение, но это не помогло. Также, если вторая строка формы удаляется, третья остается на следующей строке. Что-то не так с сеткой начальной загрузки или другая ошибка, которую я не могу найти. Здесь есть только HTML и бутстрап, и никакой другой CSS.

<div id="reserve-modal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false" tabindex="-1">
  <div class="modal-dialog modal-lg" role="content">
    <div class="modal-content">
      <div class="modal-header">
          <h4 class="modal-title">Reserve a Table</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-row">
            <div class="form-group row">
              <label for="number_of_guests" class="col-12 col-sm-4 col-form-label">Number of
                  Guests</label>
              <div class="col-12 col-sm-8">
                  <input type="radio" id="number_of_guests" name="number_of_guests"> 1
                  <input type="radio" id="number_of_guests" name="number_of_guests" class="ml-3"> 2
                  <input type="radio" id="number_of_guests" name="number_of_guests" class="ml-3"> 3
                  <input type="radio" id="number_of_guests" name="number_of_guests" class="ml-3"> 4
                  <input type="radio" id="number_of_guests" name="number_of_guests" class="ml-3"> 5
                  <input type="radio" id="number_of_guests" name="number_of_guests" class="ml-3"> 6
              </div>
            </div>
            <div class="form-group row">
              <label for="section" class="col-form-label col-12 col-sm-4">Section</label>

              <div class="col-12 col-sm-8 btn-group btn-group-toggle" data-toggle="buttons">
                  <label class="btn btn-success active">
                      <input type="radio" id="non-smoking" class="active col-6"
                          checked="true">Non-Smoking
                  </label>

                  <label class="btn btn-danger">
                      <input type="radio" id="smoking" class="col-6">Smoking
                  </label>
              </div>
            </div>
            <div class="form-group row">
              <label for="datetime" class="col-12 col-sm-3 col-form-label">Date and Time</label>

              <div class="col-12 col-sm-5">
                  <input type="date" class="form-control" id="date" name="date" placeholder="Date">
              </div>

              <div class="col-12 col-sm-4">
                  <input type="time" class="form-control" id="time" name="time" placeholder="Time">
              </div>
          </div>
        </div>
        <div class="form-row pt-2">
            <div class="offset-sm-2 col-sm-10">
              <button type="button" class="btn btn-secondary btn-md ml-auto"
                  data-dismiss="modal">Cancel</button>
              <button type="submit" class="btn btn-primary btn-md ml-1">Reserve</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>