Question

Here is my site’s body: (With twitter bootstrap 2.0)

<div class="container">
  <div class="row-fluid" style="text-align: center">
    <div class="span12">
      <div class="page-header">
        <h1>Header</h1>
      </div>
      <form class="well form-search">
        <input type="text" class="span7 input-large search-query" />
        <button type="submit" class="span3 btn btn-primary" >Search</button>
      </form>
    </div>
  </div>
</div>

I want the text and the submit button to be centered and be fluid 7:3, but when I set the span class to them they break to a new line, the text on the first line and the input submit on the other line.
What could/should I do in order to make them be on the same horizontal line?

Answer 1

Update version 2.1.0 has been released, so you should check the offset solution below, as it is provided by default in this version (and probably future ones)

---

It appears that bootstrap does not make input span float : github forms.less

So here is what you could use :

.form-span input[type="text"][class*="span"] { float: left; }

Edit

For fluidity, you need to use a .container-fluid because .container has a fixed size (which makes fixed the fluid grid inside).

For the centering, I see 2 solutions:

Using inline text centering : (definitely not the best choice)

.inline-center { text-align: center!important; }
.inline-center [class*="span"] { float: none!important; display: inline-block!important; }

Or you can use the fluid .offsetX classes, which will be available very soon in the version 2.1 or in this gist

<input type="text" class="offset1 span7 input-large search-query" />
<button type="submit" class="span3 btn btn-primary" >Search</button>

Demo (jsfiddle)