Bootstrap 4 Theme Customization (with Sass) | BOOTSTRAP 4 TUTORIAL

welcome to this video great to have you back in this series you'll learn a lot about bootstrap for in the other videos in this video I will show you how you can customize it to your needs we'll use sass for this a superset to CSS which allows us to change some default settings for bootstrap like the border-radius as you can see here or the primary color all set conveniently with sass variables and thereafter we import and overwrite what we need from the bootstrap package sounds complicated it actually isn't so let's dive into that and let's see how that works so let's dive right into customizing this and for DES we'll start on the official bootstrap documentation page get bootstrap comm there if you click on documentation you can click on theming here on the main page theming here you find instructions on how you may adjust the theme or the general look of bootstrap so to say because bootstrap 4 uses sass behind the scenes now Assassin case you don't know is basically like a super set to CSS it's a language building up on CSS which offers you some extra features and I'll dive into sass in just a second and bootstrap for the team behind it used sass because it basically makes writing styles easier everything is compiled to normal CSS code before it's getting shipped though so normal CSS code is running in the browser and normal CSS code is what we're importing here with that bootstrap link here however behind the scenes that uses sass during the build process and this is exactly where we need to hook in if we want to adjust the colors let's say or the default sizes margins and so on assumed by bootstrap then we have to override some defaults which are set up in that sass code and basically recompile the bootstrap package to CSS again this is what we'll do and this is what you find instructions on on this page so here you basically find an example structure how this might look like in your project how you can override the SAS code or using s CSS which is a variant of sass so to say and this is exactly what we will do now one thing you can already see here is that it kind of needs bootstrap locally to do that we need to get the raw source code behind bootstrap the SAS code and we can easily get that by installing it as a local dependency using NPM NPM is notes package manager and you get it automatically when installing note J s we're not going to write any node.js code but it ships with that package manager which is the de-facto standard tool for managing development dependencies now I already got that installed and with that you can go back into your project open your terminal or command line either the normal one or like I did here the one integrated into your IDE and navigate into that project folder in that terminal now you can run npm init using that node package manager tool which will basically put this project under control of npm you're then asked a couple of questions you have to assign a project name and so on and you can basically always accept the default of course you can also find unit to your needs and once you did all that and confirmed you should see that there is a package.json file in your project now this basically is used by NPM to control well your project in which dependencies you have now with that edit you can now run another command npm install to install a new dependency and that dependencies bootstrap so enter bootstrap here and I'll add - - save - also store an entry in the package - JSON file this basically makes sharing the project easier thereafter it will now also give you that package locked or JSON file which stores the exact version which was installed and then packaged up Jason you also see that bootstrap was added as a dependency now with that we got it locally and we also get this node modules folder here now now in that folder you should see that bootstrap folder and in that bootstrap folder you have the dist folder with the finished and and readily compiled bootstrap code but you also get the s CSS folder and this holds all the raw code now you could of course go into such a file here and start editing stuff there don't do that it wouldn't get compiled that's the first problem you'll run into you just because you edited here it won't affect the compiled and finished CSS code and additionally you shouldn't touch this because if you ever need to reinstall your project and reinstall that dependency well you'll overwrite your changes so we'll follow a different approach we'll create our own Maine dot s CSS file a file where we will write our own CSS code and also override the bootstrap defaults now in order to be able to write SAS code or s CSS code we need a SAS compiler and in many projects you'll have web pack with SAS loader in there we could do that here too but we don't really need web pack so what I'll do is I'll just go to SAS - Lang comm and there if you click on documentation you can learn more about SAS and especially you can also learn how to install it under using SAS you find installation steps for Windows you need to install Ruby first for Mac and Linux you already got that we're not going to write any Ruby code but it it uses the Ruby package manager basically to install SAS so you should just run this gem installed SAS command with Ruby installed to install SAS on your machine and once you got that you can run it as a tool from your command line to compile SAS or SPSS files to normal CSS files now this is not a SAS course or videos if you want to learn more about that definitely check out tutorials dedicated to SAS what I want to do here is I just want to use it to well overwrite my bootstrap defaults and for that we can go back to the bootstrap documentation and there you see that one easy way of overwriting bootstrap is by importing everything from that bootstrap folder the alternative is that we only import what we need but for that you need to make sure that you really import everything you do use in your page thereafter so I will go with the import everything approach basically what we already do and then you add this import in your main door a CSS file with this you can now from the terminal in your project folder run SAS main dot s CSS main dot CSS and this will overwrite the main dot CSS file so let me quickly also grab the styles we have set up there let me add them after this import and now hit enter and this now gives you your main dot CSS file which is way bigger now because now it includes the entire bootstrap package it's also not minified so that would be something you have to do with some extra build step we won't do it here I want to focus on just the customization part the key thing is that now we got all the bootstrap styles and that may not see us as file of course again we could edit them there but we shouldn't do that instead let's just import this main dot CSS file so I will go to my index.html file get rid of that bootstrap import here from the CDM we don't need that anymore because we got everything and may not CSS this also means that if we save all the files and we go back to our project and if I reload it should look exactly as it did before because even though we're not importing bootstrap from a CDN anymore we still get the entire bootstrap code imported because it's now all in our main dot CSS file we can check this in our browser developer tools in the head section we only got that import to main dot CSS and if we click on sources there we can see that may not CSS since the indeed has all these bootstrap data fields now for one we can also see that bootstrap seems to use CSS variables here however we will override the sass variables and we do that in our main dot s CSS file where we import bootstrap there we now have to make sure that we overwrite any colors or whatever we want to change bootstrap uses so again back in your official Docs we find more information on that we find how we can set some default colors we have to do that before we import bootstrap because we want to declare our own styles before we import the bootstrap Styles bootstraps variables in the SAS code are actually configured in a way that they won't overwrite our map values if we set them but if we don't set them then the bootstrap defaults will be used and this is how we can set colors for theme colors we also got that theme colors map and why don't we just give it a try so let's copy that theme colors map it's basically a bit like a JavaScript object you could say and let's import it or add it in front of that bootstrap import now there let's set primary maybe to you a purple and danger to maybe a different red simply like a dark red and now keep in mind primary is a color we are using in our project for dead submit button here button primary right now if we have a look at our project it looks like this it's blue now we overwrite this here with theme colors primary so now what we can do is we can re-execute that sass compilation command and once this finishes we should be able to reload our page and now you see it's purple and the hover effect is automatically adjusted to because bootstrap behind the scenes uses this variable in a couple of places to set up a hover style and a default style for the button and also for that button outline for the alert which we could have given a primary style to as you saw in an earlier video in this series so wherever we can use that primary color it's now going to be purple and of course you cannot just change the primary color indeed you can find out what you can change by going to the bootstrap SCSS folder and in there you have this variable stud a CSS file underscore variables in there you actually see all the variables which tribe uses and they all have this default flag so that your changes actually aren't overwritten madam they're only used if you don't set them so if they should be used as a default and there you see all the colors you can override you can in general alright what is blue in bootstrap world or as we did it you can go to the colors map and in there you can also override some colors excuse me theme colors was it there you can override primary and so on you cannot just override colors you can also override the DD dimensions or the sizes bootstrap uses if you scroll through the fall you'll see a lot of things used by bootstrap like the breakpoints and so on or what a default border radiuses and you can change all of that not in this file but in your file you simply grab the at border-radius here for example added in front of the import that's always important and then change it from the default which is thought to five REM change it to let's say ten REM if you now save this and recompile your code that's always important recompile the CSS code if you now reload you see the inputs are way more around it because we overrode this default border-radius and that is really something I encourage you to play around with there's a lot you can do with that now coming back to something else we saw in the docs that part that you only import what you need this is actually good because it allows you to shrink the size of CSS code your users have to download right now we used an approach where your users download everything everything all the times now if you know you only use the grid and you only use form inputs and buttons then you can actually just import these parts of bootstrap because if you have a look at the bootstrap scss folder you see it's actually split up into buttons into forums and then to grid for example so let's do that let's import what we need we got free required imports which we always need you can see them here in the docs so let's grab these and insert them here these are the default functions variables and mix-ins used by bootstrap you can override that stuff but you probably don't overwrite everything so make sure that you have the defaults for the parts you don't overwrite and you do import these defaults by adding these imports and now let's import the other parts which we need like for example the grid this is how that import would look like but then we in our case also need the buttons and we need the forms and as a side note you might notice that we omit that underscore which is part of the file name this is simply automatically added by SAS so to say so you have to import without the underscore now with that all added we can recompile again now it's also faster of you saw that and in our main on CSS file it's leaner now it still has a lot of code there but actually it only has two grid related code the forms at the button related drug code if you for example search for alert in there you won't find any alert classes because we didn't include alerts this also has one hour implication if we now reload our page there's one thing that should be broken right now the navigation bar so let's reload and indeed forum looks good button looks good but the default Styles like the text that's broken anti navigation bar as mentioned is broken now the reason for this of course is that we didn't include the navigation bar here the nav bar we didn't include that so let's go back that's always include the nav bar and regarding the default styles are that you've old textile dad actually is the reboot package which sets some default styles for the browser with that we can recompile everything reload and the text is fixed the nav bar is kind of fixed I'd say now the reason for the invisible nav bar is that we also need to include utilities here because we're using some utility features in the nav bar dad if we go back here it is again our response if nature is only kind of working though for example I'd right here you see this is not really working as it should for that we need to include the transitions so that we can play this animation to expand or well remove our mobile nav bar with that if we get recompile and then reload we can already see it now this is working here and now we go back to the state where we were before now as you see it can be tricky to import everything you need I also had to look up for example the transition thing or into utilities it's easy to overlook this if you think just eat the navbar and one other important thing you can always look into these files of course you can look in there for example the type package we're not importing this but here we also seem to set some typography related things so we might also want to import that after reboot may be so reboot set some browser defaults in general but the type package here then set some general typography related settings for bootstrap so dad is also something we might want to import even though I don't see a directive friends here but you can always look into these Falls you can find out which variables two different features their use and you can look into the variables files in general as explained and then you can always override the things there after import what you need on your project and they have four improve your bundle your file size and tweak it to your needs so this is how you can customize bootstrap for or projects using bootstrap for again this could also be implemented into a web pack workflow where you just compile your sass file differently in the end I hope this was helpful and then with all these videos you now understand how you can actually work with bootstrap and add it to your next project

Channel: Academind

Views: 187,977

Rating: 4.9303336 out of 5

Keywords: bootstrap, bootstrap4, bootstrap 4, themes, theming, customisation, customization, customize, custom, adjust, sass, scss, variables, $primary, tutorial, course, bootstrap tutorial, bootstrap course

Id: 6Ovw43Dkp44

Length: 17min 11sec (1031 seconds)

Published: Thu Mar 15 2018