Twitter’s Bootstrap – Form Inputs Too Thin

Twitter’s Bootstrap – Form Inputs Too Thin

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:
I am including two resources:

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


Solution 1:

Damnit. I was missing

<!DOCTYPE html> 

at the top of the document.

Solution 2:

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;

Solution 3:

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.

Related:  Bootstrap 4 supports LESS?

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.

Solution 4:

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

Solution 5:

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!


Related:  How to set up fixed width for ?