CODEWITHSUNDEEP
htmlcssbootstrap-4
komodoedit
komodoedit

Reputation: 719

How do you put spacing between form elements in Bootstrap 4?

How do you put spacing between form elements in Bootstrap 4? In the code below from the official example, the full name has space from '@' while the username does not have spacing. Does anybody know?

<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2 mb-sm-0">
  <div class="input-group-addon">@</div>
  <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2 mb-sm-0">
  <label class="form-check-label">
  <input class="form-check-input" type="checkbox"> Remember me
  </label>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Upvotes: 5

Views: 12626

Answers (2)

komodoedit
komodoedit

Reputation: 719

Best way is to use bootstrap's utility spacers themselves.

Upvotes: 0

emjr
emjr

Reputation: 232

How about using form-group and form-control div class .

please refer to this one. https://v4-alpha.getbootstrap.com/components/forms/

Upvotes: 2

Related Questions