1

We use Bootstrap with default settings (i.e., 12 columns throughout using a fixed container, and 30px gutters between the columns). We also use default break points. I want to give my software designers grids that they can use for different sizes of device and since we are using Bootstrap's default breakpoints, then we have four sizes: >=1200px, >=992px, >=768px and <768px. For the smallest size, I'm basing designs on a 320px width (iPhone5).

Clearly, once we get down to 768px the Bootstrap defaults no longer works as design grids, but I'm not sure what to replace them with. The grid I choose needs to be a factor of 12, so that each column in the grid can be made up of multiple Bootstrap columns. I'm thinking of using a 4-column grid for the 768px, and 2 columns for the 320px, but would welcome any suggestions of best practices.

Improve this question
2
  • Bootstrap columns auto scale down... Have you tried using it yourself or looking at any demos?
    – Zach Saucier
    Jul 21, 2016 at 14:14
  • Yes I have. Can't show sadly because on Intranet, but I built a page to show me the widths of columns at different sizes. I know Bootstrap columns will scale down, the question is what multiples of columns should I use to make the grid (for example, at 768px both columns and gutters have same width and at 320px the Bootstrap gutters are bigger than the columns, which is obviously absurd)
    – Martin K
    Jul 21, 2016 at 14:17

2 Answers 2

Reset to default
2

There is no hard rule or "best number" for the number of columns used in a design for small screens like the 320px screen you mention.

Generally 1-2 columns are used for this width as it keeps things readable and clickable, but it depends fully on the design and content of each section as for what number of columns to use. It can even vary from section to section if needed, which is very common.

Improve this answer
0

There is no restriction though

Mostly 4 columns are used for a mobile responsive system.

It varies from device to device. For a better understanding, you may use this link.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.