CODEWITHSUNDEEP
htmlcheckboxbootstrap-4vertical-alignment
atiyar
atiyar

Reputation: 8305

How to vertically align checkbox with other input controls in the form?

My checkbox is currently aligned like this -

enter image description here

I want to move it to the marked/pointed location below -

enter image description here

I'm using Bootstrap 4. Following is my HTML -

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row form-group">
  <label class="col-md-1 col-form-label" for="director">Director</label>
  <div class="col-md-8">
    <input class="form-control" type="text" id="director" name="director" placeholder="Director">
  </div>
</div>
<div class="row form-group form-check">
  <div class="col">
    <input class="form-check-input" type="checkbox" id="released" name="released">
    <label class="form-check-label" for="released">Released</label>
  </div>
</div>
<div class="row form-group">
  <label class="col-md-1 col-form-label" for="year">Year</label>
  <div class="col-md-8">
    <input class="form-control" type="text" id="year" name="year" placeholder="Year">
  </div>
</div>

Upvotes: 1

Views: 1334

Answers (1)

David Liang
David Liang

Reputation: 21476

As simple as

<div class="row form-group">
    <div class="col-md-11 offset-md-1">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="released" name="released">
            <label class="form-check-label" for="released">Released</label>
        </div>
    </div>
</div>


enter image description here

demo: https://jsfiddle.net/davidliang2008/L1krytub/4/

IMO, I kind of think col-md-1 is not wide enough for your labels though.

Upvotes: 2

Related Questions