CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrapbrowser
jduyan
jduyan

Reputation: 133

How to change bootstrap breakpoint sizes when using bootstrap CDN

I have a ruby on rails application.

I am using bootstrap CDN in my application.html.erb file.

I want to change the screen size breakpoints for xs, s, m, lg.

Is there a way to override this in application.css?

Or, is there a better way to go about this?

Upvotes: 0

Views: 696

Answers (1)

D-side
D-side

Reputation: 9485

Breakpoint sizes affect parameters of @media blocks in the compiled CSS, that contain properties for specific screen sized. Once defined, they'll always be active. The only option you have with this CSS in place is overriding what it defines. That would effectively mean you will not be using a good chunk of CSS you serve to all your clients. Not exactly good.

The simplest way to achieve what you want is to recompile Bootstrap with your own configuration values. The easiest way to do this with Rails is through official Sass port of Bootstrap: bootstrap-sass (link to GitHub). It has pretty much everything you need to get started.

Of course, that means no BootstrapCDN: after all, it just doesn't serve what you need.

You will need to override these variables. Keep in mind though, that Bootstrap was originally written in LESS, not Sass. And variables in Sass are preceded with $, not @. So @screen-xs in LESS would be $screen-xs in Sass.

Upvotes: 1

Related Questions