Solved

How to make multiple columns responsive with bootstrap

Posted on 2015-01-13
6
206 Views
Last Modified: 2015-02-03
In short I have the following code that produces the first attached image.  However when I shorten the screen, see 2nd image the labels and textboxes are not where I want them.   I need label,textbox, label, textbox not label, label, textbox, textbox.  How to I accomplish this with bootstrap.

thanks in advancepicture 1picture2
 <div class="row">
               <div class="col-md-4">
                   <asp:Label runat="server" AssociatedControlID="txtNameOnCard" CssClass="control-label">Name on Card</asp:Label>

               </div>
               <div class="col-md-8">
                  <%-- <asp:TextBox ID="txtNameOnCard" runat="server" CssClass="form-control"></asp:TextBox>--%>
                    <asp:Label runat="server" AssociatedControlID="txtExpMonth"  CssClass="control-label">Expiration Date</asp:Label>
               </div>
               <br />
           </div>
           <div class="row">
               <div class="col-md-4">
                  <%-- <asp:Label runat="server" AssociatedControlID="txtCardNo" CssClass="control-label">Card Number</asp:Label>--%>
                   <asp:TextBox ID="txtNameOnCard" runat="server" CssClass="form-control" Width="200px"></asp:TextBox>
               </div>
               <div class="col-md-8" id="ExpDate">
                  <%-- <asp:TextBox ID="txtCardNo" runat="server" CssClass="form-control"></asp:TextBox>--%>
                    <asp:TextBox ID="txtExpMonth" runat="server" CssClass="form-control" Width="75px"></asp:TextBox> <span>/</span>
                    <asp:textbox runat="server" id="txtExpYear" CssClass="form-control" Width="75px"></asp:textbox>
               </div>

               <br />
           </div>

Open in new window

0
Comment
Question by:mgmhicks
  • 3
  • 2
6 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40547042
You are more likely to get a response if you post a link to the page.  images and out of context code fragments don't tell us much about the context; and this obviously is a case of code not working based on the context it is in.

Cd&
0
 
LVL 6

Expert Comment

by:Mikkel Sandberg
ID: 40549253
I agree that a live link would be helpful. From the images alone, it looks like it's a problem with how you have your content arranged within the rows. However, without being able to dig around in the code and use the developer tools, it's going to be difficult to diagnose what the cause of the problem is.
0
 

Accepted Solution

by:
mgmhicks earned 0 total points
ID: 40552745
This has been solved.  It turned out to be the order I had the controls in.

thanks
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 6

Expert Comment

by:Mikkel Sandberg
ID: 40553860
That would do it.

Glad you got it working :)
0
 

Author Comment

by:mgmhicks
ID: 40560483
thanks anyway for the help.
0
 

Author Closing Comment

by:mgmhicks
ID: 40585852
It was the solution that fixed the problem.  You can delete it if you like.

thanks
0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question