Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How to make multiple columns responsive with bootstrap

Posted on 2015-01-13
6
Medium Priority
?
218 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
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).
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

877 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