CODEWITHSUNDEEP
htmltwitter-bootstrap
adrCoder
adrCoder

Reputation: 3275

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

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/[email protected]/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>

enter image description here

Upvotes: 0

Views: 54

Answers (1)

joshmoto
joshmoto

Reputation: 5088

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/[email protected]/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/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 🙏

Upvotes: 1

Related Questions