CODEWITHSUNDEEP
javascripthtmlcheckboxbootstrap-4alignment
Bamiji O
Bamiji O

Reputation: 1

Checkbox design bootstrap

I'm trying to get a checkbox to look like this

correct box

what I've tried

                     <div class="col-2">
                            <label for="WitholdingTax">Charge</label>
                            <div class="input-group mb-3">
                                <input type="checkbox" class="form-control" style="height:50px" aria-label="Amount (to the nearest dollar)">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" style="height:50px">0</span>
                                </div>
                                <div class="input-group-append">
                                    <span class="input-group-text" style="height:50px">%</span>
                                </div>
                            </div>
                        </div>

And that looks like this Wrong box

Upvotes: 0

Views: 42

Answers (1)

Juljo Shahini
Juljo Shahini

Reputation: 21

I tried to go as close as possible, you can modify this further and merge it with your own code if it works for you.

<label for="WitholdingTax">Charge</label>
<div style="display: flex; align-items: center;">
  <div style="background-color: #D3D3D3; border-radius: 3px;">
    <input type="checkbox" style="float: left; margin-right: 10px;">
    <span style="float: left; margin-right: 60px; ">0</span>
    <span style="float: left; border-left: 1px solid gray;">%</span>
  </div>
</div>

Upvotes: 2

Related Questions