Bootstrap 4 Form formatting

Question

ok, this is starting to irritate me. I am working in bootstrap 4 for the first time and am trying to get a form to format without adding too many divs.

I'm trying to get the label to sit beside the input field. I've tried using floats, col's and a bunch of other things, but for some reason they don't want to listen to me!

Please help from going insane.

My html

<form class='form-group'>
    <div class='container'>
        <div class='row'>
            <div class='col-6'>
                <div class="form-group">
                    <label class='col-form-label formLabel'>Customer Name:</label>
                    <input class='form-control formInput' name='customerName' />
                </div>
                <div class="form-group">
                    <label class='formLabel'>Phone Number:</label>
                    <input class='form-control formInput' name='phoneNumber' />
                </div>
                <div class="form-group">
                    <label class='formLabel'>Email:</label>
                    <input class='form-control formInput' name='emailAddress' />
                </div>
            </div>
        </div>
        <div class='col-6'>
            <div class="form-group">
                <label class='col-form-label formLabel'>Customer Name:</label>
                <input class='form-control formInput' name='customerName' />
            <div class="form-group">
                <label class='formLabel'>Phone Number:</label>
                <input class='form-control formInput' name='phoneNumber' />
            </div>
            <div class="form-group">
                <label class='formLabel'>Email:</label>
                <input class='form-control formInput' name='emailAddress' />
            </div>
        </div>
    </div>

</div>

    <!-- Modal footer -->
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button class='btn btn-success'>Save Changes</button>
    </div>
  </form>

https://www.bootply.com/b8B4C07XB7

The possible duplicates are from four years ago. Different version of bootstrap.

Possible duplicate of [bootstrap label next to input](https://stackoverflow.com/questions/17624226/bootstrap-label-next-to-input) — Sensoray, Nov 07 '17 at 18:52
Also, this might be what you are looking for. https://stackoverflow.com/questions/18404003/label-on-the-left-side-instead-above-an-input-field — Sensoray, Nov 07 '17 at 18:52
They can still apply. The link posted in my second comment is about using form-inline, like the two answers below. — Sensoray, Nov 07 '17 at 19:52

score 0 · Answer 1 · answered Nov 07 '17 at 18:58

Just Add form-inline class inside form tag and see the magic !

<form class="form-group form-inline">
                <div class="container">
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label class="col-form-label formLabel">Customer Name:</label>
                                <input class="form-control formInput" name="customerName">
                            </div>
                        </div>
                    </div>
                </div>
            </form>

score 0 · Answer 2 · answered Nov 07 '17 at 19:05

Use form-inline for inline forms. It applies to viewports larger than 768px, so expand the snippet result window to full screen to see the actual form rendered inline.

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
.formLabel {
  text-align: left;
}

.formInput {
  text-align: right;
}

<form class='form-inline'>
  <div class="form-group">
    <label class='col-form-label formLabel'>Customer Name:</label>
    <input class='form-control formInput' name='customerName' />
  </div>
  <div class="form-group">
    <label class='formLabel'>Phone Number:</label>
    <input class='form-control formInput' name='phoneNumber' />
  </div>
  <div class="form-group">
    <label class='formLabel'>Email:</label>
    <input class='form-control formInput' name='emailAddress' />
  </div>
  <div class="form-group">
    <label class='col-form-label formLabel'>Customer Name:</label>
    <input class='form-control formInput' name='customerName' />
    <div class="form-group">
      <label class='formLabel'>Phone Number:</label>
      <input class='form-control formInput' name='phoneNumber' />
    </div>
    <div class="form-group">
      <label class='formLabel'>Email:</label>
      <input class='form-control formInput' name='emailAddress' />
    </div>
  </div>
  <!-- Modal footer -->
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button class='btn btn-success'>Save Changes</button>
  </div>
</form>

Bootstrap 4 Form formatting

2 Answers2