jeudi 9 juin 2022

Bootstrap Center Checkboxes

How can I get the check input to be vertically and horizontally centered within the parent column?

Image below shows the parent column and checkbox, I've tried text-centered, d-flex justify-content-center, align-self-center and none have worked. I think it has to do with the nested columns?

Checkbox not centered within parent column

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<div class="container-lg">
  <div class="row">
    <div class="col-2">
      <div class="row align-items-center h-100">
        <div class="col-4 d-flex border justify-content-center align-items-center h-100">
          <div class="form-check align-items-center d-flex justify-content-center align-items-center">  
            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked> <!-- CENTER THIS ITEM -->
          </div>
        </div>
        <div class="col-4 d-flex justify-content-center h-100 border">
          <div class="form-check d-flex justify-content-center align-items-center">
            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked> <!-- CENTER THIS ITEM -->
          </div>
        </div>
        <div class="col-4 h-100 border d-flex align-items-center justify-content-center">
          <div class="form-check d-flex justify-content-center align-items-center">
            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked> <!-- CENTER THIS ITEM -->
          </div>
        </div>
      </div>
    </div>
    <div class="col-10">
      <div class="row align-items-center h-100">
        <div class="col-2 h-100 border d-flex align-items-center justify-content-center">
          <span>Name</span>
        </div>
        <div class="col-8 h-100 border d-flex align-items-center">
          <span>Desc</span>
        </div>
        <div class="col-1 h-100 border d-flex align-items-center">
          <span>Total</span>
        </div>
        <div class="col-1 wg-right-bottom-border h-100">
          <div class="form-check d-flex justify-content-center">
            <input class="form-check-input align-self-center" type="checkbox" value="" id="flexCheckDefault">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Bonus points for it being vertically and horizontally centered while printing as well.




Aucun commentaire:

Enregistrer un commentaire