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.
Related
<div class="row">
<div class="col-lg-7">
<div>block1 with IDs and classes</div>
<div>block2 with IDs and classes</div>
</div>
<div class="col-lg-5">
<div>block3 with IDs and classes</div>
</div>
</div>
How to make it look like
block1
block3
block2
for mobile?
P.S. Of course I took a look at this questions before I asked mine:
SO: How do I change Bootstrap 3 column order on mobile layout?
It doesn't help.
Also, adding hidden-xs and visible-xs for two blocks of
<div>block2 with IDs and classes</div>
in different places doesn't help as IDs should be unique on the page.
Any suggestions? Thank you.
Example:
IMPORTANT: block 3 may be (and it is) taller (the height is bigger) than block1.
No need to use push/pull. Just think "mobile-first"..
<div class="row">
<div class="col-lg-7">
<div>block1</div>
</div>
<div class="col-lg-5">
<div>block3</div>
</div>
<div class="col-lg-7">
<div>block2</div>
</div>
</div>
http://www.codeply.com/go/jgvSJrMOnk
In the case where block 3 is taller than the other columns, create a special class to float it to the right on large screens..
#media (min-width:1200px) {
.pull-lg-right {
float:right;
}
}
Related:How do I change Bootstrap 3 div column order
Bootstrap with different order on mobile version (Bootstrap 4)
using push and pull properties of grid will do your work try this the push and pull will be only applied for small device
<div class="row">
<div class="col-lg-3">block1 with IDs and classes</div>
<div class="col-lg-3 col-sm-push-12">block2 with IDs and classes</div>
<div class="clearfix visible-lg-block"></div>
<div class="col-lg-6 col-sm-pull-12">block3 with IDs and classes</div>
</div>
Edit clearfix added for large device
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
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.
Inside row two individual div how can one right hand side dive fixed when scrolling page then fixed and when come footer area then up this fixed div.
This is my code example below:
I want col-md-4 class fixed when come footer content then up.
<div class="container">
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4">
</div>
</div>
</div>
Demo- http://jsfiddle.net/3RkM3/41/
Layout-
<div class="row">
<div class="col-xs-8 content">Content</div>
<div class="col-xs-3 col-xs-offset-1">
<div class="fixed col-xs-4">
Something
</div>
</div>
</div>
Am attaching an image i just want to stack my blog posts like this.
am using twitter bootstrap 3.0.
http://i.stack.imgur.com/X2W1t.jpg
I already used Masonry and Salvattore JS solutions but not working in my case.
Please guide me.
Thanks in advance.
Ady
Not sure what you mean by "but not working in my case". Bootrap grid is row oriented, so you can't really use it to make columns where items move from one column to another based on screen width.
But you can make 3 columns in Bootstrap grid:
Make a single row, with 3 4-cell columns, then in each column create as many rows as you want with 12-cell (full row).
eg:
<div class="row"> <!-- entire screen -->
<div class="col-md-4"> <!-- left column -->
<div class="row"><div class="col-md-12"> Item 1.1 </div></div>
<div class="row"><div class="col-md-12"> Item 1.2 </div></div>
<div class="row"><div class="col-md-12"> Item 1.3 </div></div>
</div>
<div class="col-md-4"> <!-- center column -->
<div class="row"><div class="col-md-12"> Item 2.1 </div></div>
<div class="row"><div class="col-md-12"> Item 2.2 </div></div>
</div>
<div class="col-md-4"> <!-- right column -->
<div class="row"><div class="col-md-12"> Item 3.1 </div></div>
<div class="row"><div class="col-md-12"> Item 3.2 </div></div>
<div class="row"><div class="col-md-12"> Item 3.3 </div></div>
<div class="row"><div class="col-md-12"> Item 3.4 </div></div>
</div>
</div>