0

I am learning front-end web design and I am using bootstrap for responsive layout. But bootstrap only provides 5 fixed breakpoints. Is it possible to override the breakpoints according to my content requirements? For Example lg starts at 992px and xl starts at 1200px. Can I start lg at 860px instead?

Dawood Ahmad
  • 21
  • 4
  • Does this answer your question? [Bootstrap 4 Change Breakpoints](https://stackoverflow.com/questions/47747208/bootstrap-4-change-breakpoints) – Titulum Jul 30 '21 at 09:05
  • I am not sure. The answers focus on using SCSS only. I would like to ask if its possible without SCSS – Dawood Ahmad Jul 30 '21 at 09:09
  • Hmmm it seems that [on the Bootstrap website](https://getbootstrap.com/docs/5.0/layout/breakpoints/) they only tell you how to customize them using Sass. – Titulum Jul 30 '21 at 09:11

1 Answers1

0

Take a look at this page: https://bootstrap.build/app

Here you can easily edit a Bootstrap CSS to customize it however you want. There's a section called "Grid breakpoints", just add it there. But I must say that I have never tried it before and it might not work as expected. Best way to do it is editing the source and regenerating it, as on the Bootstrap page says. But you can try that page, it may work. Good luck!

Edit: I think that the generated CSS is based on BootStrap 4, because, by default, the longest breakpoint is "XL". But, as far as I saw, if you add the "xxl" breakpoint, it generates as expected. Just give it a try!

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Nakarukatoshi Uzumaki
  • 325
  • 4
  • 14