twitter-bootstrap max width of input field

Question

I got a following set up using the lastest twitter bootstrap framework:

http://jsfiddle.net/hfexR/2/

I now want that the input field takes the maximum width when there is no button next to.

How can I do this with pure css or with twitter-bootstrap itself?

Something like inline-block should go, I just don't get it at the moment...

You shouldn't combine `.span4` and `.well`. Have you tried using a `.row-fluid` and spans inside the well ? — Sherbrow, Aug 25 '12 at 07:31
1. Whats wrong combining span and wells 2. could you give me an example — bodokaiser, Aug 25 '12 at 07:44

score 2 · Answer 1 · answered May 17 '13 at 20:22

2

You can use te class input-block-level like in this fiddle

<div class="container">
  <div class="span4 well">
    <form class="form-search">
      <input type="text" class="input-block-level search-query">
    </form>
    <form class="form-search">
      <input type="text" class="input-medium search-query">
      <button type="submit" class="btn">Cancel</button>
    </form>
  </div>
</div>

answered May 17 '13 at 20:22

nelsito

69
1
12

Yep, input-block-level does the trick and is properly responsive. http://stackoverflow.com/questions/11232627/perfect-100-width-of-parent-container-for-a-bootstrap-input – mcNux Jul 31 '13 at 15:12

Sherbrow · Accepted Answer · 2015-05-21T23:18:58.060

EDIT : since bootstrap v3, classes have evolved so use col-xx-X classes to obtain the result explained below (further changes may be necessary)

Live demo (jsfiddle)

You could use a .row-fluid and use .spanX to make the inputs fill their container :

<form class="form-search">
  <div class="row-fluid">
      <input type="text" class="input-medium search-query span12">
  </div>
</form>
<form class="form-search">
  <div class="row-fluid">
      <input type="text" class="input-medium search-query span8">
      <button type="submit" class="btn span4">Cancel</button>
  </div>
</form>

It appears that a little fix is needed for the button/input combination :

/* May not be the best way, not sure if BS has a better solution */
/* Fix for combining input and button spans in a row */
.row-fluid > input + button[class*="span"] {
    float: none;           /* Remove the */
    display: inline-block; /* floating   */
    margin-left: 0;        /* Stick it to the left */
}

Last thing, you shouldn't combine .spanX and .well because of the padding and borders and other things, here is an example of why (jsfiddle).

@krock indeed classes have changed but the spirit of the answer is the same, see col-xx-X classes and associates — Sherbrow, May 21 '15 at 23:19

twitter-bootstrap max width of input field

2 Answers2