How to make a site on "crooked" layouts using Bootstrap?

Question

Layout

There are 3 layouts:
1. 320 - 810
2. 810 - 945
3. 945 - 1920
To be honest, I see this for the first time.
Everything is crooked in the layout, there is no grid, more precisely, there are just 28 columns, which, in my opinion, are made for the sake of appearance. The layers are not grouped at all, part of the footer is in the header folder, the underline is made with text, the content in the layout under #3 has a width of 1784px, but based on the name of the layout "945-1920" it is required that it look like this at a screen resolution of 945 and with a resolution of 1920. The
question is:
1. Is this generally normal?
2. If so, how is it to be typeset and with what?
The customer requires adaptive layout and pixelperfect.

Answer 1

The designer really made the grid there only because he saw it in other layouts and thought that it should be done everywhere, there is no logic in it. Anyway, it shows you the maximum width of the container: 1578px. That is, you set a new breakpoint in the bootstrap (+30px container padding):

@media (min-width: 1650px) {
  .container {
    width: 1608px;
  }
}

Next, throw the grid yourself into 12 even columns with 15px indents on each side (30px between columns in total) and operate on .col-lg-*. After 1650px (that is, for screens 1600, 1440, 1366, 1200) the standard bootstrap container 1170px will be picked up.
In principle, you can make up on the bootstrap, because even blocks are suitable for this there (cards of 25%, 50%, etc.).

Answer 2

The first step is to approach the designer and tell him what a good designer he is.
Well, if the layout does not imply a grid, then why use bootstrap? Do without it flexes, grids, etc.