[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 221
  • Last Modified:

How to make multiple columns responsive with bootstrap

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
mgmhicks
Asked:
mgmhicks
  • 3
  • 2
1 Solution
 
COBOLdinosaurCommented:
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
 
Mikkel SandbergFront End DeveloperCommented:
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
 
mgmhicksAuthor Commented:
This has been solved.  It turned out to be the order I had the controls in.

thanks
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Mikkel SandbergFront End DeveloperCommented:
That would do it.

Glad you got it working :)
0
 
mgmhicksAuthor Commented:
thanks anyway for the help.
0
 
mgmhicksAuthor Commented:
It was the solution that fixed the problem.  You can delete it if you like.

thanks
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now