Make Label Beside Input in Bootstrap 4

Joseph picture Joseph · Sep 21, 2017 · Viewed 7.6k times · Source

How can i make the label just beside the input form? I've tried anything possible but it doesn't work. Please check my code below.

  <div class="modal-body">
      <form class="form-horizontal">
        <div class="form-group">
          <label>Type</label>
          <input type="email" placeholder="Email Address" class="form-control">
        </div>
        <div class="form-group">       
          <label>First Name</label>
          <input type="password" placeholder="Password" class="form-control">
        </div>
      </form>
  </div>

css

div.form-group{
display: inline;}

Answer

DunDev picture DunDev · Sep 21, 2017

You can use form-inline for each form-group

<div class="modal-body">
  <form class="form-horizontal">
    <div class="form-group form-inline">
      <label>Type</label>
      <input type="email" placeholder="Email Address" class="form-control">
    </div>
    <div class="form-group form-inline">       
      <label>First Name</label>
      <input type="password" placeholder="Password" class="form-control">
    </div>
  </form>