Improve company productivity with a Business Account.Sign Up

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

using bootstrap grids to create columns

I have the following code.  I am trying to make 2 columns using bootstrap when I begin the section asking for bank account name and bank account number.  I'm not getting whey my tabs can go out, but the single line will not show label and textbox next to each other, I've tried a few settings so I am sure I am missing the boat somewhere.   There is a master page that loads the bootstrap js and css

Here is the code.
<%@ Page Title="Make a Payment" Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPages/Site.Master" CodeBehind="Payments.aspx.vb" Inherits="IdentityTest.Payments" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">


    <%-- <script src=”../scripts/jquery-1.11.2.js”></script>--%>
    <%--<script src="../Themes/jquery-ui-1.11.2.custom/jquery-ui.min.js"></script>
    <script src="../Scripts/jquery.watermark.js"></script>
    <script src="../Scripts/Supplement.js"></script>
    <script src="../Scripts/jquery.validate.js"></script>
    <link rel="stylesheet" href="../Themes/jquery-ui-1.11.2.custom/jquery-ui.theme.min.css">
	<link rel="stylesheet" href="../Themes/jquery-ui-1.11.2.custom/jquery-ui.css">
    <link rel="stylesheet" href="../Themes/jquery-ui-1.11.2.custom/jquery-ui.structure.css">

    <link rel="stylesheet" href="../Content/SiteSupplement.css" />--%>

 <style type="text/css">


#wrapper {
  padding-left: 250px;
  transition: all 0.4s ease 0s;
}

#sidebar-wrapper {
  margin-left: -250px;
  left: 250px;
  width: 250px;
  background: #000;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  z-index: 1000;
  transition: all 0.4s ease 0s;
}

#page-content-wrapper {
  width: 100%;
}

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width:767px) {

    #wrapper {
      padding-left: 0;
    }

    #sidebar-wrapper {
      left: 0;
    }

    #wrapper.active {
      position: relative;
      left: 250px;
    }

    #wrapper.active #sidebar-wrapper {
      left: 250px;
      width: 250px;
      transition: all 0.4s ease 0s;
    }

}

/*#radio1{margin-right: 5px;}
#radio2{margin-right:5px; margin-left:20px;}
#txtRouteNo {margin-right:20px;}
#txtName {width:200px;}
        #approved {width:200px;
        }
        #tabs-1,#tabs-2{margin-left:100px;

        }
        #txtCardNo,#txtCardHolder,#txtStreet,#txtCity{width:200px; margin-right:20px;}
        #txtMonth{width:50px;}
        #txtYear{width:75px;}
        #txtCVC{width:50px;}
        #txtApt{width:130px;}
        #txtState{width:50px;}
        #txtZip{width:65px; margin-left:8px;}*/
      

       
     </style>
   
       <script>
         $(function () {
             $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
             $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
             $("#txtRouteNo").watermark('Required Field');
             $('Input').watermark('Required Field');
         });
  </script>
 <style>
  .ui-tabs-vertical { width:70em; }
  .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 10em; }
  .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
  .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
  .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
  .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
  </style>

 
  <h2>Payments - Make a Payment</h2>

    <div class="row">
        <div class="col-md-12">
            <section id="Payments">
                <div class="form-horizontal">
                    <hr />
                    <h4>Collection Payments</h4>
                    <asp:PlaceHolder runat="server" ID="PlaceHolder1" >
                        <p class="text-danger">
                            <asp:Literal runat="server" ID="FailureText"  Text="test this"/>
                        </p>
                    </asp:PlaceHolder>

                    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
                        <li class="active"><a href="#tab1"
                            data-toggle="tab">Pay by Credit Card</a></li>
                        <li><a href="#tab2" data-toggle="tab">Pay by Online Check</a></li>
                        <li><a href="#tab3" data-toggle="tab">Profile</a></li>
                    </ul>
                    <div id="my-tab-content" class="tab-content">
            <div class="tab-pane  active" id="tab1">
                <div class="row header" style="margin-top: 20px">
                    <div >
                    <div class="input-group">
                        <div id="radio">
                         
                              <input type="radio" id="radio1" name="radio" checked="checked"><label for="radio1">Checking</label>
                              <input type="radio" id="radio2" name="radio"><label for="radio2">Savings</label>
                            
                         </div>
                        <div>
                            <div class="row">
                                <div class="col-mid-6">
                                    <asp:Label runat="server" AssociatedControlID="txtName" CssClass="control-label" Text="Bank Account Holder's Name"></asp:Label>
                                </div>
                            <div class="col-mid-6">
                                <asp:TextBox runat="server" ID="txtName" CssClass="form-control"></asp:TextBox>
                            </div>
                        </div>
                        <%--   <input type="text" class="form-control" value="C#.Net">--%>
                    </div>
                        <div class="container">
                        <div class="input-group">
                            <div class="row col-md-3">
                                
                                
                            </div>
                            <div class="row">
                                <div>
                                    <asp:Label runat="server" AssociatedControlID="txtAcctNo" CssClass="control-label" Text="Bank Account Number"></asp:Label>
                                </div>
                                <div>

                                    <asp:TextBox runat="server" ID="txtAcctNo" CssClass="form-control"></asp:TextBox>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                        </div>
                            </div>
                        <div class="col-md-12">
                            <button type="submit" class="btn btn-primary">
                                Submit</button>
                        </div>
                    </div>
                </div>
            </div>
                        <div class="tab-pane" id="tab2">
                            <div class="row header" style="margin-top: 20px">
                                <div class="col-md-9">
                                </div>
            


                                      



                </div>
                    </div>
                     </div>
                    </div>
    </section>

       
   </div>

  
  

    </div>
