, We have a requirement wherein we need the 12 Column Grid on Desktop as it is but on Tablet it should follow an 8 column grid. We wanted to know if this is possible in Bootstrap. If Yes, how do we do it?
It will depends on your design as you know 12 columns cover full width now you need 8 columns of full width. So in this case you can use 'offset' properties to give column based space and implement your design. Another method is you can directly use source code of bootstrap in sass or less and call mixin directly as per your requirements.
Related
Does MDC have a grid system, something like Bootstrap's where you put columns inside rows with different widths depending on screen size.
If this is not yet supported (and/or not going to be) what's the official stand on the team on this thing, is MDL's grid the official supported to use?
Found it. Looks like it just hatched hours ago. Looks like it behaves like MDL grid.
https://github.com/material-components/material-components-web/tree/master/packages/mdc-layout-grid
Yes. Material design’s responsive UI is based on a column-variate grid layout. It has 12 columns on desktop, 8 columns on tablet and 4 columns on phone.
https://material-io.cn/develop/web/components/grid-lists/
So I have looked all over the web and thei site and can't quite figure it out.
I want to create a custom grid in Bootstrap. The container should be 5760px and have 36 columns with 20px gutters. I know this is ridiculously large. but what I am trying to do is essentially have 3 12 column grids (each 1920px wide) side by side.
I've tried the custom build for Bootstrap but I don't really understand the container / grid system I guess. Also I am using Sass as opposed to Less. So that presents another twist.
If I could just get the css and by pass all the Sass / Less stuff that would be great.
Ok so im going out on a limb here, but if you're working with bootstrap and you want to configure the basics so much.
What you can do is download a customized version of it.
Take a look here : Boostrap 3
Here you will be able to customize the amount of columns you wish to work with : Custom Grid Count
And you will also be able to select the container size. : Container Width
Along with all the features of bootstrap.. And all from bootstrap themselves.
Once you have all your fields filled in and edited to your spec, scroll to the bottom and 'compile' it!
As an answer goes its really the best i think I can offer!
hey guys i am trying to create a layout which has like 8 columns on left and like 3.5 columns on right.
Now the problem is that 3.5 columns is not supported in in foundation.
how can i achieve that?
Or can i do a custom margin and padding.If so, i guess the layout for mobile will break too.
thanks.
You can easily change pretty much all properties of the grid in SASS version. If you make total column count 24(instead of 12) then 3.5 will be integer number 7. BUT! Much easier option will be nesting grid inside the grid(gridception) so you can subdivide section of arbitrary width (standard 1 to 12 columns) in up to 12 parts.
You want to make a web-page with 11.5 columns.
One way is to customize foundation with 23 column grid structure and have 16 columns on left and 7 on right.Here is the link to customize foundation - LINK
remove the components you dont need and have that stylesheet included for that specific page.
I have a question on converting an existing (non-responsive) site to a semi-responsive one.
Facts:
We have a separate site for mobiles, so no issues here.
Our desktop site is 978px width, and this won't change for those screens of 978px and above.
Tablets however, starting from 768px to 977px - will need some customisations on the layout.
Therefore, our site needs to become "semi-responsive" to cater for the 768px breakpoint, 800px breakpoint etc. for common tablets.
Our site uses pixel widths almost everywhere. We're doing research to:
a) Convert our container to a grid-based version where we use 12 columns. This will still be our own coded approach rather than relying on a framework like Foundation or Bootstrap. However the concept will be to use similar percentages as Foundation (e.g. a large-6 on a 12 column grid would be width: 50%) and then we will customise the paddings etc. from there.
b) OR we use a 10 column grid, which makes more sense to use because the numbers are a lot simpler, e.g. large-1 has a width 10%, large-2 (two out of ten blocks) has a 20% width, and so on.
I'm wondering if there is any specific reason to go for a 12 or 10 column grid? We don't have a specific 12 or 10 column design as we are altering the existing website with some element of re-design for the headers/footers. I know that a 12 column grid is standard, and I've never heard of a 10 column grid, but I am curious if you would choose a) over b) above, or not? Is there any compelling reason for me to choose the 12 column grid if a 10 column makes more sense and has less hassle for margins/paddings and getting columns to fit within a 100% width exactly?
We are also considering http://www.responsivegridsystem.com/ which is a different simpler approach, but I think that this is quite different to the above so we'll experiment with this separately.
Any advice would be much appreciated.
Many thanks
Grid systems are normally based on a 12-column grid due to the fact that 12 is divisible by 2, 3, 4, and 6 evenly. If you used a 10-column grid system, you would be able to easily set up a 2 column layout, but three would be much more difficult. The 12-column system makes 2-column, 3-column, 4-column, and 6-column layouts very easy to figure out the math.
Since this is a more custom application, I would suggest not treating this as a responsive grid choice, but rather what responsive methodology will work best for your set of constraints.
I personally recommend Bootstrap's grid system as it is very easy to use and get started with quickly.
Is it possible to have a css newspaper-column layout arranged such a way that, any number of columns can be added and they will be continuously added to the right of the existing columns.
My thought is like this: I would just add a new div and a new column will be added to the right and so on.
If yes, how?
Here I found a 4-column newspaper layout. But column-heights are not same. I need a way so that, no matter how long the text is, they would be stipulated to a certain height.
Is it possible in CSS?
I think your needs are best served using an existing CSS framework, rather than coding it yourself from scratch, since it is really tricky business plus apallingly hard to get to work across all browsers (since some of them are not standards compliant)
Anyhow, for newspaper columns, I think there's one out there that fits the bill, 960 Grid System. It comes with 12 & 16 column "grids", with the gutters and paddings all worked out, and so long as the number of columns you intend to use is a factor of 12 or 16, it can handle it.
CSS3 provides a way of turning any HTML node's content into any number of columns. There are properties for controlling the number of columns as well as their width, relative height ("fill," or how the content is divided across the existing columns), gutter between columns, "rule" (dividing line or border), etc.
As a starting point, see the w3schools.com CSS3 Multiple Columns reference page.
However, as usual, IE alone among widely used browsers does not support the column- CSS3 properties.
One cross-browser solution is the Columnizer jQuery Plugin.
With pure CSS, it's very hard to assign several divs the same height unless that height is static. You can use ugly hacks but that will only get you so far.
For real columns, use tables, that's what they are for. Tables are valid HTML constructs, it's just that you shouldn't use them as your only layout tool. But when tables work, use tables.
you can set the height of the column using CSS, but adding a column automatically its a programming stuff using other web programming languages.