Checkbox align with bootstrap

Question

I have a checkbox with class="form-control", I note that the checkbox is centered inside the form-control border, how to left align it:

My HTML code is:

 <input type="checkbox" class="form-control" style="margin: 0px 0px 0 !important;" id="txtPEPFlag" name="txtPEPFlag" value="Y">

It appears as (IE9):

But I need it to look like this:

score 1 · Accepted Answer · answered Jan 08 '18 at 13:39

1

 <input type="checkbox" class="form-control" style="margin-right:30px!important;;" id="txtPEPFlag" name="txtPEPFlag" value="Y">

answered Jan 08 '18 at 13:39

Ramesh Kumar

score 0 · Answer 2 · answered Jan 08 '18 at 13:23

0

Checkbox doesn't work well when you give it form-control class, check here: https://getbootstrap.com/docs/3.3/css/#forms
In the example they put it inside a checkbox class div:

<div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
</div>

answered Jan 08 '18 at 13:23

Amr Elgarhy

But I need it to be same height as Input (37px), so i need a big checkbox – Imad Abu Hayyah Jan 08 '18 at 13:27
@ImadAbuHayyah you can do that like this: https://stackoverflow.com/questions/13631537/create-css-to-enlarge-checkboxes https://stackoverflow.com/questions/22743457/size-of-checkbox-bootstrap – Amr Elgarhy Jan 08 '18 at 13:29
In that link, it not appear that it will resize on other browsers or tablets, I need it to be dynamic – Imad Abu Hayyah Jan 08 '18 at 13:31
may be try this: https://stackoverflow.com/questions/306924/checkbox-size-in-html-css – Amr Elgarhy Jan 08 '18 at 14:10

score 0 · Answer 3 · answered Jan 08 '18 at 15:06

0

try to use the grid columns from bootstrap

answered Jan 08 '18 at 15:06

3 Answers3