Search code examples
htmltwitter-bootstrapbootstrap-4twitter-bootstrap-form

Show label inline on a input field in Bootstrap 4

I need to place the label and input on one line.

<div class="container">
  <div class="row mt-2">
    <div class="form-group">
      <div class="dates">
        <label class="d-inline-block" for="arrival">Дата заезда:</label>
        <div class="col-10">
          <input type="text" class="form-control form-control-sm d-inline-block" name="arrival" id="arrival" placeholder="YYYY-MM-DD" autocomplete="off" required>
        </div>
      </div>
    </div>
  </div>
</div>

What it looks like now:

enter image description here

Solution

  • What about this? 

    <div class="container">
        <div class="row mt-2">
            <div class="form-group">
                <div class="dates">
                    <div class="col-6">
                        <label class="d-inline-block" for="arrival">Label:</label>
                    </div>
                    <div class="col-6">
                        <input type="text" class="form-control form-control-sm d-inline-block" name="arrival"
                               id="arrival" placeholder="YYYY-MM-DD" autocomplete="off" required>
                    </div>
                </div>
            </div>
        </div>
    </div>