CODEWITHSUNDEEP
csshtmltwitter-bootstrapresponsive-design
Roger Johansson
Roger Johansson

Reputation: 23214

Bootstrap responsive input width on low res

Maybe this has been asked before or maybe it's even a question that shouldnt be asked. I'm using Twitter bootstrap and its responsive css. My input fields in my app are supposed to be quite small since Im only inputting numbers 0-999.

I've set class="span1" on the inputs which looks correct on highres viewports. However, when resizing the window or viewing on a mobile device, the width of the input fields are increased way beyond what is needed for this usecase.

Is there any way to force the input fields to remain small in width when the viewport resolution decreases?

Upvotes: 0

Views: 3595

Answers (2)

gustavohenke
gustavohenke

Reputation: 41440

Actually, that's how Bootstrap works. Everything which has one of the .spanX classes gets 100% width on resolutions < 768px.

If you want to force a small width, your quicker options are:

  • Manually set the width in that input (isn't responsive!);
  • Use .input-mini/.input-small (which aren't responsive also);

If you can spend some more time on this, create another grid for the input fields, which will respond differently when the media query matches devices with < 768px width.

Beware that Bootstrap 3 is about to launch. They will include an mobile-first grid which will allow you to do what you want gracefully.
The Bootstrap rival, Foundation, already includes this.

Upvotes: 2

Getz
Getz

Reputation: 4063

You can use the input-mini or input-small classes on the input:

http://twitter.github.io/bootstrap/base-css.html#forms (search for Relative sizing)

<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">

Upvotes: 1

Related Questions