Bootstrap 5 Crash Course Tutorial #19 - Customizing Bootstrap

alright then gang so as we've already seen bootstrap comes with all of its default theme colors our buttons are using this secondary theme color the cardboard we have here is using the primary color etc now bootstrap also comes with its own default values for things like padding margin font size borders etc on all of the different elements and components that we use and that's really cool but sometimes you might want to override those default values and theme colors with something more specific for your website so in essence you need to customize those values that bootstrap uses and bootstrap gives us a couple of ways to do that the first way is just to make your own additional style sheet that can override the bootstrap styles for your different components and then just add that style sheet after the bootstrap one in your html file however i'm not a huge fan of that just overriding styles this way when there's another way to do it and there is another way because we can also use custom sas files to update bootstrap variables that control things like colors padding margin font size and all that jazz and that's the way i'll be showing you how to customize bootstrap and don't worry if you don't know too much about sas we won't be diving too deep but if you want to learn more i've got a whole sas tutorial and the link to that is going to be down below anyway in order to do this in order to use sas files like this we first need to install bootstrap locally into our project using npm the node package manager now to use npm you'll need node.js installed on your computer and to get that just head to nodejs.org and hit the download button you just go through the install wizard and then you'll be able to use npm like we're about to do so assuming you have that installed what you need to do is open up a terminal in your project directory i'm just doing it here in vs code and then first type npm init to create a package.json file now this file keeps track of any dependencies like bootstrap that we install and by the way if you do want to learn more about npm and node.js i've got a whole crash course available and again that link is going to be down below the video anyway let's answer some of these questions about our project so i'm pretty much just gonna accept the default values for most of these and then once you're done it's gonna create your package.json file which like i said will list all of your project dependencies when you install them using npm so now let's install bootstrap so again in the terminal we type this time npm install bootstrap and then you press enter and this might take a minute or so to install okay then so once that's done you'll see in your package.json file a new dependency listed bootstrap you're also going to see this node modules folder over here this is where bootstrap was installed to and we can see that bootstrap folder inside if we open up that folder we can then see a dist folder and that contains the final minified css bundle which you can use directly in your project if you want to and that would kind of be an alternative to what we're currently using to bootstrap cdn and everything would still work the same way we can also see this scss folder and that contains all the bootstrap raw sat files that declare bootstrap variables like colors spacing font size etc and they also contain the classes for bootstrap components like cards and modals and whatnot if we open up the variables file we can see all the different variables and their values and these are the values that are being applied to the different elements in our project currently so all these sas files are what are compiled and minified into the final css we can see inside the dist folder now we don't want to use those final compiled css files because if we do that nothing will change we want to customize the variables and values defined in the sas files before they're compiled into css and then we use that compiled css in our project now you might think that the easiest way to do that is to dive into these files right here directly and edit the variables inside them then just recompile them but i wouldn't recommend this method because then we lose the original bootstrap values and it becomes hard to roll back any changes and secondly if we ever update bootstrap then our changes are going to be lost anyway so don't directly edit these files instead what we're going to do is create our own sass file inside a sas folder so first of all let's create that folder called sas and then inside i'm gonna create a new sas file and i'm gonna call this main.scss but you can call it what you want and inside this i want to import all of the bootstrap sas so that when we compile this file it's including all of the default bootstrap sas 2. so let's import that from the node modules folder first of all and this file that i'm importing is basically the amalgamation of all of the other bootstrap raw sass files together so it imports them all just by importing this one file and now also in this file we can update bootstrap variables and values to override the original ones from this input so what variables do we want to update well let's take a look at some of the color variables again inside the raw sas files so let's open up the variables folder or the variables file sorry and we can see if we scroll the different theme colors and we can see that the primary color variable is called primary so we could update this to be a new color let's try that so let's go back to our sas file and i'm going to do this above the import that's important because otherwise the rest of the bootstrap code wouldn't be able to utilize this updated value for example it will use the value to style the background color classes text color classes etc so we have to do it above the import now you might think that because we're defining the value first up here and then importing the bootstrap file down below then when the variables are declared inside the bootstrap sas files they overwrite hours but take a look inside the variables file again and we can see this default statement right here now this is a sas feature and it means only apply this value right here if one already hasn't been declared well in our case it has above the import so when it reaches this line it will use the value already declared by us and not this one right here so now we've updated our primary theme color variable all we need to do is compile our sas into a final css file that we can then use in our html page now you can use any sas compiler that you want to do this but i'm using a package for vs code called live sas compiler so to get that go to your packages search for it right here and it's this package live sas compiler so install that once it's installed you'll probably have to restart vs code for it to take effect and what this package allows us to do is watch a sas file for changes and then it will automatically compile that sas file into a css file whenever a change is made and saved now to configure where the css file is output open up your settings and you want to search for live sas formats then click this link right here to edit the live sas json settings now you can copy my options here for the same result which is that the compiler outputs a compressed css file with this file name in the css folder okay so all we need to do now is watch this sas file by clicking this watch sas button in the status bar at the bottom and when i do that it's going to do an initial compile and output the file and then on every change after that whenever we save the file it will auto compile again and override that file that css file that it outputs cool so now let's hook up this css file in our html file instead of the cdn css and by the way we're not customizing the bootstrap javascript in any way so we can keep using the cdn link for that all we're doing is changing the css all right then so let me get rid of this one and replace it with the link for our css file and now that's done we can preview our site again to see if the change has taken effect and we can see down here on the pricing section that new color for the primary theme color kind of like a goldy color cool and now anywhere that we use the primary classes whether it be for a font color a background color the button classes etc it will use that gold color alright so let's try another variable so that variable is going to be the light variable and that's what we're using for the background right here in this section and also the background right here in book review so i want to change that color as well and if we take a look inside the variables file right here we can see it's this variable called light which is currently this gray color so let's override that underneath primary i'm going to paste in this variable light and set it equal to this kind of really light yellow color so if i save this now live sas compiler is going to automatically compile this format i don't need to do anything else and if i go back to the browser it's refreshed automatically and we can see that light yellow background in the book reviews and also up here as well so that's worked awesome okay then so that's changing variables from bootstrap what if we wanted to maybe add new theme colors to the ones we already have so now override the correct ones but add new ones well that's a little bit more complex if we take a look at the raw sass file for the variables then we can try and find a variable called theme colors now the theme colors variable is a bunch of values in parentheses and this is called a map of values we essentially want to add a new value to this map a new theme variable if you like now what we could do in our file is redefine this whole map if we wanted to but doing that would mean we'd have to redefine all the values inside it too if we just specified one or two custom values inside it then the other ones will no longer exist instead i don't want to alter the current map i want to add to it now the way we do that is to first of all create our own custom map of extra colors that we want to see in our theme so let's do that first of all in our file so you can call this whatever you want i'm calling it theme or rather custom theme colors so again this is going to be a map of value so we use parentheses to denote it's a map and then inside here we can define some extra color values now i'm going to define two extra values i'm going to create one called alt light and that's going to be a really light purple color and once i've done that i'm also going to create another one called alt dark and that is going to be a darker purple color to contrast the light one so this right here is now our new map of those new theme colors and we want to add this map to the other map of colors the theme colors that already exist in bootstrap now there's a very specific way we have to do this first of all we have to import two files from the original sas bootstrap source the first one is the function file and the second one is the variables file where we saw those theme variables defined now the functions one must come first because the variable file uses it and the reason we need to import the variables file is so we can access the theme colors inside that and redefine it now so these imports come after any variables we've already redefined if they came first then the redefined values may not work because these files use the variables that make up the bootstrap classes so make sure you put any of your redefined variables at the top then i'm going to import these two files which will then have access to these new values for the variables and incorporate them into the bootstrap classes and after that we have our own new map of custom theme colors then we need to merge our custom theme color map with the original theme map defined in the variables file since we've imported that file here we can access that theme called map the way we merge two maps together is by using the map merge function and then we can pass in two maps to merge together now in our case that's the custom theme colors and the original theme colors so let's pass those in and it doesn't really matter which order you pass them in it's going to have the same effect so this function is then going to merge those two maps together into a new map with all of the merged values inside it so then all we have to do is take that map and assign it to the theme colors variable so now we're saying look we're overriding the theme colors variable and that value is now going to be a map which is these other two maps merged together so at this point we're saying that the theme colors now should include these new variables these two new theme colors and finally we import the rest of the bootstrap library at the bottom which will now use this updated theme colors map inside it what this means is that now we can use those other color classes for things like background color font color and button variants using our two new theme colors so let's try adding them into our page so if we head back to the index page this thing right here the reviews currently has a bg hyphen light color and remember that's using the new value which we defined right here but instead i want it to now have the alt light background color instead and since we define these theme colors right here and merge them into the custom theme colors bootstrap is then going to cycle through those and create all of those different classes that we can use like for background so what i can do is instead of saying bg light i can say bg alt light and if we save that we can see now we have the light purple color which is the alt light color cool so let's try colorizing some of these icons the alt dark color that we created which is the dark purple so down here for the icon next to this title we'll say text hyphen alt dark like so and save it and we can see now this is purple and i could do the same thing for those stars down here which are these things so let me alt click all of these and say text hyphen alt dark for those and we can save that and preview and yep that looks pretty good and we could do the same thing for each of these i'm not going to bore you with that but you can do that if you wish so that there my friends is how we can customize bootstrap colors and also you could customize any of these other variables if you wish as well and i will be releasing on net ninja pro in the near future a whole series about how to extensively customize bootstrap 5. so watch out for that

Channel: Net Ninja

Views: 156,218

Keywords: bootstrap, bootstrap 5, bootstrap 5 tutorial, bootstrap tutorial, tutorial, bootstrap 5 crash course, bootstrap crash course, what is bootstrap, bootstrap 5 new features, crash course, responsive design, responsive development, CSS, bootstrap sass, bootstrap setup, install bootstrap, bootstrap getting started, bootstrap guide, bootstrap 5 guide, bootstrap 4 vs bootstrap 5

Id: nCX3QVl_PiI

Length: 16min 6sec (966 seconds)

Published: Wed Jun 30 2021