Question

I am trying to use twitter bootstrap for my new blog project, and I am trying to get the search box to work. To this end, I am using the following code:

<div class="row">
    <div class="span8 offset2">
        <form class="well form-search">
            <input type="text" class="input-xxlarge search-query">
            <button type="submit" class="btn btn-primary">Search</button>
        </form>
    </div>
</div>

However, what this does is layout the “search button” next to the search box which is not what I’d like. I’d want it looking similar the google landing page, with 2 buttons on the bottom of the box and aligned “centre” to the box. I tried many different options (like a separate div), but I am not able to achieve this.

Secondly, as in the google landing page, I’d want to offset rows, to align it(the box and the two buttons) in the center of the page if possible. Again, I am struggling to figure out how to offset rows (but I am able to offset columns).

I’d appreciate any guidance on this. Thanks for your time.

Answer 1

Twitter Bootstrap only applies styling to your HTML via their classes. You can style your content using your own CSS too. I haven’t tested the solution below, so don’t expect it to work right out the box (although, if it does, do let me know). I have commented extensively to give you an idea of what I’m trying to achieve with every step.

div > div:only-child > form:only-child > button[type="submit"] {
  /* clear any floating implemented by the Twitter Bootstrap framework; you may
     want to use the legacy clearfix method to make this work on all browsers */
  clear: both;

  /* redeclare the button as a block element */
  display: block;

  /* set a width (less than the width of its container; in this case, form).
     this would help with centering the button */
  width: 45%;

  /* center the button. You can use a button group if you have more buttons */
  margin: 0 auto;

  /* center the text in the button, assuming it's not already centered by twitter */
  text-align: center;
}

p.s: apologies for the ridiculous selector. You didn’t have explicit class names or id tags that weren’t Twitter’s.