Change Bootstrap's colors

if you have bootstraps set up locally and you can amend its sas variables then modifying bootstrap's color system is surprisingly easy in this short video i'll talk you through everything you need to know about changing bootstrap's colors okay before we get started be aware i'm going to be using a boilerplate that i've done a separate video about you can find links in the description and i'll put a link right at the top of this video now as well click on it if you want to follow along it's really easy to set up okay with that said i've opened up getbootstrap.com forward slash docs and i've clicked on customize and color and this is the key part bootstrap's color system revolves around a sass map called theme dash colors so let's have a look at that inside of the source code i'm going to go into my code editor i'm going to expand node modules and then bootstrap then scss and then underscore variables.scss so whenever you make modifications to bootstrap sas this underscore variables file is what you're targeting and the theme colors map is near the top around about line 80ish there it is there so let's talk about what sort of amends you'd potentially make to these theme colors first of all you may just change the shade of blue or beyond that you may want to have green as your primary or lastly you may want to add an additional entry to the theme color sass map so let's take all three of those options starting with the easiest version now just to reiterate you need to have sas set up so that you can make modifications to bootstrap sas now i can do it because i have this boilerplate installed if you don't use a build tool then you'll likely have to look for a plugin inside of your code editor and for me that's vs code but somehow you need to get your sas recompiled okay i'm going to expand src and mysas is imported inside of a file called main.scss and i've set up a custom variables file inside of a subfolder called abstracts underscore variables.scss so there's the abstracts and there's the variables so let's just say for the sake of this video we want to set a different hex value for blue now i know blue is the default color or the primary color so let's see what we can do with that now i already have my parcel dev server running and inside of there i've placed the button so as soon as we make a change to this blue we'll be able to see it so back in our code editor the file i'm going to work with is underscore variables.scss the key part here though is that you import your variable amends before you import bootstrap's variables and the reason why it's key if i open up bootstrap's variable file again is that wherever bootstrap have set up their variables they've used this default now what this is telling the compiler is that when you come to create this if a value doesn't exist for a variable called blue then use this value but because we import ours first and we set our value for blue and i'll make it say just the color red so we know it's different when it comes to when the compiler reaches this line it's going to ignore that value and that's how you override the sas variables let's save our changes parcel will recompile css it's all good with the green check mark and back in the browser as you'd expect now wherever primary is now used we'll now have that red color so that means quickly looking at the components section we've got alerts we've got buttons we've got a utility background color and it may well be used in a couple of other places as well okay so that's the first option what about if we wanted to use a different color for our primary so again it's the same process but we have to make sure that we have both those variables available so let's look at where bootstrap assigns the primary color and that's roundabout line 70 for me so it's this line over here so let's just say we're not going to change green but we want to reference green and we want to use that as our primary color so the first thing we'd have to do is to set a value for green and i'll take that one over there i'll keep it exactly the same back in our own variables file so we do that first and then it's the same process as we've just done except this time we're going to target primary and we'll set it to the value of green now if you don't have this what's going to happen is the compiler will throw an error because this screen doesn't exist all right save our changes and now on the front end our button will be green there you go nice and easy right and now we come to the last way that you may look to amend it what if you wanted to add something else to these available options let's say you're not happy just with primary secondary all the way through and you just wanted an additional custom value well the key part here is that you target that sas map that i refer to at the start of this video theme dash colors now we're going to use straightforward sas mapper men's now how mappermans works and i'll show you an example is first you set up your own custom map and if you don't know sas maps think of it like an array where you have a key and you have a value so let me uncomment this code and then you target the sas map that you're looking to amend and you pass in the existing sas map and the new one so why are we targeting theme colors because that's what bootstrap uses for its theme colors so first we set up our own one and then we pass in the existing theme colors and that gets merged with custom colors now what this will mean is that when this is compiled in addition to all the buttons we already have we then have a new button called btn dash and whatever that key is so in this case dash custom dash color and let's test that out i'm going to open up index here's all of our buttons and next to this dock i'll create a new button and i'll change that to custom color now save all my files we'll recompile well we won't our code will and there you go there's our dock which is now our btn custom color and that's it that's how easy it is with the right setup in place for you to make modifications to bootstrap's color system

Channel: Pixel Rocket

Views: 30,909

Keywords: Bootstrap 5, Learn Bootstrap, HTML, CSS, JS, Learn Frontend Web Development, Frontend CSS Framework, Bootstrap Guide, Bootstrap Tutorials, Setup Bootstrap, Customize Bootstrap, Change Bootstrap colors

Id: au5ccstcbnc

Length: 6min 1sec (361 seconds)

Published: Tue Feb 01 2022