简体   繁体   中英

Bootstrap 4 custom-checkbox same format as text input?

I have Bootrap 4 text input like this

<div class="col-2 form-group">
    <label for="follow">Följande</label>
    <input type="text" class="form-control" id="follow" name="Follow" placeholder="" value="" required>
    <div class="invalid-feedback">
        Vänligen fyll i Följande.
    </div>
</div>

And I want the checkbox label same vertical level as the text input and the check same vertical level and size as the text input. I have tried to swap the input and label code but nothing is working.

Checkbox code with custom checkbox.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check</label>
</div>

I have it like this

But want it like this

You should wrap your boxes properly within a container

<div class="container">
  <div class="row">
    <div class="col-sm-4 form-group">
      <label for="follow">Följande</label>
    <input type="text" class="form-control" id="follow" name="Follow" placeholder="" value="" required>
    <div class="invalid-feedback">
        Vänligen fyll i Följande.
    </div>
    </div>

    <div class="col-sm-4 form-group">
    <label for="follow">Check</label>
    <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1"></label>
    </div>
    </div>

     </div>
  </div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM