You can customize breakpoints $grid-breakpoints and $container-max-widths
@import "bootstrap/functions";
@import "bootstrap/variables";
$grid-breakpoints: (
xs: 0,
sm: 600px,
md: 800px,
lg: 1000px,
xl: 1900px
);
$container-max-widths: (
sm: 600px,
md: 800px,
lg: 1000px,
xl: 1840px
);
@import "bootstrap";
Check documentation here for more details: https://getbootstrap.com/docs/5.0/layout/breakpoints/
(I’m aware that isn’t a technical answer and may be considered off-topic, but it’s too long to post as a comment, and I believe it’s important.)
To be honest: This sounds like a nightmare.
Are you/your boss/your client aware of, or have been made aware of the problems this approach could lead to? For example, that it probably won’t be usable on mobile devices. Or that it could lead to accessibility issues (which may even have legal consequences!)
You also really need to nail down what “look the same” means. For one, different browsers, operating systems and user settings always lead to differences, which can’t be avoided. Also, what happens when something needs to change, but the layout doesn’t support it? For example, longer copy text or a new main menu item, that doesn’t fit.
It seems like every one maybe in over their heads. Alone the fact that PSD is not the right tool nowadays to design a web page (except maybe for the first drafts) seems to demonstrate that.
You may be caught between a rock and a hard place. If you build the site exactly like the design, but it then breaks due to its inflexibility, then the client may blame you, but if you make the site more flexible at the cost at some differences in the design, then the client may not accept it.
Your question seems to indicate that you may not be ready for the pitfalls of this task. It sounds like the design isn’t suitable to implemented with Bootstrap (or at least Bootstrap won’t make it easier than just doing it without). And if you knew enough about CSS to do it without Bootstrap, then you wouldn’t need to ask this question, because you’d know enough to modify Bootstrap yourself.
The best advice I can give is: Make sure all communications with the client are written down (and not only verbal agreements), and ask your boss/the client a lot of questions so that all details are clear (again in written form).
A very picky designer is building a PSD with ~1900px.
The client requires that when the website is open on desktop, it must look the same as PSD. This is the only thing that they care for or the client will not approve the website. PSD is not being built with a bootstrap grid.
1 – How can I begin to translate a 1900px PSD with Boostrap?
2 – I’m thinking of 1 approach: To build the website with a full width (.container-fluid) and add left and right spacing, so that the website will look the same across all desktop resolutions. I mean without limiting the page width.
Please any other advice is totally ok. I don’t want to loose my job.
Good idea, so i downloaded bootstrap source code from github & modified: scss_variables.scss The question is how do I compile it all?
Do you know how use and compile scss?
Thanks I made a research. So after I modified _variables.scss, I went into root folder and ran: “npm install” (to install dependencies listed in package.json), then “npm run, npm start”. Then bootstrap.css under “dist” folder was successfully rebuilt. But bootstrap.min.css didn’t get rebuilt. Please how to recompile bootstrap.min.css as well?
That depends on script in package.json It can say to make minification or not
Actually what I suggested was not to rebuild the bootstrap core but to rewrite it in your custom script.
You’re right especially about different browsers, operating systems and devices.