CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Rogue
Rogue

Reputation: 11483

Aligning search bar for mobile with bootstrap 3

In upgrading to bootstrap 3, a lot of the layout for a site I am working on had to be repaired. I've managed to fix a great majority of it, however a final element of the page seems to be out of my grasp.

An example of what I am having issue with can be viewed below:

http://1ro.co/shopfine/template.html

As far as desktop version goes, it works fine. However if you shrink the page horizontally (to simulate it being the "mobile" version), the button goes wrong in two ways:

  1. At tablet size (768px-979px), it no longer is in line with the other buttons. I'm assuming this is an obscure width issue, but I cannot seem to pinpoint it.
  2. At the mobile size (<786px) the search bar and its corresponding button do not match up. Rather the button hangs to the right.

An example of what the site looked like before the move to bootstrap 3 is also below:

http://1ro.co/shopfine/account.html

I cannot figure out the issue (width?) on the tablet version, and the mobile version can't seemed to be fixed by floating any of the objects within the search bar, so in short I need to figure out in what way I can fix those two things on bootstrap 3.

Upvotes: 0

Views: 1294

Answers (2)

luke2012
luke2012

Reputation: 1734

You can wrap your input-group class with a column size e.g.

<div class="col-sm-12">
  <div class="input-group">
    <input type="text" placeholder="Search..." id="appendedInputButton" class="form-control">
      <span class="input-group-btn">
        <button type="submit" class="btn btn-primary">
          <i class="icon-search"></i>
        </button>
      </span>
  </div>
</div>

Don't forget to add form-control class to your input tag.

Upvotes: 1

Bojana Šekeljić
Bojana Šekeljić

Reputation: 1056

  1. You have assigned the wrong class, it should be col-sm-2 not col-md-2 to the div#searchBar

  2. Lose the div.input-fields and add the .form-inline class to <form> tag, and .form-group to the form elements like so:

    <form method="get" action="page" class="siteSearch form-inline"> <input type="text" id="appendedInputButton" placeholder="Search..." class="form-group"> <span class="input-group-btn form-group"> <button class="btn btn-primary" type="submit"> <i class="icon-search"></i> </button> </span> </form>

PS sorry about the formatting, something's not righton my end

EDIT

From the bootstrap documentation:

Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.

So just follow the example code the documentation page, add necessary .form-control tags and assign widths to them.

Upvotes: 1

Related Questions