How to overwrite default color SASS variables.

This is the original default Bootstrap 4 for reference without sass style.

This is the project with the theme imported after it has been autoprefixed with additional vendor prefix per Bootstrap 4 specifications. The sass file theme has been toggled off with the underscore.


Step 1 - Dowload Bootstrap SOURCE FILES

Step 2 - Extract Files

Step 3 - Import bootstrap/scss path content to Bootstrap Studio Styles

Step 4 - Add new style: yourStyle.scss

  • Customize variables

  • import Bootstrap scss


/* custom.scss */
$font-family-base: 'Roboto',


/* import the necessary Bootstrap files */ 
@import "functions";
@import "variables"; 




 /*  end customization  */

@import "bootstrap"; 

/* optionally create new custom classes from existing classes */

 .row-dark {
    @extend .row;
    background-color: #333333;
    color: #ffffff;

This is probably a really dumb question, but how did you populate that site page? Is that just an HTML import, or did you set it up with all those parts and pieces all over the page yourself? Any chance you would share that file if you did?

I just used custom code and inserted the html from here...

I should also mention that when importing the Bootstrap sass structure you should make sure all the files have a underscore except of course the one you create as the main theme.scss file.

Get a project example Here: Github Repo - Bootstrap Studio My Custom Theme Example

1 Like

Thanks very much guys, am thinking it will be a good way to practice Sass since I've skirted around it long enough lol. I've wanted to learn it for quite a while, but could never get past the setup of it (outside of BSS) so I just never got to try it. It seems to be working in BSS though so now's as good a time as any right?

I may use this project for practice to recreate it as well which I think would be great to have as a sort of "master page" so to speak that you can save all the parts and pieces from to using in other projects then.

Anyways, I digress lol, thanks so much!

I haven't seen an: @import 'reset'; Is it important, or can it be overlooked?

@import 'reset-styles.css' ??

I guess if you use then there is nothing to reset... or is it good practice to call reset anyway.

I suppose the ultimate is to finish and then strip your css of anything not being used (happens during compile automagically?)...

and then supply it with the underscore as the custom theme css... (without needing to reference anything else, i.e. bootstrap_cdn_yada_yada).

While it seems the long-way-home, it seems also prim-and-proper! ...the right way of doing things in a production environment.

This has been quite the thread :sticky: and so much more to learn... back to school! :)

Onward and upward to learning SASS!

edit: oh! ... and then there is this autoprefixer stuff.

I know this dev from somewhere ;)

I'm hoping that everything is up-to-date.


As far a a reset.css file there was a "normalize.css" in bootstrap 3. In bootstrap 4 its now called reboot.scss. This handles the normalization of html elements. bootstrap.scss contains @import reboot.scss when it compiles.

The "notheme" example was just to show a reference to the starting html demo page with the default styles.

Stripping the css down in the end is a interesting conversation to have. I think the postcss plugins "purifyCSS" and "purgecss" both do about the same thing, remove unused classes. The boostrap.css unminified version is pretty small all ready though at 187 kb ? I mean one picture added to your page can be 187 kb ? You can also just pick and choose what components to add when compiling your theme but one has to be careful because certain components are dependent on other things such as transitions etc (ie modal).

As per the instructions on the Bootstrap theme building page, two things are needed. A compiler and autoprefixer to add the additional prefixes. I use Prepros (which is free) since it offers a simple drag and drop interface as well as a easy method to set the parameter string needed for autoprefixer. Others probably would use Gulp or something similar. Once you have recompiled the theme you can then import it back to Bootstrap Studio as a theme and select it in settings. Turn off the sass compiling of your theme by simply adding a underscore to the name. You now have your own locked custom bootstrap.css.

My real hope is that the devs are watching.... and might be able to provide a better workable solution. It seems to me that if we can add a node-sass compiler we should also be able to install node bootstrap sass to a location they define and then simply be allowed to use @imports to reference from that location so we do not have to add the bootstrap sass folder structures. On theme export they could provide the needed autoprefixer settings so one could quickly reimport saving a step. How about a special scss theme folder that one could toggle on or off ?

@Pervasive.. I'm pretty sure that's already part of the CSS tutorial that tells you to get the file and how to set it all up. Not sure why it would be better to get it from someone else that you are "hoping" is keeping it up to date :P

That's almost like asking why go here:

I would suppose to pick and choose only what you want.

I know that there were some paid tools mentioned. I don't believe that all of this is all that hard; actually quite simple.

It's just getting your head around everything that takes a little bit of time.

That's hardly a decent comparison as to why lol. This file isn't a "flavor" to choose, and since this file is already part of the setup of the app (as per the tutorials) why bother using another source that you don't know will keep it up, and what's different about it that makes it worth getting somewhere else? Obviously if there is something better about it then that would make a difference, but if not, why wouldn't you use the one the devs of this app provide you a link for? I'm curious really, not being sarcastic at all here.

Oh, most certainly lots of flavors entirely my point. Surely I would agree to start with what the devs provide, no doubt my first place to pull from. But it surely would be nice to have a way to download only what is being used.

Some browsers are still rather stupid... you've probably seen it.

  1. The text and placeholders all start to show.
  2. Some pictures start to take hold.
  3. Everything freezes for a sec.
  4. The css totally dowloads.
  5. The browser processes.
  6. Finally everything pops into place.

I don't think I need half of what's in a standard BS file.

I like the 'Idea' of picking what I want and being able to change breakpoints because a client wants me to. This whole SASS/CSS thing is a little bit cumbersome to say the least.

I think I'll write my own picker for starters, and when I get time I will write a dependency identifier and stripper to remove what's not needed.

And I keep seeing the word compiled and it's throwing me bad. To me the SASS is code, and the CSS is output. What's compiled is the program that takes the SASS and outputs the CSS... That's what's compiled.

This web stuff has always been a pain in the neck! That's why developing straight applications has always been easy. You don't need all of this web stuff. And getting the browser providers to come into agreement, ha! It's been a complete nightmare and a long time coming.

The problem isn't that the css is huge, as it isn't and in most cases is G-zipped (probably). The problem is the file has to be parsed by browsers and obviously takes time. Without any testing and just an assumption, I would think that throwing everything out other than what's needed would result in huge page rendering gains.

I wonder why do I have to spend so much time on such a basic thing like changing the theme of bs4 ?! Why there is no proper way to use the Bootstrap Studio even if it's complex, just writing a proper step-by-step guide... ? So, how exactly am I supposed to overwrite the standard colors ?

i would like to use the bootstrap variables in my styles.scss. For example...


<div class="sampleclass">TEST</div>


.sampleclass {
background-color: $pink;