We Keep Coding

Using Twitter Bootstrap to Make Website and Contents Mobile Friendly

I am making a website (www.jocogolocal.com), and one of the objectives is to use Twitter bootstrapping to make all contents of the site fit the screen and eliminate as much white space as possible, but I feel like I am stuck because despite my efforts, it is not formatting the way I would like it, and sometimes it would even break the site with how bad / big the content / image banner gets. below is the code of both the master page and the page with the content, View Vendor, any help will be highly appreciated.
Master page
<asp:Table runat="server">
<asp:TableRow>
<asp:TableCell>
<div class="container">
<div class="row">
<div class="jumbotron">
<div class="container">
<asp:Image runat="server" ImageAlign="Middle" ImageUrl="~/Images/JoCoGoBanner.png" class="img-responsive col-lg-12 col-md-12 col-sm-12 "/>
</div>
</div>
</div>
</div>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<br />
View Vendor
<ItemTemplate>
<tr>
<td>
<div class="container">
<div class="row">
<div class="col-sm-3 col-xs-12">
<p><asp:Label runat="server" ID="lblName" Enabled="false" Font-Bold="true" Font-Size="X-Large" Text='<%# Bind("Name") %>'/></p>
</div>
</div>
</td>
</tr>

There is no full answer to this question other than to point you in the right direction to help yourself.
Tables should be used to display tabular data. They shouldn't be used for full site layout which is what you are essentially doing. One of the main selling points to bootstrap CSS is that it has already fleshed out flexible building blocks for you to use. I'm assuming this is a school project? Challenge yourself to build the layout without tabular structure using divs and the bootsrap classes (containers, rows, cols). With the current site it looks like you are missing the point of bootstrap all togather.
If you are attempting to eliminate white space, stop stacking containers inside of containers inside of containers. Each one of these elements has their own padding and margin values so every time you do this, you are fighting against yourself even more.
For Example, your first table is full of unnecessary elements that are fighting against what you are trying to do.
You:
<table>
<tbody><tr>
<td>
<div class="container">
<div class="row">
<div class="jumbotron">
<div class="container">
<img class="img-responsive col-lg-12 col-md-12 col-sm-12 col-xs-20" src="Images/JoCoGoBanner.png">
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody></table>
Clean div with flexible layout using bootstrap:
<div class="jumbotron p-0"><img class="img-responsive col-lg-12 p-0" src="Images/JoCoGoBanner.png"></div>
Break free from tabular layout thinking or you will always be fighting against yourself dealing with flexible layout requirements.

Why bootstrap doesn't recognize card?

I have added bootstrap to my application and when i wrote
<div class="container-fluid">
<div class="row" ng-repeat="user in users " style="border: 1px solid black"
ng-click="goToUserDetails(user.Id)">
<div class="col-md-4 text-center">{{user.Email}}</div>
<div class="col-md-4 text-center">{{user.Name}}</div>
<div class="col-md-4 text-center">{{user.Password}}</div>
<div class="col-md-4 text-center">
<span class="glyphicon glyphicon-trash" ng-click="delete(user.Id);$event.stopPropagation();">
</span>
</div>
</div>
<button class="btn btn-danger" ng-click="gotoAddUser()">Add</button>
</div>
It works , but when I want to add a card
<div class="card">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Button
</div>
</div>
It doesn't recognize the bootstrap "card" classes (the btn works )
Can someone help me pls?

There is no default Card design in Bootstrap 3.3.6 or lower version.
So now we have only two option for design card.
The standard way is Upgrade your Bootstrap version like move 3.3.6 or lower to Bootstrap 4. Bootstrap 4 Card
--- OR ---
Write your own stylesheet for card design if you want your card design same as well as Bootstrap common design then you can pick that CSS from Bootstrap 4 Card. In this case you can just pick those design which was you actually need for your Card no any other extra CSS so it will not effect your other sections or modules.

.active class not active on Bootstrap progress bar in Modal

I have a Modal on my View which contains a progress bar. The problem is, although I added the active class to the progress bar to animate, when I Inspect Element in Chrome, I can see that the .active class is not applied.
Here is my modal:
<div class="modal fade" id="pleaseWaitDialog" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Processing...</h4>
<p>This may take a while, depending on your connection.</p>
</div>
<div class="modal-body">
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar"
aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%">
Importing Patients
</div>
</div>
</div>
</div>
</div>
</div>
And here is a image of the modal when I Inspect Element.
Why is this happening?

Add your active class by yourself before the 'Show' model line as
$(".progress-bar").addClass('Active');
$("PleaseWaitDialog").model('show');
There is some piece of code that is removing this class.

Basically .active class you used is to animate the progress bar dynamically.
This may be occur if some of classes you used over write the .active class. You can test this problem by using this class in nested form or use it one by one.
Otherwise you can handle it by using java-script to handle it dynamically.
Try this :
<div class="progress progress-striped active">
<div class="progress-bar" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>

Iframe jquery event handlers not firing when redirected from parent frame

