mercredi 8 juin 2022

Bootstrap Nested Column Checkbox Padding

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

Orange seems to be additional padding?

<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