0

How can I vertically align my checkboxes with their label in bootstrap v4? I have the following example:

https://plnkr.co/edit/TmD0ffKrk32oy7etD8g0?p=preview

or 

<body style='font-size:200%'>
    <div class="form-group has-success"'>
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check this</span>
  </label>
</div>
<div class="form-group has-warning">
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check this</span>
  </label>
</div>
<div class="form-group has-danger">
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check this</span>
  </label>
</div>
  </body>

Where I'd like the checkboxes to be vertically centered with the label

Edit: Some have mentioned a possible duplicate but I'm looking for a bootstrap v4 solution. Bootstrap adds a lot of css such as flex layouts etc... Which make all the solutions I've read so far obsolete.

ncohen
  • 6,184
  • 19
  • 61
  • 112
  • Possible duplicate of [How to align checkboxes and their labels consistently cross-browsers](http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers) and [a host of others found by searching SO](http://stackoverflow.com/search?q=align+checkbox+with+label) – Rob Apr 09 '17 at 11:12
  • @Rob Thanks for pointing out existing questions but I'm looking for a specific bootstrap v4 solution...and couldn't find – ncohen Apr 09 '17 at 11:21

1 Answers1

1

Add a class name .container to your label and style as follows:

 .container {
      display: table;
      vertical-align: middle;
    }

    .custom-control-indicator {
      display: inline-block;
      vertical-align: middle;
      position: relative;
      top:0;
    }

See snippet below

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@4.0.0-alpha.6" data-semver="4.0.0-alpha.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <script data-require="bootstrap@4.0.0-alpha.6" data-semver="4.0.0-alpha.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
  <script data-require="tether@1.4.0" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="form-group has-success">
    <label class="custom-control custom-checkbox  container">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check this</span>
  </label>
  </div>
  <div class="form-group has-warning">
    <label class="custom-control custom-checkbox container">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check this</span>
  </label>
  </div>
  <div class="form-group has-danger">
    <label class="custom-control custom-checkbox container">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description">Check this</span>
  </label>
  </div>
  <style>
    .container {
      display: table;
      vertical-align: middle;
    }
    
    .container  .custom-control-indicator {
      display: inline-block;
      vertical-align: middle;
      position: relative;
      top:0;
    }
  </style>
</body>

</html>
repzero
  • 7,531
  • 2
  • 13
  • 35