StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>Twitter Bootstrap 3</h2> <p>As shown in the answer by @abimelex, inputs and buttons can be aligned by using the <code>.input-group</code> classes (see <a href="http://getbootstrap.com/components/#input-groups-buttons" rel="noreferrer">http://getbootstrap.com/components/#input-groups-buttons</a>):</p> <h3>Group button on the left side</h3> <pre><code><div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> <input type="text" class="form-control"> </div> </code></pre> <h3>Group button on the right side</h3> <pre><code><div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> </code></pre> <p>This solution has been added to keep my answer up to date, but please stick your up-vote on <a href="https://stackoverflow.com/a/22592382/681807">the answer provided by @abimelex</a>.</p> <hr/> <h2>Twitter Bootstrap 2</h2> <p>Bootstrap offers an <code>.input-append</code> class, which works as a wrapper element and corrects this for you:</p> <pre><code><div class="input-append"> <input name="search" id="search"/> <button class="btn">button</button> </div> </code></pre> <p>As pointed out by @OleksiyKhilkevich in his answer, there is a second way to align <code>input</code> and <code>button</code> by using the <code>.form-horizontal</code> class:</p> <pre><code><div class="form-horizontal"> <input name="search" id="search"/> <button class="btn">button</button> </div> </code></pre> <h3>The Differences</h3> <p>The difference between these two classes is that <code>.input-append</code> will place the <code>button</code> up against the <code>input</code> element (so they look like they are attached), where <code>.form-horizontal</code> will place a space between them.</p> <p><b>-- Note --</b></p> <p><em>To allow the <code>input</code> and <code>button</code> elements to be next to each other without spacing, the <code>font-size</code> has been set to <code>0</code> in the <code>.input-append</code> class (this removes the white spacing between the <code>inline-block</code> elements). This may have an adverse effect on font-sizes in the <code>input</code> element if you want to override the defaults using <code>em</code> or <code>%</code> measurements.</em></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload