Improve company productivity with a Business Account.Sign Up

x
?
Solved

How to make multiple columns responsive with bootstrap

Posted on 2015-01-13
6
Medium Priority
?
224 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 Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

How do you create a user-centered user experience on your website? And what are some things you should consider in the process?
AngularJS web development a very simple procedure. So, to put it, in short, AngularJS’ stand out features are – Two-way data binding, MVC structure, directives, templates, dependency injections and testing.
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.
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…

595 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