I am newbie with bootstrap gridline system so I got stucked when I tried to create that (advanced?) gridview:
So my problem is that I do not know how to organize blocks in rows, because some blocks must have difeerent height, for example height of block 5. should have the same size as blocks 3. and 2. together.
Is that even possible? Also there should be some space between blocks, so background image should fill those space.
Please help me out.
What you'll want to do is place divs 2, 3, and 4 in their own container div (with the class .col-md-3) and 5 and 6 in another container div (with the class .col-md-3). Make div 1 have the .col-md-6 class.
Edit: You should use a media query to make it a fixed height in the desktop, then a flexible height when it's mobile.
#media screen and (max-width: 980px) { #div2 { height: 500px; (or whatever)}}
I think the most efficient way to do this is to simply use a single row with three columns. Your divs can stack inside the appropriate columns, and you can define the heights for each one. You can see it in action here: http://jsfiddle.net/StSmith/Z9SpM/1/
<div class="container">
<div class="row">
<div class="col-lg-6">
<div id="box1">1</div>
</div>
<div class="col-lg-3">
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
</div>
<div class="col-lg-3">
<div id="box5">5</div>
<div id="box6">6</div>
</div>
</div>
A simple way to do this is to declare the divs in the order you listed, and then apply a simple float: left. If you define the heights of each div manually it should all fit into place!
Rachel's got the right idea. You really just need to nest rows into a container, then use CSS to adjust the heights.
Related
I am trying to create my own blogger template. I want to have posts on three column. I tried to ad float on the post component but it create bugs.
My blog with float : https://words-deep-water.blogspot.fr/
The code is here : https://words-deep-water.blogspot.fr/2017/03/version1.html
Could you help me ?
Better try to use 3 column responsive blogger template. There are many free responsive templates available for blogger users. If you added extra style code then it may affect mobile users.
Didn't much understand from the link you posted.But if you are looking to divide a row into 3 equal columns to show the posts, you might want to have a look at this:
http://materializecss.com/grid.html.
<style>
.row {width : 100%}
.col s4 {width : 33.33%}
</style>
<div class="row">
<div class="col s4">This div takes 33.33% width of the outer div. POST 1</div>
<div class="col s4">This div takes 33.33% width of the outer div. POST 2</div>
<div class="col s4">This div takes 33.33% width of the outer div.POST 3</div>
</div>
Using something similar to above code,you might be able to achieve your functionality.
Explanation of the code: We have a div with class row which gives it width 100%. And all the inner divs inside it will take 33.33% width of the outer div giving us three divs of equal width.
I have a page with a bunch of equal size divs that I want to fit responsively in the available space of a wrapper div.
The idea is that:
- in a large screen the divs will show in 3 columns
- in a medium size screen the divs will show in 2 columns
- in a phone screen the divs will show in 1 column.
I'd also like the wrapper to center horizontally.
I was trying:
#wrapper {margin:0 auto;}
.column {float:left; max-width:340px; height:540px; margin:20px}
It works as intended except that the wrapper doesn't center, which I was trying to achieve with line 1 of css.
Any idea how I can achieve this?
EDIT:
The HTML code:
<div id="wrapper">
<div class="column one">
</div>
<div class="column two">
</div>
<div class="column three">
</div>
</div>
If your requirements allow you to do so, I would suggest using a UI Framework such as Twitter's Bootstrap. They have components that would achieve exactly what you are attempting to do (see their grid system documentation).
Example
EDIT: Included grid documentation link & Example
I need to make a multirow column for desktop, and for mobile the layout of the grid will be different. please see the images below.
Desktop Layout
Mobile Layout.
In mobile element B will be first. but for desktop A will be on the right side, spanning two rows. I tried doing this by rearranging the desktop layout using col-md-push-#/col-md-pull-#, but i cant make B and C in the same column/different row and make A span the two rows.
I know i can achieve the desktop layout using nested grids but i cant rearrange the elements using push-pull anymore.
Bootstrap 4—which has support for flexboxes—would be nice but here's one way you could possibly do it without nesting but you'd need to create some custom classes. Here's a demo.
<div class="row">
<div class="pull-sm-right col-sm-6">
<p>B</p>
</div>
<div class="pull-sm-left col-sm-6">
<p>A</p>
</div>
<div class="pull-sm-right col-sm-6">
<p>C</p>
</div>
</div>
And the custom classes you would need are the .pull-*-<location> classes as such:
#media (min-width: 768px) {
.pull-sm-right {
float: right !important;
}
.pull-sm-left {
float: left !important;
}
}
You would need to configure the heights of the divs manually but Bootstrap's float based grid system never really matched the heights of the columns.
So I've got a Bootstrap 3 form where I simply want to line up a bunch of spans in a neat row, degrading into a stack on mobile:
From [station1] to [station2] at [time]
From
[station1]
to
[station2]
at
[time]
Obviously I can do this, and it works:
<div class="row">
<div class="col-md-1">From</div>
<div class="col-md-3"><select>...</select></div>
<div class="col-md-1">To</div>
<div class="col-md-3"><select>...</select></div>
...
</div>
However, it looks rather silly if the screen is wide:
From [station1] to [station2] at [time]
If I queue up some spans without the col-X-Y classes, they don't play nice with Bootstrap. And if I try to mix together grid and non-grid spans or divs, they get ordered in weird and mysterious ways as shown in the last two rows of this JSFiddle. Help?
Bootstrap is not the solution to everything. You still have to write your own CSS at times. You can reduce your column widths for larger screens by using the appropriate classes, but that will not improve things much.
Instead, you are better off writing your own CSS. Style your elements to be inline-block, add some margin and padding. If you want to take it a step further you can write your own media queries to handle styles at reduced widths.
Look at line 260 in the variables file in Bootstrap.
#screen-xs: 480px;
#screen-xs-min: #screen-xs;
#screen-phone: #screen-xs-min;
You can use those variables to create viewport specific CSS.
#media (max-width: $screen-xs) {
// Change spans to block
span.my-field {
display: block;
margin-bottom: 10px;
}
}
If you are not using Sass or Less, you can hardcode the values of the variables. For example, 480px instead of $screen-xs.
You could wrap the columns in a smaller width col, such as col-sm-5 or col-sm-6..
<div class="row">
<div class="col-sm-4">
<div class="col-lg-2">From</div>
<div class="col-lg-2"><select><option>station</option></select></div>
<div class="col-lg-2">To</div>
<div class="col-lg-2"><select><option>station</option></select></div>
<div class="col-lg-2">at</div>
<div class="col-lg-2"><select><option>time</option></select></div>
</div>
</div>
Demo: http://www.bootply.com/116599
An alternate approach:
<span>From</span>
<br class="visible-xs visible-sm"/>
<span>...</span>
<br class="visible-xs visible-sm"/>
Looks nasty, but seems to work nice. I haven't found any issues yet.
When a page in my application is printed, I'd like to hide the side navigation and expand the width of the main content to be a full 12 columns (I'm using Bootstrap 3).
Here's the current html/css.
<div class="row">
<div class="col-md-3 side-navigation hidden-print">
...
</div>
<div class="col-md-9">
...
</div>
</div>
What's the Bootstrap idiomatic way to expand the second column's width when printed?
It's possible, with additional css rules:
Add class print-9 to your col-sm-9 class.
Then add this to your css:
#media print {
.print-9 { width: 100% }
}
Expanding upon Andrey's answer. To account for offsets, like col-offset-1, you need to set the margin-left to 0.
#media print {
.col-print-12 {width: 100%; margin-left:0px;}
}
There were at the moment of answering no helper classes in Bootstrap to do this.
When you want to accomplish such a thing, you can hide div's with css or
set the class of the second div with Javascript and change it from col-md-9 to col-md-12.
Or, see the answer with the 'print' class.