May Sale! All accounts are 40% off this week.

cristian9509's avatar

How to modify things inside Bootstrap sass

So, I have everything setup as per Jess instructions. I can compile with gulp and everything works fine. My issue is how to do changes to the sass files.

I would need to make changes to the variables but also to some other things live navbar links and other stuff.

My bootstrap is located in node_module. I know I can make changes over there and it works but that should not be the right way. For my variables I copied the _variables files in my resources folder, made a few modifications and imported it before the bootstrap import. It works but for _navbars and _dropdowns it won't work since they are depended on other files (mixins).

So, is there any specific steps I need to make to make changes to bootstrap sass in the proper way?

0 likes
5 replies
kfirba's avatar
kfirba
10 years ago
Best Answer
Level 50

@cristian9509 just override. Make sure you include your variables file before bootstrap sass so your variables will take precedence and override bootstrap's variables.

Now if you want to override a component then simply create a component file and make your overrides. Make sure to include those components after the bootstrap sass file.

3 likes
lindstrom's avatar

@cristian9509 What @kfirba said. Here's an example for you.

  1. Bring your _variables.scss in first. The variables are defined with !default in the bootstrap _variables.scss file which means to use their value unless the value has already been defined.
  2. Bring in bootstrap
  3. Next mixins - prioritize your overwrites before other components that depend on them that you want to overwrite.
  4. Next overwrites (like navbar, buttons, alerts, etc)
  5. Finally, your own styles

Note, I don't pull bootrap in with npm so you'd just reference the correct path in your the second import below.

@import "variables";
@import "bootstrap-sass/bootstrap";
@import "mixins";
@import "overwrites";
@import "style"

Have fun!

2 likes
cristian9509's avatar

Got it. I was putting the custom components sass files before main bootstrap import. It all makes sense now. Thank you.

MikeHopley's avatar

For some reason, I read this as "How to modify things inside Bootstrap's ass". O_o

Please or to participate in this conversation.