title: How to align component horizentally using bootstrap?
body: <p>I used below bootstrap to a search page .</p>
  
  <p>Actually i want this type of screen in  resolution 1024*768.</p>
  
  <p>Screen Resolution : 1360*768</p>
  
  <p><img src="https://i.stack.imgur.com/m1cXT.png" alt="enter image description here">  </p>
  
  <p>But it not working below resolution.</p>
  
  <p>Screen Resolution : 1024*768</p>
  
  <p><img src="https://i.stack.imgur.com/SxGLc.png" alt="enter image description here"></p>
  
  <p>Here is my code used bootstrap class:</p>
  
  <pre><code>&lt;div class=" col-xs-12 col-md-12 col-lg-12"&gt;
                      &lt;div class="box"&gt;
                          &lt;div class="box-body"&gt;
                              &lt;x:form class="form-vertical" role="form"&gt;
                                  &lt;div class="form-group col-lg-8"&gt;
                                      &lt;textbox value="@bind(vm.searchValue)"
                                          sclass="form-control" onOK="@command('doSearch')"
                                          tooltiptext="${vm.getText('PeopleDetail:LABEL_SEARCH')}"
                                          placeholder="${vm.getText('PeopleDetail:LABEL_SEARCH')}"&gt;
                                      &lt;/textbox&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="form-group col-lg-4"&gt;
                                      &lt;x:button type="submit"
                                          class="btn btn-inverse" value="search"
                                          onClick="@command('doSearch')" accesskey="s"
                                          title="${vm.getText('PeopleDetail:BUTTON_SEARCH')}"&gt;
                                          ${vm.getText('PeopleDetail:BUTTON_SEARCH')}
                                      &lt;/x:button&gt;
                                      &lt;x:button type="submit"
                                          style="margin-left:20px;" class="btn btn-inverse"
                                          value="search" onClick="@command('clearQuery')"
                                          title="${vm.getText('PeopleDetail:BUTTON_CLEAR')}"&gt;
                                          ${vm.getText('PeopleDetail:BUTTON_CLEAR')}
                                      &lt;/x:button&gt;
                                      &lt;span&gt;
                                          &lt;x:a href="#" accesskey="q"
                                              onClick="@command('showQueryPage')" style="margin-left:20px;"
                                              title="${vm.getText('PeopleDetail:BUTTON_SEARCH')}"&gt;
                                              ${vm.getText('PeopleDetail:LABEL_ADVANCED_SEARCH')}
                                          &lt;/x:a&gt;
                                      &lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/x:form&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>