How to choose grid and breakpoints for bootstrap 3 and 4?

Question

css

Good afternoon, I have a task to draw an adaptive version of the site design for Twitter Bootstrap 3 or possibly 4 versions. The difficulty is that, unlike my previous experience, the layout designers with whom you will need to interact did not work with the framework and you will need to consult them.
For example, I usually drew layouts for a standard grid according to the Bootstrap psd grid template

• Grid template 320px container 30px gutter 53-54px
  
• Grid template 480px container 30px gutter 80px col
  
• Grid template 750px container 30px gutter 62-63px
  
• Grid template 970px container 30px gutter 80-81px
  

Questions:

• How to explain why the columns of the grid that I have given above are of different widths?
  
• Does it make sense to draw at 970 px if the current design already laid out for the desktop is normally displayed at 1024 px?
  
• What will the layout at 480 px give when the layout is at 320 px and after layout it will be scaled to 480?
  
• In Bootstrap 4 default breakpoints in em (landscape phones - 34em. tablets - 48em) how to calculate psd layout width and grid in px?
  

Answer 1

1. Columns should not be of different widths, they are set in%. In fact, it simply indicates how many columns a block occupies (usually n out of 12), Block width 100% / 12 * n.
Accordingly, the layout designer does not need to measure your layout by pixels.
2. It very much depends on how well everything is laid out there.
3. IMHO useless breakpoint, in 95% of cases a waste of time. 320+, 768+ and 1024+ are enough.
4. Breakpoints in pixels returned.

Answer 2

Is there a size of 1024 in bootstrap 4? I know that there is a size 1170 after the size 970. I don’t know, maybe now there is a grid larger than 1170, although I’m not sure: the readability will be low.