CODEWITHSUNDEEP
htmlcssbootstrap-4
harp1814
harp1814

Reputation: 1658

CSS Bootstrap: How to line up items?

I want to line up label and input tags.

<div class="form-group row">
   <label class="form-control-label" 
    for="field_hasSernum">Has Sernum</label>
   <input type="checkbox" class="form-control" name="hasSernum" id="field_hasSernum"/>
</div>

But the "input" is located under "label" tag

Upvotes: 0

Views: 319

Answers (2)

zmag
zmag

Reputation: 8261

You need to specify .col class to make horizontal form.

Ref: https://getbootstrap.com/docs/4.3/components/forms/#horizontal-form

Snippet:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="form-group row">
  <div class="col-3">
    <label class="form-control-label" for="field_hasSernum">Has Sernum</label>
  </div>
  <div class="col-9">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="hasSernum" id="field_hasSernum">
    </div>
  </div>
</div>

Upvotes: 1

Robert
Robert

Reputation: 6977

If you review Bootstrap's documentation on its form layout they recommend incorporating their grid system to align your label / input in a horizontal fashion:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="form-group form-row">
  <label class="form-control-label col-2" for="field_hasSernum">Has Sernum</label>
  <div class="col-10">
    <input type="checkbox" class="form-control" name="hasSernum" id="field_hasSernum"/>
  </div>
</div>

It's really that simple! You can take advantage of all of Bootstrap's grid system to better fine-tune the display on different device sizes, aligning things in different fashions, etc.

Upvotes: 3

Related Questions