Bootstrap Search Form Layout

Question

I can't get Bootstrap to render a simple full width search input with the button right aligned. Here is my code:

<div class="row">
    <div class="col-md-12">
        <form class="form-inline">
            <input type="search" class="form-control" id="search" placeholder="I wish this would work...">
            <button type="button" class="btn btn-primary">Search</button>
        </form>
    </div>
</div>

All of this is wrapped in a container.

Possible duplicate of [Bootstrap full-width text-input within inline-form](http://stackoverflow.com/questions/22774780/bootstrap-full-width-text-input-within-inline-form) — Steven B., Aug 01 '16 at 20:48

score 0 · Answer 1 · answered Aug 01 '16 at 20:46

0

Add pull-right into your class string

class="btn btn-primary pull-right"

answered Aug 01 '16 at 20:46

Renato Matos

1
2

Sergej · Accepted Answer · 2016-08-02T12:56:21.160

You could try it like:

<div class="container">
  <form class="form-inline row">
    <div class="col-xs-8">
      <input type="search" class="form-control" id="search" placeholder="I wish this would work...">
    </div>
    <div class="col-xs-4">
      <button type="button" class="btn btn-primary btn-block">Search</button>
    </div>
  </form>
</div>

Here is a full example: https://jsfiddle.net/v8rm9nx4/3/

Bootstrap Search Form Layout

2 Answers2