</asp:Content>

Open in new window


thanks in advance for the help
0
mgmhicks
Asked:
mgmhicks
  • 2
1 Solution
 
Walter PadrónCommented:
jQuery must be loaded before than Bootstrap
0
 
mgmhicksAuthor Commented:
here is the master page code
t<%@ Master Language="VB" AutoEventWireup="true" CodeBehind="Site.master.vb" Inherits="IdentityTest.SiteMaster" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<%@ Import Namespace="IdentityTest" %>
<%@ Import Namespace="Microsoft.AspNet.Identity" %>
<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - TAG Collection Payments</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
        <% Styles.Render("~/bundles/SiteSupplement")%>
    </asp:PlaceHolder>

    <webopt:bundlereference runat="server" path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="~/content/SiteSupplement.css" />
</head>
<body>
   
    <form runat="server"  >
         <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>
        <div id="logo">
               

        </div>
        <div class="navbar navbar-inverse navbar-fixed-top">
            
            <div class="container">
                <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/logo11.png" />
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                 
                  <%--  <a class="navbar-brand" runat="server" href="~/">Application name</a>--%>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a runat="server" href="~/">Home</a></li>
                        <li><a runat="server" href="~/About">About</a></li>
                        <li><a runat="server" href="~/Contact">Contact</a></li>
                    </ul>
                    <asp:LoginView runat="server" ViewStateMode="Disabled">
                        <AnonymousTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/FindResident">Register</a></li>
                                <li><a runat="server" href="~/Account/Login">Log in</a></li>
                            </ul>
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %>!</a></li>
                                <li>
                                    <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                                </li>
                            </ul>
                        </LoggedInTemplate>
                    </asp:LoginView>
                </div>
            </div>
        </div>
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> - MGM Enterprises, Inc.</p>
            </footer>
        </div>
    </form>
</body>
</html>

Open in new window

0
 
Walter PadrónCommented:
You need to load the Bootstrap stylesheet

Put this code in the head section of your Master page
    <link href="Content/bootstrap.css" rel="stylesheet" media="screen">

Open in new window


Open the F12 tools or Firebug and check that your css and js files are loaded.
0
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

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

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