I'm using Twitter's Bootstrap to create the HTML/CSS for my website. I run into a problem when creating the forms, however:
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?
Damnit. I was missing
<!DOCTYPE html>
at the top of the document.
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;
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With