?
Solved

using bootstrap grids to create columns

Posted on 2015-01-12
3
Medium Priority
?
269 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
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 a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

764 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