Change Colors in Bootstrap with Sass (2023 Best Solution)

in this tutorial we'll look at how to change colors in bootstrap with SAS alright so I have a simple bootstrap project here I'm not using the CDN links but I've installed it with npm I have a whole video on how to set it up properly you may have a slightly different folder structure or whatever it doesn't really matter but you're going to have some kind of main SAS file right and you need to include all of bootstrap and the first thing that we're gonna look at is simply overriding the primary and secondary color right so just as an example here in the documentation they show you how they have how they have implemented this so they're using theme colors and um they're using a subset of all colors to create a smaller colored palette for generating color schemes you know very typical example of these would be these buttons right so let's just copy all of these buttons I'm going to paste them in the HTML and format it by shift alt F and I'm going to save it and I'm going to refresh here so now we have these buttons let me actually quickly put them in a container class from bootstrap and I will also add some margin on the top so they're not sitting right against the edge of the viewport and then we're going to look at how we can change those colors I'm going to refresh here and I'm gonna zoom in a little bit all right now the easiest way to change colors is to go into your SAS file and before you import all of bootstrap you can actually just set a value for for example primary right so this primary button is actually using that primary variable and so you can set it to anything you want I can set it to Black the only thing I have to do here is save and actually I need to compile this right because my HTML is linking to a CSS file this is SAS so I have an extension here watch SAS and it will compile this for me again I have a whole video on how to set it up properly including compilation with SAS so now if I refresh here you can see that this background color has become black right I can set it to red and then refresh here it's red right so this is the easiest way of changing the colors just setting those variables they have now if you want to know all the variables they have you can go into the the source code here for bootstrap SAS and here they have a partial file with all the variables right so they're using this this um default flag so what's going to happen is if it's if if you haven't said it yet this will be the default value right but if you already set it here it will simply use this right so that's that's simply how to set things up and they have blue colors they have Indigo right they have all these colors out of the box you can overwrite this or it's not really overriding you're actually just a setting is you can set blue because this is actually the color that the primary uses as well you can set that to some other other color if you want so you can look in there you can you can find all the variables that you can change that's the easiest way and the second way is a little bit more sophisticated but in that case what we're going to do is we're going to add something to these theme colors right so they have some primary secondary success we can also have our own for example um you know orange or yellow or like Royal Purple right so let's actually see how we can do that and then also um the cool thing is we can get our own classes here right so if we have some kind of Royal purple class we will actually get a class available with that name all right so let's see how we can do that now to do that we do need to link to two things the variables partial and also we need to import this and also the functions partial let's see where it is okay so we need to import these two things before we can start working with it I'm just going to copy this so it's variables and I don't have to include the underscore because it's a partial in SAS um let's see this should be the correct path so then what we can do is we can create our own custom map right so they're using a so-called map in SAS let me zoom in a little bit right what we're going to do is we're going to create our own map and then we're gonna we're gonna merge it with this theme colors map right so we're going to say custom colors this is typically how it's done and you can add as many as you want right so let's say something like royal green right some kind of green yellow color or actually no semicolon here maybe just some kind of green color right and you can add more right so you can add another one you can add as many entries as you want so this is now our own custom map and now we want to merge it with these theme colors that already exist we're going to add it basically which has thin colors we're going to say map merge and we're going to merge it with well the theme colors and then with our own colors and so it's basically just going to add it to the theme colors and what this will do is we we will get a new theme colors map but now there will be something like royal green added to that and there's many advantages to that but one of the things we also get is now we we can use that as a as a class name we have for these buttons so we can say royal green for example so if I save here and refresh you can see we now have a sort of a green color for that button if I change it to some blue color actually let's make it then I save again and refresh now it's uh that orangey color by the way if this was helpful I'd really appreciate it if you could like And subscribe also check out my courses on CSS and JavaScript if you want to take those skills to an advanced level because in there we will build some beautiful real world projects from scratch so you can see how everything fits together and really Master CSS or JavaScript and I will also release other courses soon like react and node.js so if you want to be notified then make sure you are subscribed to the email newsletter you can find the link in the description thanks for watching and I hope to see you soon

Channel: ByteGrad

Views: 9,308

Keywords:

Id: zfXae4kyxAs

Length: 5min 27sec (327 seconds)

Published: Wed Dec 07 2022