I've been pondering this ever since I started using Bootstrap 3 - which is a fantastic framework by the way. What I'm describing may be completely the wrong way to go about this or it may be a very common issue and I'm interested to see how other developers & designers handle this.
The image below contains a simple row (white box) in a container. The row has a col span of 10 with an offset of 1 and the blue box is then inside a nested row of the white box. When the designer does this they will simply be keeping everything matching up to the nice full width container grid (because they won't understand or need to know how nested rows work).
However, the reality in Bootstrap 3 is the 12 grid starts again inside the nested row. The result of this means I can no longer line up the blue box nicely as it doesn't fit the nested grid.
So my question is: how do others handle this? Am I actually using nested rows in a way I shouldn't be or is this something that the designer needs to be educated on? Or is there something much easier that I'm now aware of :)
Thoughts?
After doing some more investigation I have just realised that I don't think this is an issue at all. What my example above is ignoring is that the gutter remains the same width in nested rows as in the outer rows. When I did in above images (and with how I always thought about it) I simply resized the grid in Photoshop which also resized the gutters - which is incorrect.
I've tried now using this cool tool http://gridpak.com/, created the grid to the same width as my nested row and, lo and behold, it lined up perfectly.
The columns in the nested rows will be different still but the result will match up with the original design. In the example above, the blue box will actually be a col span of 8 with an offset of 2. The designer will look at the site and "think" it is actually a col span of 6 but we will all know better.
Thanks for the ideas and suggestions everyone - especially to royalsflush for the neat jQuery tool he developed as that might still come in handy.
Indeed, the 12 grid system may cause difficulties in some cases when you have fixed directives from your designer, but there are all kind of tricks that you can do in order to succeed.
So if you want to align the blue block to be on center and a width of 6 cols, you can just use col-lg-offset-3 col-lg-6 classes and don't use it inside that white block, or if you use it inside that white block you can set this classes col-lg-offset-2 col-lg-8 and change the left and the right padding from 15px to 45pxlike you can see in this example (code here).
As you can see, everything is possible in bootstrap, you just have to change the left and right padding and you can create any type of layout you need.
I guess, it's because you did this whole thing in a <div class="container"> so the grid went according to this block. Just remove the <div class="container"> and the inner blocks will snap to the 'main' grid. Play a little with classes and offsets and it will look like in the first picture.
I found a couple of variations of your question, mainly because I had the same problem a while ago - maybe one of the answers to those can help you out:
Bootstrap 3 nested grid not reset to 12
Prevent bootstrap 3 from resetting nested grids / use master grid
Related
i have a Commercial Website Called Akaratak
In the Search Page in Mobile mode (after resizing the browser to the minimum)
there is a space left empty between some divs
as follows:
i know it must be a simple question but i couldn't get it to get aligned
As i can see you are using Bootstrap, but not in a proper way. You should change your layout to a 4 or 6 column one so the grid will auto adjust to a 2x2 layout as you want it.
Another thing that you can do is to make your layour like:
2x2
-1-
2x2
Using bootstrap classes you just need to add one class to the third object of each row making it sm-12 and the others sm-6. I suggest you to read more carefully Bootstrap grid system to use it the right way.
Instead you can use Bootstrap 4 grid system witch allow you to move and workaround your problem in a nice way.
You should remove the <div class="clearfix"></div> child on every <div class="deal-top-top"></div> parent :)
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.
I'm currently developing a Wordpress blog theme - it must be fully responsive. I wanted to display a 2 column layout on bigger screens, having independent columns.
I thought of something like this
the mobile page is no problem - but on the 2 column layout I had problems like this (bottom image)
I tried it with the :nth-child() selector + floats, but it didn't work.The posts should be listed by date! would be really grateful if somebody could tell me a way solving this problem! thanks in advance.
edit:
NOT using bootstrap or any other grid system!
I am assuming you have multiple elements that are just floated, but that wont work if the elements are of different heights. You will need to create two separate columns for those elements.
I'm working on my blog which when viewed in > 1020px wide will look like this, using three columns which will load posts in left to right (i.e. place post 1 in the left column, post 2 in the middle, three in the right, then start from the left column again):
This works great, however when the browser reduces down below 1020 the layout will convert to a single column. This is visually easy to achieve by placing the columns underneath each other (looks fine), but this causes the posts to be out of order - the first three posts if there were 9 posts total would actually be post 1, 4 and 7.
I want to maintain the cleanliness of pure CSS managed layout, so I'm wondering if there's a trick to having the above three column layout with floated elements in a single container (rather than three columns).
I've played around a little bit with just floating left and clearing after every three tiles, but that of course just ends up placing every three tiles in a 'row' underneath the tallest tile in the 'row' above.
I know you said you wanted pure CSS but the jQuery library Masonry is specifcally designed for this kind of stuff.
http://masonry.desandro.com/
Otherwise I have not found a good way of achieving this with pure cross browser compatible CSS.
Maybe this has already been answered and I am searching incorrectly, but here is my problem. I have an MVC project where the view needs to look like a table. So, I am using a div with spans inside of it. My problem is that I need the data inside to be vertically centered. When I set my display to inline-block I cannot vertically align because some of the data may wrap and become two lines. So, this throws out using line-height. Then I tried to make my span display values to be table-cell. This works and I can use vertical-align:middle, however then I am unable to set a fixed width. And, I need this to look like a table, so the fixed width is required or else it looks horrible.
Here are my attempts thus far, and I know the css needs cleaned up, but I would rather fix this first atm.
http://jsfiddle.net/Scorpionb/ukMfX/ (The scrollbars cause the entire row to misalign)
http://jsfiddle.net/Scorpionb/QzFc3/(white-space:normal; and removed overflow to get rid of the scrollbars)
http://jsfiddle.net/Scorpionb/H6ATy/ (trying to treat it as a table)
Hopefully this makes sense, but I have run around so many circles now that I am losing track of what works and what does not. So, ask if you have any questions.
Also, this is an ASP MVC project, so I am tying each row of data to a form to be submitted and bound to a model
You should really be using tables for tabular content.
You might also benefit cleaning up your CSS by using shorthand CSS. Some useful ones to get you started:
font
border-width