Question

I am following along this Ruby on Rails tutorial and after following the steps to complete the html and css for the sign up form I’m getting the first image below. The input text fields are much smaller compared to the second image which is what the tutorial shows I should get. Can someone explain how this can happen?

Answer 1

I discovered out that Bootstrap generated the css for the input fields in the form input[type="something"]. This explains why using just input when specifying the css didn’t work because the more specific css rule generated by Bootstrap would override mine.

/* line 59, ../../../../.rvm/gems/ruby-1.9.3-p194/gems/bootstrap-sass-2.0.4.0/vendor/assets/stylesheets/bootstrap/_forms.scss */
select, textarea, input[type="text"], input[type="password"], input[type="datetime, [type="datetime-local"],
input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"],
input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    display: inline-block;
    height: 18px;
    padding: 4px;
    margin-bottom: 9px;
    font-size: 13px;
    line-height: 18px;
    color: #555555;
}