How to correctly align form rows one below the other in Bootstrap 4

Question

How can I align the Section and Date and Time to be below the Number of Guests? And how can I move the buttons to be below the Date and Time text fields?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div id="reserveTable" class="modal fade" role="dialog">
  <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">
            <legend class="col-form-label col-12 col-md-4">Number of Guests</legend>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="numberGuests" id="guests1" value="1">
              <label class="form-check-label" for="guests1">1&nbsp;</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="numberGuests" id="guests2" value="2">
              <label class="form-check-label" for="guests2">2&nbsp; </label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="numberGuests" id="guests3" value="3">
              <label class="form-check-label" for="guests3">3&nbsp; </label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="numberGuests" id="guests4" value="4">
              <label class="form-check-label" for="guests4">4&nbsp; </label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="numberGuests" id="guests5" value="5">
              <label class="form-check-label" for="guests5">5&nbsp; </label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="numberGuests" id="guests6" value="6">
              <label class="form-check-label" for="guests6">6&nbsp; </label>
            </div>
          </div>
      </div>

      <div class="form-row">
        <legend class="col-form-label col-12 col-md-4">Section</legend>
        <div class="form-check form-check-inline">
          <input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
          <label class="btn btn-outline-success" for="success-outlined">Non-Smoking</label>

          <input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
          <label class="btn btn-outline-danger" for="danger-outlined">Smoking</label>
        </div>
      </div>
      <div class="form-row">
        <legend class="col-form-label col-12 col-md-4">Date and Time</legend>
        <div class="form-check form-check-inline">
          <div class="col-4 col-md-3">
            <input class="form-control" type="datetext" placeholder="Date" id="reservationDate">
          </div>
          <div class="col-4 col-md-3">
            <input class="form-control" type="timetext" value="Time" id="reservationTime">
          </div>
        </div>
      </div>

      <div class="form-row">
        <button type="button" class="btn btn-secondary btn-sm ml-auto" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-primary btn-sm ml-1">Reserve</button>
      </div>
      </form>

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

Your HTML has problems, as you can see from the formatted snippet above. There are extra closing div and form tags and improperly nested elements. Please use a good editor or run it through a validator so those issues become apparent. — isherwood, Jul 05 '22 at 19:25
Then I suggest you have a look at the very good [Bootstrap form docs](https://getbootstrap.com/docs/4.6/components/forms/#form-grid) for guidance. You need to apply rows and columns in a more careful manner. — isherwood, Jul 05 '22 at 19:29
Simply by adding your html to jsfiddle and hitting the tidy button in the html editor, shows you got extra closing `` on line 39... https://jsfiddle.net/joshmoto/q9cuf02y/ ...you also got extra closing `` tag at the end. Gotta make sure your html tags open and close perfectly to avoid unexpected results like this. A good IDE would normally point these errors out for you. — joshmoto, Jul 05 '22 at 19:38
[How to enable VS Code HTML error checking / validation?](https://stackoverflow.com/q/44559598/1264804) — isherwood, Jul 06 '22 at 13:19

joshmoto · Answer 1 · 2022-07-05T22:24:51.750

Here is one way you could handle a bootstrap 4 form within a modal.

It sometimes works to convert the div.modal-content to a form.modal-content element so you can utilise bootstraps modal child .modal-header, .modal-body and .modal-footer framework div elements.

There is no html 5 validation markup rules against this method (I think)... the output result is much cooler than oppose to writing the form purely inside the .modal-body div.

As long as you can handle the validation OK this way then worth playing around with this.

I have included html comments on the key opening and closing points, see comments in working demo below...

Here is fiddle version too... https://jsfiddle.net/joshmoto/2svz7u5o/

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#reserveTable">
  Launch reserve table modal
</button>

<div id="reserveTable" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg" role="content">

    <!-- convert modal-content div into form element -->
    <form class="modal-content">

      <!-- then our modal-header div -->
      <div class="modal-header">
        <h4 class="modal-title">Reserve a Table </h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- then our modal-body div -->
      <div class="modal-body">

        <!-- then our number of guests form-group -->
        <div class="form-group">
          <label>Number of Guests</label>
          <div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="numberGuests" id="guests1" value="1">
              <label class="form-check-label" for="guests1">1&nbsp;</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="numberGuests" id="guests2" value="2">
              <label class="form-check-label" for="guests2">2&nbsp; </label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="numberGuests" id="guests3" value="3">
              <label class="form-check-label" for="guests3">3&nbsp; </label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="numberGuests" id="guests4" value="4">
              <label class="form-check-label" for="guests4">4&nbsp; </label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="numberGuests" id="guests5" value="5">
              <label class="form-check-label" for="guests5">5&nbsp; </label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="numberGuests" id="guests6" value="6">
              <label class="form-check-label" for="guests6">6&nbsp; </label>
            </div>
          </div>
        </div>

        <!-- then our section form-group -->
        <div class="form-group">
          <label>Section</label>
          <div class="btn-toolbar">
            <div class="btn-group btn-group-toggle btn-block" data-toggle="buttons">
              <label class="btn btn-outline-success w-50">
                <input type="radio" name="tableSection"> Non-Smoking
              </label>
              <label class="btn btn-outline-danger w-50">
                <input type="radio" name="tableSection"> Smoking
              </label>
            </div>
          </div>
        </div>

        <!-- then our date and time form-group -->
        <div class="form-group">
        
          <!-- form-row div for tighter gutters with multi column form fields -->
          <div class="form-row">
          
            <!-- mobile first full width then 50% on sm col width -->
            <div class="col-12 col-sm-6 mb-3 mb-sm-0">
              <label for="reservationDate">Date</label>
              <input class="form-control" type="date" value="" id="reservationDate">
            </div>
            
            <!-- mobile first full width then 50% on sm col width -->
            <div class="col-12 col-sm-6">
              <label for="reservationTime">Time</label>
              <input class="form-control" type="time" value="" id="reservationTime">
            </div>
            
          </div>
        </div>

      <!-- closing modal-body div elem  -->
      </div>

      <!-- then our modal-footer div containing the dismiss and submit buttons -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary ml-auto" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-primary ml-1">Reserve</button>
      </div>

    <!-- closing form element for our modal-content div  -->
    </form>

  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>

In response to your last comment, IDE recommendations from me is a biased one because I have only used one in the last 8 years or more, and that is PhpStorm. It all depends on what language you are working with, I predominately use PHP so this is my IDE of choice.

I cant speak for Visual Studio or version of VS you use, tho surprising no flags (warnings, errors, etc) appear in your editor. You should not have to find an option for this, it should make you aware of any invalid html markup as you work..

..one would hope

How to correctly align form rows one below the other in Bootstrap 4

1 Answers1

Linked

Related