 Hey, welcome everybody. In this Bootstrap video I will cover only the most important things that you need to know to get started. Bootstrap is a highly popular CSS framework that streamlines development by offering pre-designed components with optional JavaScript for interactivity alongside with templates and responsive grids. It empowers creators to rapidly build attractive and functional websites efficiently that are robust and feature rich. With customizable options and pre-built components, Bootstrap ensures design consistency and seamless performance across devices and screen sizes. Hey, welcome everybody. To get started navigate to getbootstrap.com. I'm going to be using the latest version of Bootstrap which as of today is version 5.3.1. If you scroll down a little bit you will find the installation guide. From here we have two options, install via a package manager or include via CDN. Now, they both have pros and cons. For example, if you want to install it via the package manager you get control over the version, you have offline availability, greater customization and security. On the other hand, if you want to use the CDN it's easier to set up, you have caching which uses less bandwidth, you have automatic update for better or worse, then you have reduce hosting load and you have global availability which makes it super fast. Now in this video I'm actually going to be using both and in the first part of the video we're going to start with the CDN. Let's jump into VGTD code or whatever code editor you have and before we get started I want to mention two extensions that can save us a little bit of time and if I go under extensions from here the first one will be the live server extension which essentially creates a local server and listens on changes. So every time I make a change to my document it will refresh the browser for me automatically so I don't have to do it manually. You don't need this but it's nice to have. The extension that I want to mention is the Bootstrap 5 quick snippets extension and the reason that this extension is good is because it can save you a lot of time. For example, they have a lot of useful snippets from here that you can literally start typing BS5 for example alert and then you can select whatever you like for example if you want to use the full alert you can type this and it will add the required code for you instead of you going to the documentation copying and pasting it just saves you a little bit of time you definitely don't need it but it's nice to have. From here I've created a brand new folder called Bootstrap. Let's create or file called index.html and let's start a local server by clicking go live. This is going to open the website in another browser and the local host which is 127.0.0.1 and port of 5500. From here we can start creating our html document and I'm going to go with html 5 like so. Save it and let's put an h1 hello. I'm going to zoom in just so you can see a little bit better and now let's include Bootstrap. So if you go back to Bootstrap scroll down a little bit where we have the cdn. From here we need to copy the css link so I'm going to copy this and we need to insert this link inside the head element under title. So I'm going to paste this in here and also let's talk about world wrap by going view and then it should be here world wrap or alt and z. Save this and now you should see that the font just changed and this is because our style sheet is now working and we can start using Bootstrap just like this but also if you wish to add any of the elements that need interaction from Bootstrap for example alerts or client site form validation you do need to add the JavaScript. So let's copy the JavaScript as well and we can paste it here underneath the link like so and we can just add the fur to this script which means that this script will be executed once the page has finished loading and we can save this. This shouldn't change anything but now we should be able to add interactive elements from Bootstrap. Before we do anything let's go to the doc super quickly and have a look around. Here on the left side is where you can have everything that you need they do have a quick start guide and everything is nicely laid out. The only thing that I wanted to show you before we get started is the colors. Now there are a couple of default colors that we can use throughout all out and these are the colors here the primary secondary success danger warning info light and dark. Obviously they can be overwritten if you install Bootstrap locally you can amend the scss variables and change them to whatever you like. Let's minimize everything and the first thing that we're going to do is focus on the topography. So I'm going to scroll down and let's make a little bit of space inside here. To speed up the process I'm going to copy and paste six headings. So these are the default headings obviously I am zoomed in quite a bit that's why they look quite large but these are the default headings and this is the default behavior. Now one thing I want to show you is that if I open this in another browser and if I inspect it and let's talk to the device toolbar here so we can look around how the text is behaving. So if I scale down the browser you will see that the topography is fairly small and if I go up you will see that it's actually fluid. So the topography is responsive as default. It doesn't make a huge difference but it is responsive as default. Now for each heading there is also a class that you can use and for example you can use the headings class names in order to modify the look of your headings. So for example if I want to make this heading look like H2 I can just put H2 and now this is gonna have the same size as H2 and we have the numbers from H1 to H6 available. So I can definitely make this H6 and this is gonna look like H6 if that makes sense. We might have H1 for CO but for the look and feel it looks like H6 which is great. Just like that when you need the heading to stand out you can use another class name called display. I can change the class name to display and then we have the numbers from one to six. So if I put one this is gonna be the largest one and as you can see this stands out from the rest a little bit more and of course you can change the font weight if you wish to. There are a lot of utilities such as font F for font and W for weight and then you just put both. Obviously some of those things you'll probably discover once you use bootstrap I won't be able to cover absolutely everything but these are the things that you can do and as I said you can change this to five or four whatever and the size will change. All right now let's move this down a little bit and let's have a look at some of the inline text elements. To speed up the process I'm going to copy and paste them and explain them. So for example I'm creating a paragraph here with the element mark and if I save this you will see that this highlights the text so we're getting highlighted text. Just like that we can use other elements such as delete which is basically going to put a cross through line through the text and that's pretty much it. Then we have s in here which says that this line is no longer accurate and it looks pretty much like the delete one it just puts a line through the text. Then if we use ins this will be addition to the document it will just underline it. Then for underline we can also use u just like standard you put u and then this will have underline text. We also have small which is fine print and as you can see this is slightly smaller because I'm zoomed in it doesn't make a huge difference but it is slightly smaller. Then we have a bold text here which you can wrap in strong and as you can see this just becomes bold and the last one that I'm going to show you is the italicized text and as you can see we have text which is italic. That's pretty much it. Now the great thing about this is also that they're class names so for example if I wish to highlight the heading one I can give it a class name of mark and save and as you can see this highlights the heading one I can do the same for the heading two I can do small and now this will make the heading two small like so. So there are definitely utility classes like this that you can explore and attach them to pretty much anything that you need. All right the last thing that I wanted to show you on the topography is that we can change the font colors if you wish to. For example on the h1 here I can do text and then primary. If I save this this is going to bring the primary color which comes from bootstrap and I'm going to show you super quickly is well here one more time these are the colors that we can use as the vote so you just attach primary secondary success or whatever you wish to the text class name and this will change it. For example on this one we can do text danger and this should turn into red as you can see and also if you wish to change the background color you can do bg dash primary and that will change the background color like so and you do have different backgrounds that you can use for example you can use a background black like so or background white. You just have to look into the documentation and look around there is also transparent which you only have to see now but it can be useful from time to time. All right the next thing that we're going to look into is the layout. So if you go on the layout and then breakpoint here you'll be able to see that we have different breakpoints that we can use on our layout for example small, medium, large, extra large and extra extra large. Breakpoints can be used to control how the layout elements adapt to a particular viewport or device size. As you can see here we have the dimensions and we have bare minimum styling such as the sm, md, lg and these can be attached to pretty much anything which I'm going to show you in a second and those dimensions represent a subset of common device sizes and viewport dimensions which provides the user with great experience. Now let's jump back into the code editor and maybe we can just comment this out and I'm gonna make some space. The first thing that I want to look into is containers. If we click on containers from here you'll be able to see already how we can use the breakpoints. For example we have a normal container here and then if you wish to attach a breakpoint to it you just put a dash in the breakpoint. That's pretty much it and here on the right side you can see how the container is actually behaving. So if we put container dash fluid this is always going to be 100% on all screens but if we put container dash xxl is going to be fluid for most screens except the extra extra large and so on. So let's have a look at how this behaves. So inside here I'm going to create a container by doing dot container press enter and then inside here we can just type something and by the way I do want to mention that this can be attached to pretty much any html file element. You don't have to just use divs inside here we have a container and I am zooming quite a bit so you won't be able to see properly and also it's kind of hard to tell. So what I'm going to do is I'm going to create a style sheet super quickly inside here of course I can link another style sheet inside here from our folder and what I'm going to do is put dot container and then for the container all I want to do is swap the background color to aqua and then maybe we can give it a border or one pixel dark blue and then dash just like so it will be a little bit easier to see. Now on mobile screen as you can see the container takes the full weight of the browser. We do have some space on the left side and the right side and this can be very useful so your content doesn't touch the side but of course you can amend this if you wish to. Now if I go to the desktop view here you will see how the container is behaving after a certain size here it no longer extends and this is because I'm using the standard container which is here it goes 100% of small screens and then after this it changes the size based on the breakpoint. So if I go down you should see how it changes the size which is pretty cool. Now of course I can change this to fluid and I'll have to add a here as well and now if we go back to the browser you'll see that this is always 100% and this is pretty much how you're going to be using the breakpoint throughout bush trap and I'm going to show you more examples right now. And just to mention containers are normally used to wrap sections of your website or you can even wrap the entire website in a container so it stays in the middle. Now we're going to look into the grid system when I say grid system I don't mean CSS grid is basically columns and rows but they are very powerful because they use flexbox as a default bush trap has a 12 column grid system but that doesn't mean that you can't use more than 12 columns and I'm going to show you what I mean now. So to start with we're going to look into the auto layout columns. So if you click on this you will see how it works in here they have examples but let's jump into vgstd code. Now inside here inside our container we can create another div with the class name of row. Inside row is normally where you would have your columns so you would create a row and then you would create a column like so and I can just put call and you'll see it. So this column you might not be able to tell but it takes the full width available and what I'm going to do inside here I'm also going to add row row and then each div inside the row to be highlighted. So it's going to be hard to see just yet but if I duplicate this column one more time so all chipped down save you will see that these columns are taking equal width automatically. So these are auto layout columns it doesn't really matter that the bootstrap grid system has 12 columns we can add as many as we want like so and they're just going to take the available space but look what happens when we add a couple more. As you can see when we don't have any available space the auto layout columns just go underneath and they just stack like so and then on the second line they're taking the available space nicely and if I go to the big screen here you will see how they behave also so on big screen they fit nicely which is fine and then if we go down at some point they're going to stack underneath here we go and that's how the auto columns behave which can be pretty useful. Now with that said sometimes you want to have equal width and in your layout you might end up doing something like this for example you might have a row with two columns that have equal width and then you can copy this row have another row with three columns and that would be absolutely fine as well and now if I go to the desktop view you will see how they behave everything behaves just as normal. Of course there are a lot of utility tags that you can use in order to align things for example the easiest one to tell you is the text the center and this will align the text in the center and I can copy this for the second row as well and just like that we have everything in the center. Now let's have a look at setting up column width so from time to time you might want to have a column at a certain size this column here I want to have it as two so it takes two columns of the 12 column grid system and if I save this you will see that here we're taking two columns and then the second column which is auto column basically it takes the available space if I go on desktop you will see that obviously it's a lot larger like so and that's how it behaves and I can definitely change this to four for example and as you can see it becomes bigger five six and so on so you have 12 numbers here that you can mess around with but if I say if I put eight here you will see now we have only two available so this is taking the two available but let's say if I want this one to be four boom that will work because eight plus four is 12 and that will work but if I want to make this one a little bit bigger let's say six for example now we won't have the available space and this is going to break on another line and this is how the 12 column grid system works so in this case we can save six and six and they will stack next to each other on all screens now let's make those variable so what I mean by this is let's add a breakpoint so for example if we start from mobile first both of those are auto layout and they're taking equal width but let's say I want to change this on medium screens only I can do call dash md which is the medium breakpoint and then I can change the size for example four now look what happens if I go to the big screen here and if I extend it you will see that when we hit the breakpoint of medium screens at some point here this is only going to take four columns of the available 12 as you can see and then after this it's just going to continue but let's say we want to change it one more time so when we hit larger screens I'm going to do lg for large maybe we can take eight just so we can see the difference now if I go back to the desktop view you will see that we're getting fluid then on medium screens we are taking four and now on large screens at some point we're taking eight columns which is amazing so this is how you can mess around with the responsive web design and as long as you think mobile first it actually makes it really easy and that's it of course you can change this one as well let's say on medium screens call medium this can be two and on call large this can be four and now let's have a look if I go here you will see how they behave at some point here this is four and this is two so we have a lot of available space inside here now the reason I'm showing you this is because those rows are actually flexbox which means that we can align elements however we like so we can definitely justify those elements in the middle if we wish to for example we can do this here justify content center and if I go back to desktop you will see that these elements are now justified in the center and just like that we can also use align to push them in the middle of the box if we wish to but at the moment I have no space around so I would have to put height on this pretty much you know to push them in the middle and one thing that I want to mention is that if you notice earlier for example if I put column medium of two this is going to follow from medium and up and it's always going to be two so if I go on the big screen here as you can see it doesn't matter how big the screen is this is always going to be two and that's pretty much it of course you can mix and match those things to make your layout work and the next thing that I want to show you is row columns for example on this row here we have three columns but what you can do is you can put row dash calls and then set a specific number for example we have three columns in here but I can set this row to explicitly have only two columns like so and now as you can see we have two columns even though that I can add a few more we only have two columns the same way I can say three we have three columns which is pretty cool and the last thing I want to show you is that you can definitely nest rows into columns so for example I can copy this it might not look pretty but I can definitely nest it inside here I can paste it and we have a column and inside this column we can split the column into two other columns like so and that's pretty cool for the alignment as I said earlier you can use justify or align and then you can do content center and start you can do content start center and around between evenly and so on for example on this one here we can say between and if I go on big screen you'll see that this column stays on the left side and this one stays on the right side so if you're familiar with flexbox this is pretty self-explanatory and you can do the same thing with alignment now the other thing that you might end up using quite a lot is padding margin and goodness so padding is fairly easy to do I'm going to remove this super quickly and so we have a little more space and for padding basically you want to use p that stands for padding and then you have a couple of options for example padding top padding right padding left and padding bottom and then you can put a number so if I put padding top four it pushes my row at the top and I can do the same thing of padding bottom of four and this will push the bottom now there are also ways of doing it on the x axis and the y axis and for this it will be padding y and then four and now if I remove this this will be exactly the same thing because it pushes the padding on the x axis so top and bottom and I can do the same thing for the x which is left and right and as you can see we have four four now if you can see but we have a little bit of space in here the same thing goes for the margin instead of p you'd use m for margin and now we have margin on the left side and the right side and if you wish to you can have margin y like so or you can put margin top only and this will change so you just have to mess around a little bit to get used to it and that's pretty much yeah now for the rows exactly the same thing you can also use gutters and to use gutters you will put g and then for example gx and then five and this will push I'm not sure if you can see but if I go on desktop view you will see that this pushes let me zoom in a little bit this pushes the columns here on the left side here and this is because of the gutters if I was to do gutters on the y-axis you'll probably see that it changes here and another thing that we can do is if you put gutters to the x-axis and they are outside here you can actually put overflow hidden on the container here if you wish to which is another utility tool and now if you look at the document you'll see that the line doesn't go outside and the same thing goes for vertical gutters instead of x you just use y and that's it and for both you'll just remove the y you just have gutters dash and a number and I'll do it for both top and bottom like so and that goes through the padding and margin as well and of course you can apply different breakpoints for different margins gutters paddings and so on by doing for example and four large screens for example we can do gutter large screens and then maybe five and dash it also make a change I'm not sure if you'll be able to see now but it will make a change almost it should make a change on large screens so if I remove this I think it does make a change but yeah it's kind of hard to see but you get the point of how to do the breakpoints and the last thing that I wanted to show you here is that you can change the background colors to them of course you can just go to a column and you can just do background of primary and that will change the color I can do the same for the other column so background danger and that will change the color as well and we can do text I don't know white and then that would also change the text color as well so these are utility tools that you can find in the documentation and mess around with in this section we'll look at components super quickly and components are basically designed to help developers build consistent responsive and visually appealing web applications without having to start from scratch and we have a wide range of components that are commonly found in web interfaces for example let's pick button here and if you look into the documentation they have a lot of examples let's jump into visual studio code and have a look at some of them so I'm going to comment this out super quickly and create some buttons here so we are starting blank to create a button you can start with a button and each button has a default class of btn as the very minimum this button is going to have the type of button and then we could just put button as the text so this is a very basic button here now if you wish to change the color of button you'll do btn primary for example obviously you can use the colors available you can use for example secondary and so on now those button classes can be used on pretty much anything that you need for example you might end up using it on links so you do class btn and maybe btn primary and then from here you'd have the href because this is a link I'm going to have it as empty link we'll have the row for accessibility as button and then inside here you put your link like so and just like that we have a link that looks like a button obviously it looks a lot better when it's zoomed out the other thing that I wanted to show you is that buttons have different variations for example if I was to copy this we can have an outline so I can put dash outline and just like so oh I think it's outline yep it's outline instead and then just like so we can have outline buttons and I can put it as danger this one for example and as you can see it changes the color you can also put it as disabled and as you can see this looks disabled and if I hover over it you'll see that the cursor doesn't change and it looks like the button is disabled which is pretty cool you can also change the size of buttons for example you can do btn dash large and now this will become a lot larger or you can change to be small and it will become a lot smaller than the rest of course you can put custom styling on each element if you wish to and that's it all right super quickly just to show you another component let's look into model of course I'm not going to be able to go through every single one but this one uses javascript and that's why I wanted to show you something different so what we can do from here I can either use the bush trap documentation and copy one that I like from here they have pretty much everything that you need so I can definitely copy this one here and paste it or you can use the extension that I showed you earlier and for example let's say that put bush trap dash model and from here we have model toggle default and so on so I'm going to put the toggle one and this is going to bring all the code for us if I save this you'll see that we have open first model and if I click on it we have a working model now one thing that I want to demonstrate is that if I was to remove the javascript from here this will not work so I'll save it click on it and as you can see it does not work so you do need the javascript to enable the interactivity and if I go on big screen somewhere around here and if I let's remove this super quickly and if I click on open first model button you'll see that it looks super nice it has a really nice animation and it all works just like that you can go through the components for the most part is pretty much a copy and page job they have a lot of examples and that should save you a lot of time having to recreate some of them and also I don't want to mention that all of them are customizable you can just apply any classes to them now if you wish to apply custom classes to something you can just create a normal class here for example custom button and then I'm not really and then I'm not really sure what to do about this one but let's say border of two pixel solid red like so and now I can add this class name to pretty much any element here let's say the the first one here and now you will see that we're applying a custom class name and just like that you can create your own custom class names or your own custom components and changed with the cdn one thing that you might want to do for example is to change the topography so if I was to uncover the topography super quickly just so we have something on the screen here one thing to change that topography is to override the bootstrap variables so if I was to go on big screen so if I was to go on the big screen here and if I right click inspect click on the html here and here on the right side and the styles you should be able to see all of the available variables now you can actually use those to change stuff in your layout for example I can use this variable here I can go back and instead of putting solid red I can just use variable and then put the variable name and this will change it to orange I'm not sure if you can see but it changes to orange which is great so we can definitely use them and just like that also if you score down a little bit more you might be able to see the bootstrap font sans serif this is what he uses at the moment and we can override this so if I copy this and in order to override this you would normally do something like this so you do root you put the variable name and then you put the font that you want so obviously sometimes you might want to download the font from our google font or Adobe font and you write the name here so I'll put a real and before I save it let's have it here on the right side so we can see the difference and now I'm going to save it and as you can tell it changes the font here super quickly and if we put poppins it should change it also because I think that I have poppins installed on my machine that's why and just like that you can all write elements if you wish to in this section we're gonna install bootstrap locally using vit so navigate to getbootstrap.com and click on read the docs from here we have the vit option here under get started so click on that and as you can see we have some other options such as parcel webpack and so on so there are multiple ways of installing bootstrap locally so I'm going to put this on the right side and this process is going to be a lot more involved than using the cdn so this is one of the downsides if I scroll down a little bit from here you will see the setup let's open power shell or terminal on our desktop so I'm going to do left shift right click and open in terminal if you're using mac or linux you can simply use the cd command to navigate to the folder that you wish to install your project in and as of currently I'm just using my desktop so in this case I'm going to grab the first code which is gonna create a project folder code my project and it's going to cd to that project folder so right click and press enter this creates the folder here on the top left corner as you can see and now we need to initialize a new npm project right click paste the code and this will create a package.json file inside the folder the next thing that we need to do is install with it so copy this right click to paste there and press enter then we need to install bootstrap so I'm going to copy this right click press enter and we need to install the additional dependencies copy right click and enter from here we need to create our project structure now since I'm using power shell I might not be able to do this unless there is a way but it's a little bit more involved so I think that it will be easier to just open my project folder in vgstd code and create those manually if you're using linux or mac you might be able to do this but let's do them manually anyway so since I'm cd to this project folder I can just do code dot and this will open vgstd code for me here on the left side I have the project and now let's have a look at the project folder so we need to create the folder source from here I'm going to create a new folder source and inside this source folder we need a js folder so js and we need one more which is going to be scss scss and that's it from here we need to inside the source folder we need to create index.html file copy and then let's do index.html from here we need to create main.js inside the js folder like so and then in the scss folder we need to create style.scss so here we go drop down and the last one that we need to create is vit.config.js and that's outside the belief yeah so that's going to be outside the source folder here we go and that's it so this is how our project should look like okay let's configure or vit so we need to open vit.config.js that we just created and paste the following code it's the same code here it's kind of hard to see because I've zoomed in quite a bit but it's the same code here that I'm pasting save and close this next we need to go into the index.html and copy some HTML5 so I'm going to paste this in here save that's absolutely fine now we need an nps script to run vit okay so under package.json here we have all scripts and essentially we just need to start script in this case because we've already got the test script so I'm going to copy this make sure that you have the comma at the bottom at the end and paste it inside here save this one as well and finally we can start vit by doing npm start awesome so we're essentially using this to start vit and we should get this result hopefully let's open the terminal inside here so terminal and then new terminal it's kind of hard to see and I'm just gonna paste npm start here we go npm start it looks a bit hot but that's npm start and now this creates a local host for this which we can visit hopefully if you hold control and press on it this will open local host of 8080 and here we go we have our project working which is great if I was to go to the index.html file and change to yellow one two three save it it automatically refreshes the browser which is amazing and it's super fast brilliant now let's have a look at at the rest of the step we need to also import bootstrap so this is going to go inside the scss style.scss copy this and this is going to be in here here and we paste it save okay next we need to load the scss and import bootstrap javascript okay so this is going to be inside main.js inside here and we paste okay brilliant and then the last thing you can also import javascript plugins individually yep you can also import them individually if you wish to but here in this example I'm gonna import absolutely everything and I give you an example as well also and you're done so now if I save this and if I go back you'll see that the button has come up and all bootstrap application is fully working which is amazing if I was to scale this down and just so we can see a little bit better super hard inside here you can see your terminal that everything is going well I'm gonna try to minimize this without closing obviously that needs to run in the background and now we can mess around with it just test it yep everything seems to be working now let's close everything and let's focus on the styles.scss now the reason that I'm showing you this way is because if you install bootstrap locally now you can customize pretty much anything that you want let me show you what I mean for example whatever you pick from bootstrap you can go and customize let's pick the topography for example so early in this tutorial we looked at the topography and let's have a look when you scroll down here we go we have the display headings here and just underneath them we have variables.scss so essentially we can override anything that we want and modify the bootstrap the way we want if you find anything that you want to modify from components you can go to them let's say alerts and then somewhere at the bottom you will find the variables that you can modify so these variables let me show you a few examples variables are usually modified above bootstrap for example if I wanted to change the background color there is a variable of that so it will be body-bg and then you can put your color let's say we wanted to make it black and just like that if you say this will compile and then change the background to black you can also change all of the colors such as the primary, secondary, danger and so on for example let's say primary the primary color as default is this blue color here so let's say we want to change it to an orange color I don't know ff4136 like that and save and now in a second yep when it compiles then as you can see it changes the primary color to this orange color and let me zoom in just like that you can go to the topography and change the font size as well so I believe that this is an h1 let me check it out so we have an h1 in here let's create an h2 just for this example save it so we have two fonts here and maybe we can give it a class name of text white if you wish to and we can do this for the other one now let's go back and let's see whether we can modify them so for the fonts you have h1 and in font size these are all these variables are listed under topography you can find them there and now I can literally put seven ram or whatever size you want and this should change it takes a second for me but here we go it changed and it's looking good I can do the same for h2 and maybe set put this to six ram and now this should change as well just like so so you can modify pretty much anything that you like and just to give you an example of something else let's say you want to change let's say you want to modify a card let's copy this card super quickly or instead you can use your bush trap extension here so somewhere around here I can just say bs dash card and then I'm not really sure which one I want really I really don't know which one it is maybe card background let's have a look at this one okay so we're getting a card with a background here obviously I don't have an image maybe I can insert one super quickly inside source img and then if I open this I will paste an image of a cat.jpeg okay so now if I was to change the image here let me do a view well wrap and here we go we can do img cat.jpeg will this work here we go yeah the cat works which is great and now obviously this card has a primary background color which we've changed in that scss here but what I wanted to show you is that underneath each component if you scroll down I mean in this case you're gonna have to scroll down quite a bit let's go to the bottom and underneath here you will see all of the variables that you can change and for example you can change the spacer x spacer y title spacing you can change the title color and so on so let's say that I wanted to change the card title color to be something else I'm gonna copy this go back and just like the previous variables I'm gonna copy this and from here we can paste the variable and change the color to literally whatever we like and maybe we can just put blue for now and save this will take a second and as you can see we have officially changed the card title to the color blue and this card can be reused through the entire website and you'll have the same style and before we finish with this video I just wanted to show you that the JavaScript also works we have inserted the JavaScript in here but what I was gonna show you is that if I put something that requires JavaScript for example bootstrap modal toggle that will require JavaScript if I save this one and then if I click on it you will see that the modal works obviously it looks a little bit ugly because I messed up all the colors in here let me comment them out and now it's gonna look a little bit better here we go everything is back to default and the modal is working that's gonna be pretty much everything from this tutorial I hope that you found it useful if you found this video useful like this video consider subscribing to my channel and as always thank you very much for watching