Bootstrap Theme and Color Customization - The Right & Easy Way

[Music] hi everybody it's dave six i'm going to show you how to customize your bootstrap theme like this the right way and the easy way let's get started [Music] so we're starting off with a blank bootstrap setup website here all of the html has the bootstrap classes in there but bootstrap has not been included yet in your search to find a way to customize your bootstrap theme you've probably run across websites like this that allow you to create a theme download it and then put it into your project now going to a website like this downloading the custom bootstrap and uploading it to your server can get kind of cumbersome so why not have the server generate the custom bootstrap from the get-go to accomplish this i'm going to assume that you have a basic website setup like this maybe with bootstrap already and that you have a basic knowledge of javascript and node.js if you don't have a knowledge of node.js you can still do this just make sure that you go and download node on your production environment first once you have node installed you're going to need two more tools first is sas and the second is auto prefixer these tools will allow you to recompile bootstrap every time you make a change to customize it considering you already have node and npm installed the easiest way to get these onto your system is to use the npm install global command in your terminal you can type in npm install dash g sas then similarly you can type in npm install dash g post css cli and auto prefixer and that's all your dependencies installed now with our dependencies all set up we can get on to making this website look a lot better firstly we need to include the javascript for bootstrap you can do that by copying these two script tags and pasting them in the head section of your page with our javascript included it's time to get the css in there now normally you would pull the css in from this cdn here but we want to use a custom theme so what we're going to do is instead go back to our project make a new folder called css and then open that folder up in our command prompt in our new css folder we're going to create a node project by typing npm init you've got to give your project a name i'm going to call mine custom bootstrap do note that you cannot call it bootstrap as we're going to install another module called bootstrap now that you have your node project created which we can see here we're going to install the bootstrap dependency to do that we type npm install dash dash save bootstrap if you'd like to learn more about how the bootstrap dependency works you can check out the link in the description to read through their github with the bootstrap dependency created we can go back to our editor and in our css folder we're going to create two new files the first is going to be called bootstrap.scss that's a sas file and the next is going to be called bootstrap that's our css file this css file is where all of our custom bootstrap code is going to live in the end so immediately we're going to import this css file into the head of our project you can do that just by regularly importing the css file just as you would any other css we're going to run sas on our dot scss file and have it output the information in it into our dot css file which is then imported into our project currently there's nothing in our scss file so what we need to do is import bootstrap from our node modules folder and then add any customizations that we want to see in our new theme we can import the core bootstrap code by entering the line import node modules bootstrap scss bootstrap that's going to pull in all of our key components now any customizations that we would like to see in our theme we're going to put those above the import tag myself i'm going to customize a few colors the primary the secondary and the danger color with your customizations made be sure to hit save as you can see there's currently still nothing in our dot css file so what we can do is go back to our command prompt and we're going to use the sas command first we're going to enter the sas file that we're going to process that's our bootstrap.scss and then next we're going to enter the target file where it's going to output all of our new information that will be bootstrap.css press enter now if we look in our project here you can see we've got a new file bootstrap.css.map and then if we check out our bootstrap.css file you can see it is now filled with tons of bootstrap styling this is all of the core bootstrap css plus our custom styling so now if we head back to our site and click refresh we have our custom style bootstrap ready to go now let's say that i've changed my mind on this yellow for the primary color all i have to do is open my project go to bootstrap.scss change the primary color save the file go back to my terminal and rerun our sas command you can see in the browser after a refresh that our primary color on all components has changed now if you want to take these customizations to the next level what you can do is open up the node modules bootstrap scss file in here you're going to find a file called underscore variables now this file contains all of the variables for bootstrap which you can override in your bootstrap.scss file thanks for spending some time with me today and good luck customizing your bootstrap we'll see you next video

Channel: DavidASix

Views: 27,613

Keywords: bootstrap, custom theme, bootstrap custom theme, how to, how to make custom theme, theme customization

Id: 9FX5NgRrdnc

Length: 6min 12sec (372 seconds)

Published: Wed Nov 03 2021