• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 421
  • 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

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.

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