Solved

How to make multiple columns responsive with bootstrap

Posted on 2015-01-13
6
212 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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

Database Solutions Engineer FAQs

In this series, we will discuss common questions received as a database Solutions Engineer at Percona. In this role, we speak with a wide array of MySQL and MongoDB users responsible for both extremely large and complex environments to smaller single-server environments.

Question has a verified solution.

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

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
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

623 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