Bootstrap Form Not centered while in mobile view

Question

I'm trying to get my form to be centered while I view it on desktop and most importantly when I view it on a mobile phone, such as Ipad, or even a iPhone.

Here is my Form code

     <div class="col-md-10 col-md-offset-1">
                        <form class="form jumbotron-form">
                            <div class="container">
                                <h3 class="text-center">Find the Business Waiting For You!</h3>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <select class="form-control">
                                            <option value="">Industry</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <select class="form-control">
                                            <option value="">State</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="text-center">
                                        <button type="submit" class="btn btn-default">Search</button>
                                        <p><a class="search" href="#">Advanced Search</a></p>
                                    </div>
                                </div>
                            </div>
                        </form>

                    <div class="overlay-detail text-center">
                       <a href="#service"><i class="fa fa-angle-down"></i></a>
                     </div>     
                </div>

As you can see it is not centerd can someone help me on what im doing wrong. here is the link to my site that im working on www.kevineperjesi.com/found6test

Answer 1

I would recommend reformatting the code that you written to use containers, rows, and columns as they were desired. Every time you want something to be on a new line no matter what, you should put that in a row. If you want 2 items to be able to be inline, they should both be in the same row. Here is an example of how it can be done in a clean way.

  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h3 class="text-center">Find the Business Waiting For You!</h3>    
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 col-md-6">
        <div class="form-group">
            <select class="form-control">
                <option value="">Industry</option>
            </select>
        </div>
      </div>
      <div class="col-sm-12 col-md-6">
        <div class="form-group">
            <select class="form-control">
                <option value="">State</option>
            </select>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="form-group text-center col-xs-12">
        <button type="submit" class="btn btn-default">Search</button>
        <p><a class="search" href="#">Advanced Search</a></p>
      </div>
      <div class="text-center col-xs-12">
        <a href="#service"><i class="fa fa-angle-down"></i></a>
      </div>
    </div>
  </div>

You can greatly utilize the col-xs-* utilities.

If you use a col-xs-12 col-sm-12 that means that on both the xs and sm screen size, that column will span all 12 columns on the page.

You seemed to want the selects to be 2 across on a medium size and up, so you can put a col-sm-12 col-md-6 to make it so that sm and smaller, it will span all 12, and md and up it will only span half.

Bootstrap makes columns very very simple. The documents are well done give a lot of useful info for making great websites. Good luck!

http://getbootstrap.com/css/ include the docs for the grid system.