Twitter's Bootstrap - Form Inputs Too Thin

Question

I'm using Twitter's Bootstrap to create the HTML/CSS for my website. I run into a problem when creating the forms, however:

screenshot of error

As you can see the inputs are too skinny for the text. I have tested with my own code, as well as copy/pasting the exact code from their documentation:

http://twitter.github.com/bootstrap/base-css.html#forms

I am including two resources:

<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

As far as I can tell they are loading correctly. Am I missing a resource?

Have you inspected in Chrome Inspector or Firebug to see where the height is being overridden? — David John Smith, Feb 07 '12 at 02:45
it is getting a height from you local css, look form inputs in you local css and remove it. It is hard to guess just by a screenshot — AlexC, Feb 07 '12 at 02:52
I've tried tweaking a few things and I did fix it. I am not sure what I did wrong, but I did do something incorrectly - it's not default behaviour. (Also, I have no local CSS.) EDIT: I will come back and update once I figure out where I went wrong. — sdasdadas, Feb 07 '12 at 02:55

score 41 · Accepted Answer · answered Feb 07 '12 at 03:11

41

Damnit. I was missing

<!DOCTYPE html>

at the top of the document.

answered Feb 07 '12 at 03:11

sdasdadas

23,917
20
63
148

2

This also sometimes happens when you have a PHP error somewhere in your page; sometimes they appear before the doctype, meaning the browser doesn't acknowledge it. Although I'm sure the PHP error would be higher in a list of priorities ;P – Jarrod Mosen May 01 '12 at 21:54
2

Important detail : it's , not , this is not working in uppercase ! – Dominique Guardiola Jul 23 '12 at 16:59

score 6 · Answer 2 · answered Jan 20 '13 at 14:42

6

The <!DOCTYPE html> fix did not work for me. But what helped was finding and removing following in our codebase:

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

answered Jan 20 '13 at 14:42

stigi

6,661
3
40
50

2

Great! Had the same issue and this was the problem. – lbergnehr Jul 22 '13 at 11:32
1

i have the same problem. Anyone has an explanation for this? I don't want to change such fundamental stuff. – daniel Aug 26 '13 at 17:09

score 5 · Answer 3 · answered Jun 25 '12 at 21:11

I had this problem and drove me mad for hours as the cause was completely invisible. I already had the <!DOCTYPE html> there and all the code was perfect. The problem turned out to be the text file encoding.

Using the linux 'file' command showed the source file coded as: "PHP script, UTF-8 Unicode (with BOM) text".
Running 'more' on the file showed some garbage chars (ï»¿) at the start of the files. I created new files within linux and copied/pasted the code in and everything started working as expected.

score 2 · Answer 4 · answered Jun 25 '14 at 00:14

2

What fixed it for me was adding class="form-control" to the input.

answered Jun 25 '14 at 00:14

KST

164
2
13

Jhonnatas Alencar · Answer 5 · 2017-05-29T19:05:37.657

Ok, I had the same problem and after weeks searching for a solution, this guy solved my problem!

getting application.css to override bootstrap

1 - create the file assets/stylesheets/my_styles.css.scss

2 - put the code bellow in my_styles.css.scss file:

input[type=text], input[type=password], input[type=email], input[type=tel] {
height: 33px !important;}

3 - In assets/stylesheets/application.css, put this:

*= require my_styles

after bootstraps require... in my case it is:

*= require font-awesome
*= require bootstrap_sb_admin_base_v2
*= require_self
*= require my_styles
*= require_tree .
*/

Hope it helps someone in trouble!

Twitter's Bootstrap - Form Inputs Too Thin

5 Answers5

Linked