As stated on their site, Twitter Bootstrap is “Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.” In layman’s terms, it’s a helpful CSS framework that’s increasing in popularity right now because it helps non-designers (i.e., a number of developers) come up with a passably decent looking website.
But when I switched to using Twitter Bootstrap in my rails application, I noticed I couldn’t seem to control the width of my input fields
I would have a form tag helper like the following:
<%= text_field(:teacher, :city, :size => 35) %>And no matter what I changed the size parameter to, the size of the textfield element would not change.
Enter the Bootstrap input field classes
It turns out I should have been doing something like this:
<%= text_field(:teacher, :city, :class =>"input-large") %>Twitter Bootstrap gives you pre-defined classes to specify the width of your input fields. Each class option specifies the width in terms of pixels, so you may have to override using your own CSS if you need different widths or need other units of measurement (e.g., like em).
Here are the options you can specify in your Rails input helpers:
:class => "input-small"
:class => "input-medium"
:class => "input-large"
:class => "input-xlarge"
:class => "input-xxlarge"This was a point of frustration for me as I was coding AceMusicTeacher.com, so hopefully this little nugget helps someone else who is trying to roll their own Rails application on the Bootstrap framework.