How to move columns with bootstrap

mgmhicks
mgmhicks used Ask the Experts™
on
I have the following code and I also sent a picture.  My issue is I cant seem to get these dropdowns closer to the labels.

Here is the code

 <asp:UpdatePanel runat="server" ID="pnlItems" >
                            <ContentTemplate>
                       <div class="row">
                            <div class="col-md-2 col-xs-12">
                                <asp:Label runat="server" Text="Select Service Type:" CssClass="control-label"></asp:Label>
                                
                            </div>
                           <div class="col-md-2  col-md-pull-2 col-xs-10 ">
                               <asp:DropDownList runat="server" ID="ddType" CssClass="form-control dropdown" AutoPostBack="True"></asp:DropDownList>
                           </div>
                          
                          

                            <div class="col-md-2  col-xs-12 ">
                                <asp:Label runat="server" Text="Select Service Item" CssClass="control-label"></asp:Label>
                                
                            </div>
                                  <div class="col-md-2 col-xs-10 ">
                                      <asp:DropDownList runat="server" ID="ddItem" CssClass=" form-control dropdown"  AutoPostBack="True"></asp:DropDownList>
                                  </div>  
                                           
                            <div class="col-md-2 col-xs-13">
                                <asp:Label runat="server" Text="Select Service Problem" CssClass="control-label"></asp:Label>
                               
                            </div>

                                <div class="col-md-2 col-xs-10 ">
                                     <asp:DropDownList runat="server" ID="ddProblem"  CssClass="dropdown form-control" ></asp:DropDownList>
                                </div>   [embed=file 930351]

Open in new window



You can see the spacing in the call priority but that is because they are both in the same column..  I need these in separate columns so each fills a row when seen on a phone.

thanks
Dropdown-Question.png
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Software Developer
Top Expert 2015
Commented:
One problem I can tell you have is a col is never larger than 12 - you have automatic overfill if a col is 13 whether xs or md.
Add a for="" to each label and the id of each of the controls they belong to may begin to solve the issue.
Instead of doing a pull on the select you could to an offset on the labels. Do a col-md-2-offset-1 or 2 and it will push the labels right.

Author

Commented:
That ended up working.  Thank you

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial