We Keep Coding

Bootstrap : How do i create responsive div columns in the small screens with or without media queries?

On a small screen, div1 and div2 are showing side by side overlapped, and I want div1 content shows first and div2 content to be shown just underneath div1. How do I achieve these requirements with or without media queries?
<div class="row">
<div class="col-xs-6" id="div1">
test column1
</div>
<div class="col-xs-6" id="div2">
test column 2
</div>
</div>

Update your elements' classes to this:
<div class="row">
<div class="col-xs-12 col-sm-6" id="div1">
test column1
</div>
<div class="col-xs-12 col-sm-6" id="div2">
test column 2
</div>
</div>
This way, at viewports >= 768px, they'll be side-by-side and at 767px & below they'll display one below the other.
As mentioned in a comment on the OP, please refer to the documentation, which covers this in greater detail: http://getbootstrap.com/css/#grid

Create dynamic pagination for div block in jquery

I have created a table using div instead of using table structure.Now I want to add pagination feature for this table which is created using div's.
I wanted to know whether there is any plugin available which works with div.
Here is sample code
<div class="list">
<div class="item">
<div class="item-swipe">
<div class="col-xs-5 col-xs-offset-1 col-lg-6 col-md-6 col-lg-offset-0 col-md-offset-0">
<div class="wrap">
<span class="row1 date-content date whitespace">Col1</span>
</div>
</div>
<div class="col-xs-4 col-xs-offset-2 col-lg-5 col-md-5 col-lg-offset-0 col-md-offset-0">
<div class="wrap">
<span class="row1 date-content date">Col2</span>
</div>
</div>
<div class="col-xs-3 col-lg-1 col-md-1 col-lg-offset-0 col-md-offset-0 hidden-xs hidden-xs hidden-sm hidden-md">
<div class="wrap">
<a class="id">Col3</a>
</div>
</div>
</div>
</div>
</div>
I have this sample code repeated.I have created table using the above structure.How can I now add pagination to this,Or how can I convert this into table so as to use pagination.

You can explore JQuery Datatables. client-side or server-side pagination possible. Including infinite scroll.

You can use JSONPagination Plugin, which doesn't depend on the DOM, since its done in the JSON level so you can create any kind of table using div or table tag, only few steps needs to be remembered which is explained in the plugin itself.
Disclaimer: I am the author of this plugin.

Angular ng-if and changing Twitter Bootstrap col-sm

OK, here is the code:
left block
right block
It shows left block on the left part of screen and right block on the right of screen, if a screen is small or wider. And it shows right block under the left block for screens that are smaller than small (as two simple dives). That's clear.
I would like to use ng-if="boolValue" for the right block so that when it is hidden, then the left block is in the middle of the screen, not on the left.
What's the best way to do it?
<div class="row">
<div class="col-sm-6">
left block in the center
</div>
<div class="col-sm-6" ng-if="boolValue">
when right block is hidden because of falsy boolValue
</div>
</div>
What's the technique to make it done? The best thing that comes to my mind is to use ng-if something like this:
<div class="row">
<div class="col-sm-12" ng-if="!boolValue">
left block in the center
</div>
<div class="col-sm-6" ng-if="boolValue">
left block in the center <the same content as above>
</div>
<div class="col-sm-6" ng-if="boolValue">
when right block is hidden because of falsy boolValue
</div>
</div>
but I don't think that's the proper and the best way.

<div class="row">
<div ng-class="{'col-sm-12': !boolValue, 'col-sm-6': boolValue}" ng-if="!boolValue">
left block in the center
</div>
<div class="col-sm-6" ng-if="boolValue">
when right block is hidden because of falsy boolValue
</div>
</div>

<div class="row">
<div ng-class="{'col-sm-6':boolValue,'col-sm-12':!boolValue}">
</div>
<div class="col-sm-6" ng-if="boolValue">
</div>
</div>

how to use div to layout page

I am using div to layout a page. The page has two columns. The first column is a map. The second column contains three rows of graphs. I used the code below. The result gives me just one column (instead of two) with four rows. What am I doing wrong?
<!-- This is where the map will live -->
<div id="map-container" style="width:1000px; height:500px"></div>
<!-- CHARTS!!! -->
<div class="row">
<!-- row chart -->
<div class="col-md-1">
<div id="rowchart2" class="dc-chart"></div>
<center><div class="title">Severity</div></center>
</div>
<!-- Histogram-->
<div class="col-md-2 col-md-offset-1">
<div id="rowchart" class="dc-chart"></div>
<center><div class="title">Histogram(Delta Speed)</div></center>
</div>
<!-- row chart -->
<div class="col-md-4 col-md-offset-0">
<div id="rowchart3" class="dc-chart"></div>
<center><div class="title">Direction</div></center>
</div>
</div>

<div class="row">
<div class="col-md-12">
<div class="col-md-6">
Column 1:
<div id="map-container" class="col-md-12" style="width:100%; height:500px"></div>
</div>
<div class="col-md-6">
OTHER DATA HERE
</div>
</div>
</div>

Assuming you're using Bootstrap here, you need to layout your two columns within a single row so that they will sit side by side. For example, if you want to have two columns that are equal widths, you could use:
<div class="row">
<div class="col-md-6">
<!-- Map Here -->
</div>
<div class=col-md-6">
<div>Chart 1</div>
<div>Chart 2</div>
<div>Chart 3</div>
</div>
</div>
There are always 12 columns in a row, so using "col-md-6" for each column results in two equally sized columns.
Within the second column, you could nest more rows and columns to give you more control:
<div class="row">
<div class="col-md-6">
<!-- Map Here -->
</div>
<div class=col-md-6">
<div class="row">
<div class="col-md-12">Big Chart 1</div>
</div>
<div class="row">
<div class="col-md-6">Small Chart 2</div>
<div class="col-md-6">Small Chart 3</div>
</div>
</div>
</div>
For an example layout, here's a JSFiddle: http://jsfiddle.net/q3vdex96/2/
In your example, you're setting the map to have a width of 1000px. You shouldn't set an explicit width in this way - let Bootstrap handle the sizing using its grid system. Bootstrap's responsive CSS means your charts and map will collapse into a single column on a small screen, and will automatically expand into the correct layout as the screen size increases.

You aren't showing your CSS so part of what I say is just a wild guess.
First, the center element is obsolete. Don't use that.
Second, div elements are block level and will extend the entire width of the page by default. This is why you only get one column but, as I said, without a link or a jsfiddle with the complete markup, it's all a guess.

Targeting section classes with jQuery

I'm using a one page scrolling plugin (http://www.thepetedesign.com/demos/onepage_scroll_demo.html) to be more precise.
I've noticed that many one page scrolling tutorials & plugins use sections. I'm having some issues targeting the sections. What I'm trying to do is add simple navigation to the plugin so that users know what page they are on.
I thought the code would be rather simple just using
if ($(".page1").hasClass("active")) {
console.log("page one active");
}
But this doesn't seem to work. Is there something I'm missing regarding targeting sections with jQuery? All I need to figure out is how to correctly target the section then I can add classes to my navigation tab.
EDIT
<div class="main">
<section class="page1" id="pageone">
<div class="content col-xs-offset-2 col-xs-10 col-sm-offset-2 col-sm-10 col-lg-offset-2 col-lg-10">
<div class="content-inner">
<h1>FIRST<br>PAGE<br></h1>
</div>
</div>
</section>
<section class="page2">
<div class="content col-xs-offset-2 col-xs-10 col-sm-offset-2 col-sm-10 col-lg-offset-2 col-lg-10">
<div class="content-inner">
<h1>SECOND <br> PAGE <br> YO!</h1>
</div>
</div>
</section>
</div>