-1

My code gives me this:

what I have

while I want to have this:

what I want

How can I achieve this desired layout?

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

<div class="row row-content">
  <div class="col-sm-8 offset-md-2">
    <div class="card" id="card1">
      <h3 class="card-header bg-warning text-white">Reserve a Table</h3>
      <div class="card-body">
        <dt class="col-12 col-md-2">Number of Guests</dt>
        <dd class="col-12 col-md-10">
          <div class="form-check form-check-inline" id="form1">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
            <label class="form-check-label" for="inlineRadio1">1</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
            <label class="form-check-label" for="inlineRadio2">2</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
            <label class="form-check-label" for="inlineRadio3">3</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="option4">
            <label class="form-check-label" for="inlineRadio4">4</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="option5">
            <label class="form-check-label" for="inlineRadio5">5</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio6" value="option6">
            <label class="form-check-label" for="inlineRadio6">6</label>
          </div>
        </dd>
        <dt class="col-12 col-md-6">Date and Time</dt>
        <div class="form-check form-check-inline col-12 col-md-6">
          <input class="form-control col-12" type="tel" name="inlineRadioOptions" id="inlineRadio6" value="Date">
          <label class="form-check-label col-12" for="inlineRadio6"></label>
        </div>
        <div class="form-check form-check-inline col-12 col-md-6">
          <input class="form-control col-12" type="tel" name="inlineRadioOptions" id="inlineRadio6" value="Time">
          <label class="form-check-label col-12" for="inlineRadio6"></label>
        </div>

      </div>
      <div class="form-group row">
        <div class="offset-md-2 col-md-10">
          <button type="submit" class="btn btn-primary" id="button1">
                                        Reserve
                                    </button>
        </div>
      </div>
      </dd>
      </dl>


    </div>

  </div>
</div>

</form>
</div>
<div class="col-12 col-md">
</div>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
adrCoder
  • 3,145
  • 4
  • 31
  • 56
  • [You've already asked this question.](https://stackoverflow.com/questions/72873660/how-to-correctly-align-form-rows-one-below-the-other-in-bootstrap-4) Please respond to the helpful comments there and make improvements rather than re-posting. – isherwood Jul 06 '22 at 13:17

1 Answers1

0

"Number of guests" and "Date and time" has to be in an element that's identical to the select buttons (1-6) or the "date" and "time" text boxes. So in this case, looks like you want to change dt to div.

So you basically have one row with 7 elements: "Numbers of Guests", 1, 2, ... 6. And another, second row, with 3 elements "Date and Time" "Date" text box, "Time text box." Make sure to change col-md-x or col-xx so that everything adds up to 12!

Jocelyn Huang
  • 54
  • 6