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?
<!-- 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