I have two nested columns in one row, one set of columns height is greater than the other. It seems that bootstrap is adding some additional padding/margin to the checkboxes that I am unable to figure out (see image below). If I remove checkboxes for text, the layout is fine.
Is there a way to make the second nested columns have the same height (Right bordered item in picture)?
<div class="container mt-3">
<div class="row">
<div class="col-2">
<div class="row">
<div class="col-4 d-flex justify-content-center">
<span class="">1</span>
</div>
<div class="col-4 d-flex justify-content-center">
<span class="">2</span>
</div>
<div class="col-4 d-flex justify-content-center">
<span class="">3</span>
</div>
</div>
</div>
<div class="col-10">
<div class="row">
<div class="col-2 d-flex">
<span>Service List</span>
</div>
<div class="col-8 text-center">
<span>Description</span>
</div>
<div class="col-1 px-1 text-start">
<span >Amount</span>
</div>
<div class="col-1">
<span></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-2">
<div class="row align-items-center">
<div class="col-4 d-flex justify-content-center align-items-center ">
<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>
</div>
</div>
<div class="col-4 d-flex 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>
</div>
</div>
<div class="col-4 d-flex justify-content-center border">
<div class="form-check d-flex justify-content-center align-items-center">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked>
</div>
</div>
</div>
</div>
<div class="col-10">
<div class="row align-items-center">
<div class="col-2 border">
<span>Line Item Name</span>
</div>
<div class="col-8">
<span>Line Item Description</span>
</div>
<div class="col-1">
<span>Total</span>
</div>
<div class="col-1">
<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>
Aucun commentaire:
Enregistrer un commentaire