Our solution runs with a parent frame and a main content iframe. One of the pages in the main content iframe is set up with a series of divs used as tabs, example as follows.
<div id="topRow">
<div class="mainInformation tab tabSelected" runat="server" id="mainInformationTop">
<div class="tabLeft">
<div class="tabMain">
Main Information
</div>
</div>
</div>
<div class="executives tab" runat="server" id="executivesTop">
<div class="tabLeft">
<div class="tabMain">
Executives
</div>
</div>
</div>
</div
<div id="secondRow">
<div id="mainInformationTabGroup" runat="server" class="mainInformation tabGroup">
<div id="overview" runat="server" class="tab tabSelected overview">
<div class="tabLeft">
<div class="tabMain">
Overview
</div>
</div>
</div>
<div id="locations" runat="server" class="tab locations">
<div class="tabLeft">
<div class="tabMain">
Locations
</div>
</div>
</div>
</div>
<div id="executivesTabGroup" runat="server" class="executives tabGroup" style="display: none">
<div id="companyExecutives" runat="server" class="tab companyExecutives">
<div class="tabLeft">
<div class="tabMain">
Company Executives
</div>
</div>
</div>
<div id="affiliatedExecutives" runat="server" class="tab affiliatedExecutives">
<div class="tabLeft">
<div class="tabMain">
Affiliated Company Executives
</div>
</div>
</div>
</div
</div>
The jquery event handlers are loaded from a local .js file, example pertaining to the above HTML as follows
$('#topRow div.tab').click(function() {
$('#topRow div.tabSelected').removeClass('tabSelected');
$(this).addClass('tabSelected');
})
$('#topRow .mainInformation').click(function() {
$('#secondRow').css('display', 'block');
$('#thirdRow').css('display', 'none');
resizeAllIframes();
$('#secondRow .tabGroup').css('display', 'none');
$('#secondRow .mainInformation').css('display', 'block');
$('#secondRow .mainInformation div.tab').not('.locked').children().first().trigger('click');
});
$('#topRow .executives').click(function(){
$('#secondRow').css('display', 'block');
$('#thirdRow').css('display', 'none');
resizeAllIframes();
$('#secondRow .tabGroup').css('display', 'none');
$('#secondRow .executives').css('display', 'block');
$('#secondRow .executives div.tab').not('.locked').children().first().trigger('click');
});
(The click events just change the "src" attribute of the iframe)
The issue I'm experiencing is that sometimes when we load this tab page (and only in Internet Explorer 9+, IE7 seems to not have this issue), I'll click on a tab and nothing will happen. The hover events for the CSS are loaded just fine, but click on the tab does nothing. However, if I click one tab and nothing happens, I can click on the next and it will work fine. Similarly, if I click anywhere in the main content frame first and then on a tab, it will always fire the event handler.
We've noticed this problem happening almost entirely when we try to direct to the tabbed page from the parent frame (we have a quicksearch up there) and we use a Response.Redirect to load the iframe with the tab page. I've tried redirecting this quicksearch to a landing page inside the iframe that then uses a Response.Redirect to get us to the tab page, but it ends up with the same results. When we're clicking on a hyperlink from inside the iframe (Target="_self"), that works just fine.
This issue doesn't happen in Firefox, Chrome, or IE7, but it does in IE9+.
Does anybody have any thoughts, ideas, known bugs that I'm missing, anything like that?

this is how you bind an event to an element:
$(document).bind('click','#topRow div.tab',function() {
$('#topRow div.tabSelected').removeClass('tabSelected');
$(this).addClass('tabSelected');
});
do the exact same for the other events just change the selector part (I mean "#topRow div.tab") with the desired selectors.

Bootstrap modal not rendering inside ASP.NET main form

I am trying to pull values entered by a user from a C# code file using a Bootstrap modal, which is in an ASPX page.
I found that Bootstrap is not allowing two forms in one page (blocking values of another form), and as we all know, we have a master form in master page, so I can't use another form for the modal, and my modal is rendering outside of the main form.
I used this code to render my modal inside the parent form:
function showDialog(id) {
$('#paiddialog').on('show.bs.modal', function (e) {
$(this).parent().appendTo("form");
});
$('#' + id).modal("show");
}
This is the modal's HTML:
<div id="paiddialog" class="modal fade" role="dialog" style="display: none;" aria-hidden="true">
<asp:UpdatePanel ID="panels" runat="server">
<ContentTemplate>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Update payment Information
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-4 control-label" for="form-field-1">
Select Assignment ID
</label>
<div class="col-sm-6">
<asp:DropDownList ID="ddlassignmentid" runat="server" DataTextField="iassignmentidref" AppendDataBoundItems="true" DataValueField="iassignmentid" DataSourceID="sdassignmentid" CssClass="form-control">
<asp:ListItem Text="Select" Value=""></asp:ListItem>
</asp:DropDownList>
<asp:LinkButton ID="btnbindassigdetails" runat="server" OnClick="btnbindassigdetails_Click" CssClass="btn btn-info">Pull info</asp:LinkButton>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<asp:LinkButton ID="btnupdate" OnClick="btnupdate_Click" runat="server" CssClass="btn btn-success large">Request Payment </asp:LinkButton>
<button aria-hidden="true" data-dismiss="modal" class="btn btn-default">
Close
</button>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
The rendered HTML is some thing like this
<html>
<head></head>
<body>
<form id="mainform" action="page.aspx">
<div class="pagecontent"></div>
</form>
<div class="model fade"></div>
</html>
But still no luck.

There is an ugly hack to allow another form tag.
</form><form action="blah.aspx" id="blah">
This will get a trailing form in there for you to work with. Not recommended but a way around the 1 form tag limit of .Net

For any new readers, i managed to fix this by adding bellow script
$(this).parent().appendTo("form");