How to align component horizentally using bootstrap?

Question

I used below bootstrap to a search page .

Actually i want this type of screen in resolution 1024*768.

Screen Resolution : 1360*768

But it not working below resolution.

Screen Resolution : 1024*768

Here is my code used bootstrap class:

<div class=" col-xs-12 col-md-12 col-lg-12">
                    <div class="box">
                        <div class="box-body">
                            <x:form class="form-vertical" role="form">
                                <div class="form-group col-lg-8">
                                    <textbox value="@bind(vm.searchValue)"
                                        sclass="form-control" onOK="@command('doSearch')"
                                        tooltiptext="${vm.getText('PeopleDetail:LABEL_SEARCH')}"
                                        placeholder="${vm.getText('PeopleDetail:LABEL_SEARCH')}">
                                    </textbox>
                                </div>

                                <div class="form-group col-lg-4">
                                    <x:button type="submit"
                                        class="btn btn-inverse" value="search"
                                        onClick="@command('doSearch')" accesskey="s"
                                        title="${vm.getText('PeopleDetail:BUTTON_SEARCH')}">
                                        ${vm.getText('PeopleDetail:BUTTON_SEARCH')}
                                    </x:button>
                                    <x:button type="submit"
                                        style="margin-left:20px;" class="btn btn-inverse"
                                        value="search" onClick="@command('clearQuery')"
                                        title="${vm.getText('PeopleDetail:BUTTON_CLEAR')}">
                                        ${vm.getText('PeopleDetail:BUTTON_CLEAR')}
                                    </x:button>
                                    <span>
                                        <x:a href="#" accesskey="q"
                                            onClick="@command('showQueryPage')" style="margin-left:20px;"
                                            title="${vm.getText('PeopleDetail:BUTTON_SEARCH')}">
                                            ${vm.getText('PeopleDetail:LABEL_ADVANCED_SEARCH')}
                                        </x:a>
                                    </span>
                                </div>
                            </x:form>
                        </div>
                    </div>
                </div>

Answer 1

At your current resolution, you'll need the "col-md-*" class for the styles to appear.

You can see Bootstrap Media Queries here: http://getbootstrap.com/css/#grid-media-queries

** Also, you can consolidate "col-xs-12 col-md-12 col-lg-12" to "col-xs-12" since bootstrap reads small to large. (Actually, you could probably do without since col-*-12 is default, but in the event you'll be changing down the road it might be useful for a less experienced dev.)

Below you can see the classes and sizes, copy/pasted from http://getbootstrap.com/css/#grid-media-queries for your viewing pleasure.

---

/* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

Answer 2

you can replace the col-lg classes to col-md classes. It will work fine. Below 1024 *768 you can add col-xs or col-sm classes to break it one after another.

Answer 3

Modify your code as

<div class="form-group col-md-8 col-lg-8">
<div class="form-group col-md-4 col-lg-4"> 

at the corresponding lines in form-group classes. Notice that I've added col-md-x for the form-group class