CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-4
Nate
Nate

Reputation: 7856

Vertical align checkbox/radio input with their label

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.

Upvotes: 0

Views: 2465

Answers (1)

repzero
repzero

Reputation: 8412

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="[email protected]" 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="[email protected]" 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="[email protected]" 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>

Upvotes: 1

Related Questions