Solved

using bootstrap grids to create columns

Posted on 2015-01-12
3
188 Views
Last Modified: 2015-01-13
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
Comment
Question by:mgmhicks
  • 2
3 Comments
 
LVL 10

Expert Comment

by:Walter Padrón
ID: 40545082
jQuery must be loaded before than Bootstrap
0
 

Author Comment

by:mgmhicks
ID: 40545119
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
 
LVL 10

Accepted Solution

by:
Walter Padrón earned 500 total points
ID: 40545453
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Ajax control editor 4 35
Understanding Trigger in Jquery 10 28
Bootstrap 3 icons 3 12
Printing a Google Form 2 9
A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

762 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now