Bootstrap number input is too thin but text input is alright

Question

I have this following piece of code.

           <fieldset>
                <div class="control-group form-group">
                    <label class="control-label" for="number-of-properties">Number Of Properties</label>
                    <div class="controls">
                        <input  id="number-of-properties" type="number" min=0>
                    </div>
                </div>      
            </fieldset>

The number input is too thin and only half of the number is visible. I want the full number to be visible.

doesnot work . I have tried lots of form-control and other classes. — Sourav Mukherjee, Nov 25 '15 at 10:44
Possible duplicate of [Twitter's Bootstrap - Form Inputs Too Thin](http://stackoverflow.com/questions/9170305/twitters-bootstrap-form-inputs-too-thin) — Abhash Upadhyaya, Nov 25 '15 at 10:51

score 1 · Accepted Answer · answered Nov 25 '15 at 11:48

Please find a JSfiddle using the code from question but with few minor tweaks. It works fine in the fiddle. If this is not the solution you are looking for then please create a fiddle or plunker and post it here to show us the error you get and your expected result. Hope it helps.

<fieldset>
<div class="form-group">
    <label class="control-label" for="number-of-properties">Number Of Properties</label>
    <input class="form-control" id="number-of-properties" type="number" min=0>
</div> </fieldset>

Abhash Upadhyaya · Answer 2 · 2015-11-25T10:45:43.090

0

Do you have <!DOCTYPE html> at the top of your page? Also add "form-control" class to input element.

edited Nov 25 '15 at 10:45

answered Nov 25 '15 at 10:44

Abhash Upadhyaya

717
14
34

@SouravMukherjee , then it must some other class that must be interfering with bootstrap class. Use a debugger to identify what all classes are changing the attributes. – Abhash Upadhyaya Nov 25 '15 at 10:48
I also have – Sourav Mukherjee Nov 25 '15 at 11:04

Bootstrap number input is too thin but text input is alright

2 Answers2