2

So I just manually created some css overrides to make a navigation bar collapse at <940px instead of at <768px. But now I realize that I need the same behavior for all my components. For example I have a row with two columns. And they collapse at <768px, but I need them to collapse at 940px.

I could of course go through the source code again and make some new overrides, but I'm sure some day I would find another thing that is still collapsing at <768px.

So how can I simply change the bootstrap break point globally for all components?

I'm currently thinking about just running a text replace script on my bootstrap source files... but who know what could go wrong.

Forivin
  • 14,780
  • 27
  • 106
  • 199
  • http://getbootstrap.com/customize/ - here you can create your own Bootstrap CSS (different breakpoints, navbar collapse etc.). – max Jun 26 '16 at 15:49
  • Possible duplicate of [Change Collapse breakpoint in Bootstrap 3.0](http://stackoverflow.com/questions/20817956/change-collapse-breakpoint-in-bootstrap-3-0) – vanburen Jun 26 '16 at 15:59

2 Answers2

4

Customize your Media queries breakpoints.

This is more maintainable than doing it manually yourself, as it'll give you a config you can upload to bootstrap later, make more tweaks, and re-generate.

Anthony Astige
  • 1,919
  • 1
  • 13
  • 18
0

There is a nice blog post which should guide you in the correct direction.

https://www.psd2html.com/blog/customize-bootstrap-grid-with-sass.html

Hope this helps

Ozan Gunceler
  • 1,067
  • 11
  • 20