I need to make a page which makes use of the 960 grid system which has a multi-row column. What I mean is I have three columns in a 16 column separated into 3-10-3 but on the last column, I need to make several divs for news feed, ads and also a "follow us on..." box which will all be aligned vertically. Refer to the picture for a visual pov.
Is there a way to this on 960gs? It seems like I can just pile divs of equal width in the column but I don't know. Help please
I've got it, turns out instead of using more divs with 'grid_x' classes within a grid column, you can just use normal divs with no classes and it will automatically align to the parent div.
Related
I'm working on a site that has on the homepage various blocks of information. I've been using Bootstrap for the grid, but when a column is taller than the previous one, it creates an entirely new row, leaving empty space in the columns, like so:
I know I can remove the space by nesting 2 and 4 in the same column div, but it would be far better for the project if the grid system would automatically nest the columns, like so:
Is there a grid system that can do this for me?
Update:
Thanks for the Bootstrap cards link, but what I'm looking for is something that specifically puts the first items up top, so that my users can put the most important blocks first, and have those at the top of the page.
How can I create columns like on attached image? I don't know how to set space between all columns. Please any hint.
You could add a margin to you columns. To have 4 columns, you'd start with a div with the class="row" then inside of that a div with the class=col-md-3 (or whichever size you want the 4 columns across), and give that div a margin-right of however many px's you want. Your final column (the 4th one in the row) probably should not have the margin-right if your design has the columns centered on the page. Bootstrap automatically gives columns 15px on either side. If you need to look up more information about how it works, the space between columns is called the "gutter" so you could search "gutter width" for example to find different ways of working with it.
I have created a Bootply to show the issue I am having: http://www.bootply.com/8fPmr31Wd7
Scroll down to look at "People" and "Places" and find they are indented along the sides.
Perhaps I am not using the right classes, or perhaps there is a bug with the grid, but if you use the grid commands within a form, it causes the elements that are within a grid to be just a hair off on each side and not line up properly with the rest of the form.
I know Bootstrap 4 is in testing, but I didn't know if this was a bug or something I am missing so I thought I'd ask. Thank you.
You have grid rows that don't contain any columns for all your other form rows, and you're using columns for the People and Places form element groups.
If you add a 12-unit wide column within your other rows, as per the top answer to Best practice for single column within row in bootstrap v3 grid system?, your horizontal spacing within your grid will be consistent.
I have in my layout a container that has 3 columns and should have many elements.
If all elements have the same height it looks very nice, but if one of them has a different height it will move the entire row instead of just one column.
This is how it looks:
This is how it should look:
How can I do that with bootstrap (v3)?
This is my html
To achive that, if you don't want to have a fixed height in elements, I think you should follow a column based strategy instead of row based one because your cols do not have an equal height, so when floating the break the flux you actually want.
But if you want it to exactly have it like in your design, I suggest using JavaScript.
I'm using Zurb Foundation 5 with a 10-column grid. Their pricing table is made from an unstyled ul, I'm using four of them side by side, separated by columns. The two leftmost columns should contain one set of labels for the pricing tables, vertically aligned.
I'm struggling with how to correctly position the descriptive texts on the left. Placing them in an ul as well works for some screen sizes but not for all, because it's unrelated to how the text on the right breaks into lines. (Notice how the price container has a different height)
I've also tried to use a table tag (it's tabular data, after all) but wasn't successful to align it with the Foundation grid widths. Any idea how I could achieve proper alignment of the leftmost text elements with the corresponding vertical positions? Any help is appreciated.