How to customize bootstrap css when using bootstrap-sass [closed]

Question

I'd like to change many things, for example buttons color or for example change the background-image color on the nav bar (header). I use boostrap-sass gem so i can't use boostrap website' Customize page

Should I really override all these on my file custom.css.scss or can I change these somewhere more low level ? i don't find the .css files allowing me to do that in my project file (I searched all lib, app and vendor /assets but noweher i find the css of boostrap. i suspect it's because they're not there but they're directly in the gem files) I have a lot of changes so i feel overiding so many things is not the best option.

What's the best way to do this? Thanks

Answer 1

I have started using the Sass flavor of Twitter Bootstrap and I just came up with a sensible way of structuring my files so I can make my own custom overrides without messing with the core files AND keep all your CSS in one file for faster loading.

In a nutshell I put all the sass files into assets/sass and make a subdirectory called bootstrap for the core files. I then make a sibling directory called theme for my custom scss files.

Go to /bootstrap and inside this directory is a file called bootstrap.scss which includes all the core components. Rename this file to theme.scss and put it in the parent directory like this:

As you can see I already have some custom overriding sass includes files already in the theme directory. These will be tacked on to the bottom of the default bootstrap CSS when it's compiled.

The magic happens when you go into theme.scss and change the include paths like so. Look toward the bottom of the image for the overrides and toward the top for the custom variables reference.

Note: If you want to edit the variables in bootstrap, it's a good idea to make your own _variables.scss file in your theme directory and include it at the top of your theme.scss file. This way you can override the bootstrap variables which will persist with updates in the future.

Then just include theme.css in your pages and voila. This is how I have started doing it and haven't run into any bugs yet.

I find this the least complicated of the methods I have seen. And when new updates come down I'll just update the core bootstrap files and keep my edits!

Answer 2

You should never modify Boostrap's original files. The best option is to override their classes with your own ones. You can do this by creating a css file in your assets/stylesheets folder, which will be included automatically in your app.