Customize bootstrap variables

sage
1

I’m struggling with how to best customize bootstrap within the Sage + Gulp file structure. All I want to do is change the @grid-float-breakpoint to @screen-md-min.

I’m guessing I need to override the bootstrap.less within bower_components and add a reference to a file with my custom variables after the variables.less import. However, I’m not getting this to work.

Any input would be great…thx!

2
3

Having difficulties with this as well. The less works out of the box. If I change everything to scss, it works but the local _variables.scss file doesn’t override the boostrap default variables in bower. Not new to roots or sass or gulp, but perhaps I am missing something.

Main.scss

// bower:scss
@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
// endbower

@import "common/_variables";

Varaibles.scss

// Colors
$brand-primary:        #9427ad;

Manifest.json

{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "editor-style.css": {
      "files": [
        "styles/editor-style.scss"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    },
    "modernizr.js": {
      "bower": ["modernizr"]
    }
  },
  "config": {
    "devUrl": "http://myclient.dev"
  }
}

The brand primary isn’t injected into boostrap, but it’s usable after the variables file. I know we used to break up bootstrap.scss from bower and import each manually and inject our variables at the beginning, but now its all automated, but not working. Thanks for the help.

4

Can you put the include to your custom variables above // bower:scss ?

1 Like
5

well that works…
just noticed the less structure was different, so figured it was something else.

6

Same problem here, i simply need to tweak:

$grid-float-breakpoint

and i tried to override via _variables.scss but it doesn’t work… I have checked main.scss and the order of @import seems correct: first _variables, then bootstrap.

I’ve found a discussion on stackoverflow that replicates exactly my issue with sage, but i have not really understand how to fix… It seems i’m not permitted to post link, but the name of the discussion is bootstrap-sass-grid-float-breakpoint

1 Like
7

You need to call your variable overrides first, before _bootstrap.scss.

@import "common/_variables";

// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss
@import "../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
8

I’m having the same issue. I saw the question on Stackoverflow and the person who resolved it stated it was some conflict between Bower and Bootstrap dependencies but didn’t divulge further.

All i have added is:
$grid-float-breakpoint: $screen-md-min;

to the common/_variables.scss file but Gulp states $screen-md-min is an undefined variable. I don’t understand how as i’ve used the same variable for media queries throughout development.

9

Pay attention at your .scss import order in styles/main.scss, it sounds like the variable is not defined at the moment of the assignement, maybe is declared later.

I don’t remember exactly what was my issue related, but i remember that was a stupid thing like the one i stated, not conflict-related at all.
Last post from vandigroup is correct, and is the way sage latest is structured by default. The override has to work.

10

This makes sense now. I’m trying to call the $screen-md-min variable in my _variables.scssfile, but that file is imported before the bower_components bootstrap files as mentioned above.

The $screen-md-min var is declared in the bower bootstrap files so of course it’s undefined in my _variables.scss file which is called first.

I’ve just declared the variable again in my file and all works fine:

$screen-md: 992px !default; $screen-md-min: $screen-md !default; $grid-float-breakpoint: $screen-md !default;

1 Like
11

Hi !

With everything out of the box, my changes for brand-primary are not visible on the dev url !

I can’t find any reason for this, still searching.

The changes in the PHP templates are immediately visible.

12

If you ran gulp --production either manually or as part of your deploy you’ll need to run gulp once by itself to clear out the versioned assets before running gulp watch again.

1 Like
13

Hi there,
I’m also having trouble with this. I’m using 8.5.3 and BS4. I can’t seem to override the styles for the primary, links, etc. Any help would be appreciated.

This is the top of my main.scss
@import “common/variables”;

// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss
@import “…/…/bower_components/bootstrap/scss/bootstrap.scss”;
// endbower

14

What’s the trouble?

Provide the code that you’ve modified. The code you provided is already what’s in a default Sage 8.5.3 install…

15

Thank you benword! I changed it a little bit to have folders hold all the imports for each indvidual area, but you can see my bootstrap import here.

@import “common/variables”;

// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss
@import “…/…/bower_components/bootstrap/scss/bootstrap.scss”;
@import “…/…/bower_components/font-awesome/scss/font-awesome.scss”;
// endbower

@import “common/common”;
@import “components/components”;
@import “layouts/layouts”;
@import “pages/pages”;
@import “vendors/vendors”;

16

I’m going to close this thread as it’s over 2 years old and there shouldn’t be any issues with customizing Bootstrap variables in Sage.

If you’d like further support, create a new topic and post the contents of your variables file. It’s hard to provide support without being able to reference the same exact code that you’re working with.