Home how often do bootstrap variables change
Reply: 1

how often do bootstrap variables change

Stefan Published in 2018-02-12 09:22:00Z

Switching from "bootstrap": "~4.0.0-beta.2" to "bootstrap": "^4.0.0" added new variables in the _variables.scss. Boostrap classnames only change when there is a major version upgrade (AFAIK), but does the same apply to _variables.scss too?

It would change how we share the _variables.scss accross our application.

Klooven Reply to 2018-02-13 16:17:55Z

Does variable names change between releases?

The variable names shouldn't change as Bootstrap 4 is now in "real" release (out of beta).

The variables are there for a good reason: Your CSS shouldn't break when you upgrade. (not counting major versions of course).

Of course new variables can be added, as those shouldn't break your CSS.

If you are in any way unsure before upgrading, you can always check the changelogs. Those should tell about any breaking changes.

Using variables in SCSS

When you have set up your build tools, and created your SCSS file (let's say custom.scss), you can import Bootstrap and override any variable you want (you'll find them in _variables.scss in the Bootstrap source code):

//Your variable overrides

//Let us change the primary color which is set in the primary variable
$primary: #ce40c5;

//In this case we are importing everything
//Here we are using NodeJS with NPM, so your files should be here
@import "node_modules/bootstrap/scss/bootstrap";

Some things to note:

  • If you aren't using NodeJS, then just make sure that the import path directs to the bootstrap.scss file (don't put .scss in the import)
  • If you have checked the source code of Bootstrap 4, you may have seen !default after every variable. Don't include that in your override. It just tells Sass that the variable can be replaced

There's a bunch of good information about this in the docs, so feel free to check there if you are missing anything (or ask).

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.299491 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO