Bootstrap CSS Framework - Full Course for Beginners

Key Takeaways

bootstrap is the most popular CSS framework and it makes it easier to build great-looking websites David teaches this course and he has a bunch of experience in bootstrap and even help create a popular bootstrap Library hey YouTube my name is David and today I prepared for you a crash course for bootstrap 5 so the most common front and framework used around the world um I'm a co-founder of MD bootstrap.css best people to teach you that because what MDB is is actually um material design connected with bootstrap so we've created uh open source Library where we actually use bootstrap 5 and we've been doing this for 5 years already uh we started back in 2015 when the bootstrap 3 was the current version then we migrate to bootstrap 4 and now obviously we are using bootstrap 5 uh so once you finish that crash course you might be interested in checking this out out uh because as I said this is the library where we decide to um connect material design from Google so the specific design which comes from Google Apps uh with the bootstrap so yeah we have a hell lot of experience in that uh what we're going to cover in this uh video uh what bootstrap actually is uh just in a few words because you're going to see this on the real examples then I'm going to guide you through the installation and the set setup so how to start working with it there are going to be a few ways how you can add the bootstop to your project then we're going to cover the most imported part which is a grid system so um this would make uh bootstop so famous and we'll be also um using and learning how to use a different components and finally at the end of the video I'm going to show you how to build a page from scratch using uh bootstrap so what the bootstrap is a long story short is the most popular frontend framework uh around the globe now so let me give you some numbers in 2013 bootstrap run 1.6 uh% of top million sites then back in 2016 Boop run already 15% in 2018 it was already 18% and nowadays it's more than 20% uh around the globe so it's a huge number it's really really widely used library and uh there is this um page which is called bill with which gives bootstrap a 72% of share of the framework Market So within all the pages which are utilizing any Frameworks bura has 72% of it so I believe this is a good reason uh to know bootstrap uh why should you use bootstrap well there are many many different reasons why to do it but obviously that increase your development speed so if you use the existing components like you've seen um on the screen before uh you've going to just save a lot of time you could create all of that by yourself but there's no point because it's been created for you and it's been tested by the millions of different developers um responsiveness this is what made bootstrap actually so famous so now it's obvious when you create a page it has to be responsive but back in the days in 2015 that wasn't that obvious and bootstrap grid was the reval tool which changed a lot in the web development um obviously uh when you are a developer uh if you use library that prevent you from repetition so you don't write pretty much the same code in a different ways for different projects um so that gives you that adds the consistency to your project because just reusing the same code uh bootstrap take carees of the browser cons bootstrap take cares about the browser compatibility uh and I think it has the one of the largest community in the world so if you have any issue with it or if you don't know how to do it simply you know search for it Google for it or just ask question on one of the one of the you know Facebook groups or or stock overflow and then you're going to get answer very very quickly and finally uh you can customize it to your needs so these are the components which are there and we will be going through most of them so we're going to put our hands on the keyboard and we're going to start um using them uh so we're going to just um create something out of it so yeah I mean with without further Ado let's jump into installation in order to install bootstrap we need to navigate to get bootstrap.css uh you can also use CDN or you can simply download it so I'm going to show you all three uh options so let's start with the download op option so I'm going to hit uh download button that's going to redirect me to this page obviously it might look a little bit different because um bootstop is continuously updating the uh documentation uh however it looks more like this and now once we are on the uh download uh page let's hit this download compile CSS and JS and let's save it so just going to store it on my hard drive and then let's go to to this this folder and let's unzip it to the destination of our choice so I'm going to put it over here let's uh wait a second to unzip it so as you can see it will contain CSS and JS so let's um oh actually let's uh leave it like this now what I'm going to do I'm going to open uh the um project in the visual studio code okay and let's create a new file so I'm going to hit new file inex HTML now I'm going to type exclamation mark and press stop this is what EMT does if you are not familiar with EMT please check tutorials on that because I will be using this uh I will also explain how to do it but I strongly encourage you to get familiar with it because it's going to speed up your development and actually um one way of doing of using or speeding up this development is to use uh is it like this so instead of typing the um the full formula for linking the CSS and JS I'm going to just type link and press stop and that's going to give me this um this stack pre-filled and I'm just going to say CSS slash and I'm going to search for bootstrap CSS file so that's going to load the CSS and the same for the body uh for the GS um before the ending uh body tag so I'm going to type script source and then hit Tab and I'm going to do the same so JS SL bootstrap bootstrap um JS now if you want to load just the bootstrap JS you need to uh remember also to um to install or to add uh poer if you want to like uh if you want to use it because bootstrap depends on uh on on the poer JS so you need to go to poer JS web page and then either download it or or load it via CDN uh but just to show you um that it's working let's create H1 hello bootstrap word and let's open this in with the live server so this should open the browser now and it will um you can already see for those who are familiar with bootstrap the font has changed already this is the default bootstrap font but let's check the console where we're going to see that our bootstrap has been actually loaded by the way I've just opened this console this is part of web developer tools uh I did it with pressing combination of control shift I uh but you can also uh do it from here so click on the menu uh those three lines over here this hamburger so-called and then go to more tools and developer tool so that's how you can open or close it and now we can see the error here but this is regarding the fav icon which browser tries to load so the icon which is showed over here obviously we don't have any so we can skip this warning and now if we go to a network Tab and refresh our page again we're going to see uh all the requests which our page is doing so obviously except for the index HTML so the file itself the HTML file which we just created we can also see that bootstop CSS and bootstop JS has been loaded successfully now as I mentioned before if we would like to use for example pop over um component which relies on popper dependency we would have to also add poer JS here so before loading the bootstrap JS or there is the other option so instead of loading uh bootstrap JS uh we can also uh do it uh by loading the bundle so the bundle contains all the dependencies right so if you don't want to and the separate dependency over here uh you can simply load bundle instead now this is the the most basic way of start using bootp so by downloading the source file now let's move to the the next option if you don't want to download and move and zip files to your project manually there is a faster way to do it so let's see how we can start using boot drop um using CDN um and then again there are two options so here we uh we can have option with the um bundled uh JS which um contains all the dependencies or we can use the separate option where we have the bootstrap loaded separately and poer uh as well so let's see how it works um let's create a new folder here and let's call it CDN let's open this in um Visual Studio code let's create new file index.html exclamation mark tab that's going to create the basic structure and now let's just copy uh first the CSS and place it within our head and now let's copy the bundled version down below the body and then again let's add H1 um hello world CDL world let's say and let's open this with view live server and you can also see that this is working fine let's open console to verify refresh and we have bootstrap CSS and uh bootp bundle meanjs uh and as I mentioned uh instead of this single line over here we could also use two entries for the uh poer and the boot drop separately so let's save it let's check whether it's working fine and now you can see that the popper is being loaded separately okay now let's move to the next installation option uh which is npm so for those of you who are uh creating your project with the use of the package managers like npm or yarn probably that's going to be the easiest way to um add boost drop to your project so I'm going to show you how to do that so let's create new folder uh npm let's open this with um uh Visual Studio code and and let's quickly initialize the empty npm project if you're not familiar with npm I strongly encourage you to watch uh some of the tutorials on how to use npm because that uh uh definitely going to speed up your development and with use of Frameworks like react viewer and angular this is kind of Basics um or basic knowledge is so uh it's it's very wise to to be familiar with it so let's do npm init to initialize a new project is going to ask a couple of question uh so uh the project name let's call it bootstrap npm and then let's just um accept all the other default values we could um we could decide upon description entry point and few other options which are not rant at this moment that's going to create us packet Json file which all the settings and now again let's create index.html file and what we're going to do now we're going to install the dependency so use npm install uh bootstrap which going to uh install all the dependencies under node modules so as you can see we have now note modules boost drop and then we have Js CSS scss uh so for those of you who want to um somehow customize the boot drop probably this would be uh the way to work with so linking the scss uh we will be using this so let's uh Now link our um our uh dependencies here so again in hat uh let's do link and now we need to say note modules bootstrap dist CSS and then bootstrap CSS we can also use mean uh so minimize version of CSS and for the body we're going to do exactly the same so link oh no script source and then go to note modules bootstrap dist J JS this time and bootstrap bundle JS so this will give us um again bootstrap plus the dependencies so let's do H1 hello npm word and let's open this in live server so you can see already the font is there and let's refresh Network so we have bootstop CSS and bundle if you don't want to use the bundle uh but install the poer separate you can obviously do it so just type npm install at poer JSC cor minus minus save and that will uh store it in under note modules so now you will see two folders here so poer and bootstop and obviously you can link it now to uh your project okay so if you want to understand why botr become so famous we have to start with the the grid system because this was the real game changer back in the days um and uh before we start learning because before I'm going to show you uh how to start using this in your projects in your website um let me start um perhaps with uh some demo uh so you would better understand so um I've got three examples here for you um so to to give you uh some insight to some feeling uh what this grid and what this bootstrap is about and why uh so many people in website use it uh let's have a look at the following example so the the whole uh thing about the responsiveness is that the content should adjust to uh the screen of the size which you are using so you shouldn't prepare like two different version of the page the same page for different devices like mobile and desktop which have one which will simply behave like a water which depending on what you pour it into it will just you know use H the whole space available for it so um the bootstrap uses uh the bootstrap GD um uses columns to to to achieve that goal and what you can see here this is like the very basic example so on the big screen when we have a plenty of of space we can easily um fit this uh main content here and the sidebar on the right side right we have a full screen we we have enough space we could even make it a bigger larger but however what's going to happen when we start shrinking this uh you're going to see that at certain point of time there is not enough space for you know the entire content to fit in right it becomes smaller and smaller and smaller and if you have a lot of content over here um you might end up in situation is just not enough right if you if you go to the to the even smaller then what's going to happen thanks to bootstrap is they going to stack one below each other so um if you open uh web developer console and use this mobile uh option you can choose one of the predefined uh screen size so for example we're going to check for iPhone SE and then you will see how this actually looks on on the phone right so uh you can also check some tablets I believe here um yeah even on the nest Google Nest Hub so this is more of like a tablet uh view uh so this allows us to create very complex structure like this one so imagine the page you have some magazine or whatsoever with some sidebar header footer and so on and thanks to bootstrap you can make it to behave differently on a different screen so not sure if you notice that as that that some of them some of them they simply disappeared right so our sidebar is just gone so you can not only reorder things depending on the screen size but also uh make them visible or invisible at the certain screen sizes and uh finally this last example um hopefully explain will explain to you the concept of this columns so what bootstrap does how does it work is that bootstrap uh uses a rows and a columns and within each row you have 12 units to use to spare um so you can use them as you like if you want to uh spend the whole 12 units the units of wi um on the single row or on the single column right so you want this main content to be the full to have the full wi you are free to do so you can just set that okay this column will take 12 units however you can obviously divide it differently and use different proportion so this example here how does it work and what you see here this double XL XL large medium SM these are the screen size and we're going to cover them just in a second so this is what you have to get familiar with so bootstrap defines a different break points so um these are like this kind of you know areas that we can Define that the extra small are the mobile phones small uh between small and medium it's something I don't know for example uh a huge phones or the phones with the larger screen like couple of inches then the medium could be tablet and the large is going to be like desktop and so on um so you can Define the size of your column for each and every screen size that's what we can see over here so um this column has multiple Properties or actually you could say multiple with assigned to with so where we are currently at now is this size so it's double uh large so this is for the screens which are bigger than 1400 pixels and obviously this is bigger so if you check it here it shows that we are now at 1600 but see what's going to happen if we start shrinking below this break point right so uh I defined that I want this column to have the unit of one and that's why so we can fit 12 columns next to each other right we have 1 2 3 4 5 6 7 8 9 10 11 12 now what's going to happen if I start shrinking the screen and I'm going to reach the the break point all of the sudden the the the size of the column has changed and now the second size has been applied so now each of the column um has size of two units so and now obviously because as you remember as we said this is 12 in total we can fit only six columns next to each other and that's what happened here right so have 1 2 3 4 5 six and another six has just been wrapped let's continue and let's uh continue shrinking the screen and then we when once we reach the next one uh the next break point we are falling into this uh rule oh this size which is three now obviously if we have size of three we can just fit four because four * 3 gives us 12 and then if I continue shrinking that I'm going to get into next one which is now call md4 which means each column has size of four so we can fit three if I continue shrinking I will go into size sm6 which means each of this has six and finally at the smallest screen each of the column will take the full available with for uh the screen so this is how it was designed this is how this uh is so amazing so uh yeah let's see uh let's see let's learn how to use this boot bootstrap grid now so starting with breakpoints uh I already told you how does it work so um bootp uh comes with predefined breakpoints um so you have six of them and this break points are usually you know they adjusted to the most common screen so um you can customize them if you want you can change it uh however I think I think it would be just wise to go with the default value now um one we we will be doing some coding in a second uh so I want you to understand that this grid consists of three um elements so what we always need if you want to start using this is Grid it's a row and these are columns one or multiple so we do start with uh the container so the container is going to be the um the very first element which we which we need which require if we want to work start working with the um bootstrap GD and um so let's start here um I have the starting template here with just loaded p drop CSS and JS and let's um let's create a container here so we could see how does it work and some content and let's add I'm going to add class border and let's open this up okay so this is our container as you can see it has some margins from the left and from the right side so this is very first thing you should know so if you want to use the container to to use the full WID so you would have your columns starting from very left you should use something called container fluid and what it does it will make use the whole wave available here however you can also do something which is called uh container combined with the with the breako so if you want to mix it so depending on the screen you want your um container uh behave differently you can obviously and easily do this with uh bootstrap so what you're going to see here is this is container however when we start shrinking and we go below below the medium break point then all of the sudden the containers start behaving like a container fluid right so you can simply say that you want to uh have the container fluid up till until certain breakpoint for example large so if you can see uh from this table right so this uh it's going to have the 100% until this resolution this screen size is mad so this is the very first thing it's container now let's move to grid so the grid um consist of rows and eal row there's not much special about rows um so uh let me just um use a bit of CSS here I'm going to add some Styles which going to help us to see the column so uh we're going to see them uh with your own eyes so I'm going to do something like this and let's start with this very basic example so as I said um within our container we want to use a row and inside our row I want to use columns so you can use something as simple as call so I have two columns now and let's just say call One Call two let's see how does it look like so now you see actually maybe maybe you don't see this yet uh but if we go to inspector you will see that this is our row and this is container so container is a little bit wider and then we have a row here um usually you have you can have multiple rows here uh but what is really interesting are this columns and I'm going to show example uh in a second with uh few rows uh but what's going on here now if we use just the column um bootstrap will basically uh do the calculation do the math and it will automatically um assign the proper wave for each column which means that if I'm going to give you more columns it will calculate the with and it was going to use the equal values for each right now if I want to have more obviously I can just have more rows with multiple columns um you can also have um more columns within single row but probably you are uh thinking or you might be asking now okay what if I want to use a specific size for a different column and there is nothing um easier than that so um again uh break points um comes to the picture and we can use uh we can use columns uh of a given size and I'm going to show you two different options here so let's get back to our code here let's get rid of this one and now let's do one thing we can do strictly with with saying just call six or let's do something else because six is equal so let's do call four and call four so what's going to happen as you can see we said that this should have width of four and this also should have a width of four units and now if we add another column here let's call it auto boot drop will obviously automatically uh fill up the this um remaining space and we can play with it to achieve different results right now um this is however not um as flexible I mean sometimes you want to use it because you want to uh you want your columns to always have the same size depending I mean regardless of the of the screen size so that's possible however more often you will actually use uh variable uh with content which means that um except for providing the size you will also want to provide the break point what does it mean let let me show you that quickly so if you do call MD and now 8 plus MD 4 you're going to see that we have this nice 8 and four distinction here however when we start shrinking your screen below medium what's going to happen is that our calls will take the full wi of uh full width uh available within the container and now as you can also see our container MD uh is changing to the 100% if I stick it like this it will it will re keep the margins here available uh however uh those margins are gone below the certain level because basically assumes that if you are on mobile you you don't really want to have this margins and if you want and then you should just do an add them uh manually so um I hope you do understand now how does it work obviously you can first of all you can change this H to something else um so let's see let's do a large so this is one thing so now we're going to get full withd already on the medium size and we're going to get this ratio on the bigger size however the most important thing is that that you can also mix and match this like call MD I know let's say six and here six which means that we have now three use cases so a larger and larger than larger medium and smaller than medium right I hope you are getting this now so you can that's how you can create a very uh very very uh complex examples and the one uh let me show you quickly uh one from the um from the demo which I was showing you so this is the example with this columns uh having very um actually all the possible scenario right so we have the size for each and every screen size which allows us oops not this one this one which allows us to really really create um complex uh scenario where you will be just you know changing uh the size of uh all of them okay let's uh let's continue let's see what else we have I mean there are different options um for mixing uh these columns together um let's see and let's go through the most common uh ones so what you're probably going to need uh quite often is an alignment so let's have a look at this example okay and now we need to do uh order let's get rid of these two rows now for a second and now let's uh make it uh a little bit bigger so I'm just going to uh do this mon so now you can see that our row uh has some height because of some content which might be in there and if we want to align them to the top we basically say row align item start and then if you want to do it in Center we just do the center if you want to be aligned to the to the bottom we just say stop align items and um so this is this is the uh this is the alignment uh vertical alignment and obviously we also might want to have the horizontal alignment so uh coming back to this uh let's have this container arrow and then let's have Call of size two um and actually we want to have two of them one and a two and now if we want to justify them into the center we will do something like this this and this will justify them to the center right so regardless of um size they will be always uh aligned to the center and there are different options uh which you can obviously use here uh so you have around between uh and uh depending on the use case you would like to use okay and um let's move to gutters now um so the gutters are responsible for the um for the distance between the columns uh here uh so let uh let's use this following example hold on I'll just add this one hold this div is okay okay so here we have gutters and actually let me reset this so these are gutters and I'm going to add some um custom style here so you could see uh one more of thing because it's not uh easily visible so um within each column I have created also the extra div with the background so you you could see um how actually the content uh goes within within the div uh itself okay so before we start talking about the gutter um I need to explain one thing which is um used a lot within bootup basically when uh you've seen me using this uh margin right and I said m y what does it mean this mean that I want to have margin applied in the Y AIS so uh it's for the top and for the bottom if I would say MX what I'm talking about the left and the right and the same applies for the gutter right and by the way we don't use gutter on container we do it on row so let's start with setting this to zero okay so these are default uh SP spacing and then paddings and margins for the for the columns uh and and the grid bootst grid and now if we say g0 we going to set them to uh we're going to basically reset them to zero now if I let's see how is going to happen if I'm going to be changing this in the x axis what's going to change so this is one this is two this is three this is four and this is five so basically we are eliminating this um ping here from the left and the right let's say one and five right so this uh how you how you change uh this in the xaxis and let's do gy and then set from one three four and five so this um you need to understand what you need to understand is that GX or the gutter uh in the X position Works actually um uh here on this on the space between a column and a row and in the Y position it's actually working in between the columns here right so they they are wrapped up and they it's talking about the space over here which you can uh see on this example um obviously you could try to do it with the margin and ping utility which going to cover in a second however uh this is just the easier way which was introduced in um in the newest bootstrap to to work on the more uh complex scenario when you have multiple columns and want to you want to work and maintain the spacing in between them okay so let's move to the first component so I'm going to cover um the components from the most common one uh so let's start with uh buttons because we use them a lot you can also see them being used here on the bootstop docks page uh so um let me quickly open the workspace so created new folder for components so you can easily reuse my my code if you want if you want you can download it from the GitHub and so let me create new file for bons so I'm going to call it bons HTML and I'm just going to copy paste the uh basic setup okay and open this in the live server and now let's uh let's grab one of the buttons actually you know um the more you work with the bootstrap obviously the more you get f with it you will know this syntax by heart so if you start typing button and then add some classes like BTN and then the color we're going to talk about colors uh very soon but now for your information bootstrap comes with a predefined colors and it calls them like primary secondary success danger and so on and you can adjust these colors we're going to cover that a little bit later for now let's just use primary and let's uh use some do something like click me and let's how it looks like so you can see that you have this button start right so obviously um if you would go with the uh just simple button it looks like this and simply by adding this classes BTN and then color you are getting this size over here and you can see more of it over here so let's just add few more so we can see them right so these are different predefined buttons now bootp allows you to easily a adjust uh both color as well as size and few other properties uh so for example here we can see that butrum comes with the so-called outline buttons all right which uh which which have right here let's just let's just do it like here so I'm going to add the new uh I'm going to add the new row here so this container let me add another one so we could see them next to each other or one below the other so this is the primary and this primary outline secondary and so on and so on um here you see the light or actually you can see it so it's used uh in the certain uh circumstances um but other than than than just the outline uh we can also easily adjust the size of our button so in if we want to do the container uh by the way I'm going to add some classes here M5 we're going to learn about it as well as soon but this will give us some spacing cure um so if you want to do something larger like uh like the larger or smaller button we can simply use this B and large so let me just use this one here and the same for small so if we do BT and SM we're going to get the small and let's add just to compare all together let me just remove it so just call it regular button so you will see the difference right so this is large this is the regular and this is the small button so you can do it um you can also disable uh any button uh simply by adding the disabled uh property and then as you can see that's also going to be styled right so it's going to looks like um this there are a couple more so you can uh you have the block button so if you want to have the full W um you can use these block buttons uh and actually you know the button is commonly very commonly used uh within the boot drop because uh for example uh you can use it to to toggle state so as you can see here you have the active um so if I click on it it becomes active so you can see the color is changing and then if I click again and it um it is getting deactivated um and lots more because you also going to see um for example buttons being used as a dropdown for example uh like here um so it's really it's really wise to get familiar with with it um then there there are methods uh related to to buttons it's a little bit more advanced so uh we're going to leave it for for the later but one important thing regarding buttons is also that you can um like everything actually in bootstrap you can easily uh adjust it using or adjusting the variables which comes uh with the SAS with the Boop SAS F so uh if you want to change the generic look of the of of buttons or you want to create new ones you can also do it with the use of uh CSS next very commonly used components are cards so you're going to see them almost everywhere so uh let's see how they look um in uh the real world so here is the basic example uh by the way if you if you check the docks you can to see that it's like it's a really huge it's tremendous uh amount of uh examples which you can use with Bop so we're going to cover the most important one so let's start with the with the examples uh the basic example shows us the uh one of the very often seen cards so the card with the image title um and some kind of footer it's not exactly the footer but yeah let's let's call it this way I'm going to show you the real filter in a second so let's copy this one because this going to show us the issue with uh what you're going to face if you start using this for the very first time um let's add some image here so I'm going to use uh image pixel for that so this is very interesting um uh so service which allows you easily to uh use some images uh so you could uh have the real image and you can easily change sign so here we have 200 by 300 so uh let's see how it looks in our case so this is the card actually we didn't want like this we want it to have let's say 300 by 200 so something more like this one and add some spacing here um as you can see every time we refresh we are getting some random page so it's it's pretty cool to see this uh used it's kind of testing right because you can already see we have a different option um now talking about it let's um jump into the sizing so uh because here our uh card has a certain sign as you can see that this is because we added some St over here if we remove it um you're going to notice that if you want to start that was we going to do in a second if you start typing this uh just by hand right so if you just create this and at this uh class card which is actually making card looks like a card giving some borders um to it um you're going to notice that this going to happen so it's going to take the full W uh available um so how we can how we can um work of them let's go to sizing so there are a few options uh there so so first is obviously already known to you so if you use row and then you're going to add let's say call two in it and you're going to wrap up your card into it so you will be able to decide upon the size by using simply greed so depending on the column size you're going to get smaller or bigger card um then the next option here will be to use these uh utilities so let me uh get rid of uh this one or let's me go with the another row here and let's get this card again from here so let me copy this card entirely and paste it here and now it will take the whole H with available and now we can use uh the utility which we're going to cover uh but you can already learn this one which is uh w75 which stands for web 75% and you can see this example here I'm not sure if you can clearly see this this is uh this stands for 75% which is over here this one stands for 50% which stands over here so let's uh give it a try let's say 50% we want to have our card to fulfill the 50% of the space uh here um so this is the the the the second option and the third one you actually seen because we've been using this Ram uh before so let's just add it um for the sake of uh consistency so you would have all your cards um in all possible scenarios so let's add just Styles and now we have three uh of them um okay now let's get back to the to the basics so uh let's uh go uh with the new new row over here and let's do call three for the sizing let's see how the very basic uh basic card looks like so let's do just the card and let's do some low M5 let's give it here okay and let's add some actually you know what let me give it to the top right and let's m five and let's get this one to the top so we could easily see this one okay here okay so it's here on top so this how the uh how the how the card looks like uh so it doesn't look good yet but what we are going to get if we're going to add card body that's going to look much better than that than what we've got before and this this is already looking giving us some nice look it has some pings it has some margins so this is something which Sometimes some people call panel right so you could have those pents over uh here now what we can do uh we can add certain elements and this is very cool because um you can compose your cards from the sub element as you wish right so um if you want to if you want to add for example the image to to our card we can uh easily do that by adding this still within our card but above body we can add image with the class card image top and reuse our image here and this will automatically um link this image to our card um I'm going to skip the list groups for a second as you can see this these are uh kind of few panels connected to each other and let's move to the header and the footer section because that's what is interesting um so uh let's let me get the the another card over here and instead of the image let's use um a card um header so this is what we're going to add here so let's get rid of this image here and let's add um card header instead so this is our card header and it's going to add as nicely looking header now since we have header obviously we can add some footer as well so let's use example of this one actually let me just copy paste this one um so uh let's add it here here we have a text muted uh let's see how it looks without that first so here we have footer and if we add this text muted it just slightly mute this to make it less visible as this is the uh filter obviously and this is uh we don't want to see this uh like now screaming to our uh users right so this is how you work with that and I think you can have really nice um results using that let's have a look at predefined examples because they're going to give you also some idea of what you can achieve with that here are examples with cards within the navigation we're going to cover that in the navigation part um so here you have also the image examples and how to work with them uh but let's uh slightly uh move further to this example so here we have this horizontal card which looks really really nice so let me add another call over here so let's have call three let's past this example and let's just grab the image again however oh we don't have image here we have image here so um what we going to do here we're going to replace this image or actually this three dots with image now change the ratio so I'm going to have 200 by 300 100 now let's see how it looks I think it's too small so uh that's because probably here we would like to have it slightly bigger yeah now it looks better right so now we have 3 + 3 + 6 it's some to 12 it's good and here we have this horizontal card so I think it really looks nice um but other than that um we also have something which is called card groups so very often you will see and we also going to build it at the very end of this tutorial we're going to build a simple page um so you probably will see something like this when you have a page and then you have your blog and let's say you want to list like last three articles on the page you would see something like this so what you could do you could create like three columns um with the size of four so four plus four plus four or you could use card groups which would also looks nice so uh again um it's it's pretty much the same as the normal card right you have a cards here the only thing you have to remember is to add this class card group at the up so let's have a look at this one now so we have a row here and let's add a row another row with some margins in between and now let's uh replace this one with the image so I want to have this this this and that and I want to have this image here and this how it looks like I think it looks it looks really really nice so this is this uh this um card groups how they looks like and and as you can see there there are many many more here's the example of uh of the cards next to each other uh so obviously we're not going to cover all of that because there's U there's there's there's a lot examples but let's get back to few more examples because there're also interesting um you will probably see them in for example like admin dashboard so you can have this this card uh having different sty so you can reuse the same colors which you've seen uh when it comes to to buttons so uh simply by adding this classes like background primary to our card right so here we specified this is just a simple card let's have a look at this example um so let me add let's see what we have space here let's one two three let's add it here before below the card group so let's have another row and have call three and let's have this card here and let's get rid of this for a second so this is like normal basic card now right but if we start playing with the color so I'm going to revert this text White and the background primary what we're going to see is that it will change color to something like that so uh let's duplicate this one so we have call three 1 2 three so now we should have four cards 1 2 three four and let's change um colors of it so yeah I like this this dark one so let's go here and choose background dark and text white for the second one so I believe this is the first so this is the second one um by the way this MB stands for margin bottom so it's adding some margin uh margin on the on the bottom here uh don't worry we're going to cover margins um in a few seconds you can see now black one and yeah let's just do two more so let's say info with the text dark for the next one and for the last one let's say we want to have text wi and danger so this is the last card here and voila these are our cards and now again another row for last examples let me just copy them uh to make it faster so let's just do one two three and a four so this row let's paste it and these are examples of the outline uh cards by the way it doesn't work here let me see why no it actually does it just looks this way right no header hold on no something doesn't work here but probably because they have to be replaced with an a call not rope so here we're going to have them um yeah so these are these are border um with cards or cards with border um and different examples of it so as you can see there are plenty variation over here which you can use obviously you can also easily align them uh and play with it and like everything in bootstrap you can also work with with size variables to change for example the distances between cards or or or background color or anything like that um so yeah I mean I really like this uh component and and I've been using this a lot uh in my project so I strongly encourage you also to have a look because uh it's it's very very useful component okay now we'll jump to a different Cate which is uh content and exactly typography uh in bootstrap so let me uh quickly create new a folder to organize it slightly so now we'll move to content and I'm just going to grab the index so our template from uh components and let's open this in Visual Studio code okay so um bootstrap comes with um predefined styles for the for the um different uh types of typography so starting with headings uh let me just copy paste this one we also need to create new file here typography so this is one of the So-Cal utilities and bootstop have more of them um now I can uh paste it here oh I need to get this one and then I'm ready to put it within our container so let's have a row here and let's save it open and let's see what is interesting uh about the um about the heading and actually the whole typography is that like almost everything in bootstrap uh it is um responsive right so um let's check this element and let's see the computed Styles um computed Styles so let's have a look at the font size which is currently 3195 pixel however if I'm going to start adjusting the screen size you can see that this value is actually changing um so now it's 40 pixels and then if we shrink it it's going to become smaller uh to to what is it now 24 uh pixels so this is uh this is also very uh very useful while working with um with bootstrap because obviously uh it looks just better it adjust to the screen size now uh what bootstrap offers you as well is um the class which will make um the actually any element to look like the heading so there are situations there are situations where we don't really want to um have uh use H1 H2 for let's say different reasons like SEO um so uh let's say these are paragraphs looking like headings and if we just apply this classes like H1 H2 H3 we're going to get exactly the same look right so we have it here actually we can do it even better so let's do it like this so you could see the difference um so these are headings let's call them real headings and let's do call MD six two times and let's move this one inside First Column and this one into the other one so now we should see them side by side um let me close this one and slightly make it bigger so now you can see that they look um exactly the same uh so if you want for some reason to uh your whatever paragraph looked like a heading you can do it with use of uh this bootstop also comes with um uh this display heading so they are slightly bigger so if you really want to something to know stand out um to more visible you can do it with uh with these displays so let me just show you that so you use classes like display One display 2 and this will give you that result um what else uh obviously it comes with a lot of um inline text elements uh inline tags so we can highlight uh we can actually um cross out text you can ask why um why they are um like duplicated right so you have two for for this one right so H here you have this this text is meant to be treated as deleted and this line of text is meant to be treated as a long longer accurate um so the difference is actually semantics uh right so um for example in case of this s here it represents elements that are no longer relevant or no longer uh accurate while this one was deleted so so this is like a very very subtle difference um but this is what is it all about uh so yeah that might be new to you but they are different uh since HTML 5 this this really does matter so um you should carefully use it but other than that as you can see you have uh support for like you know uh making the Bold or uh you know highlighted text with the use of it so let me just add it to our um to our example so again we could um yeah let's have a new row here and let's have um just put it like this right so we're going to have all the examples uh in one place as always there are more um many more examples uh like abbrevation like block quotes um so maybe maybe let's have a closer look at the Block close uh as they might be useful for you so oh row so uh whenever we want to use block quote um let's do some paragraph and LM here so that's how would the uh normal looks like so doesn't really look different however if we add this cloud cl to it now it looks uh differently so this is the this is the example um over here so this is the basic block code however you can also use uh the more extended version with a footer right like here so we can add uh this this F caption uh with the class block code footer which will make it uh looks differently um so let's do this side by side call md6 actually I want to have two or maybe uh let's say even four oh I'm going to change the size I'm going to have three of them so the second one is with the footer and this one will be the basic one and then the one which shows you how you can actually align text with the use of the uh text alignment so uh we're going to check that here we can already see it by using text Center or as a class text Center on our element we can um we can change the alignment of the text so let's use the the last example here um right uh so let's just or I should do it this way just to show you how to do it by yourself so I'm just going to add to this procedure class text and and the reason uh the reason it's um it's end now is because uh and not right and left it's because uh since Boop 5 there is an support for Earth TL so from you know in in many countries we do read from from left to right so in your case it will be from left to right I believe um if you're watching me on the camera but obviously this is not the case for all the countries so in the in the Arabic countries uh it's the other way around so while they um added the support for the RTL they also had to change the naming because obviously left uh doesn't necessarily always means that so if you use RTL then then it could be confusing uh so now it start and end and you're going to see more on that uh when we go to the spacing utilities now let's just have a look how it looks like so here are our block quotes you can see them here and this one is aligned to the right side um finally um put stop offers you uh an option for the for the list uh so if for some reason you don't want your list uh to have any kind of you know dots or points um so uh you can use this list unstyled here so um yeah let's do it quickly so so we going to have UL with uh class list unstyled okay and inside that I want to have um Li um Li um with the content uh line number and we want to have like five of them oh no we want to have like five of those obviously um so now we're going to have this line over here and then again I'm going to quickly do new unorder list and with some numbers here align multiple by say three by the way if you're wondering what I'm doing I'm just using an AMT uh which allows me um to create easily the different amount of um elements simply by uh using this uh the shortcut so if you don't know that I strongly encourage you to check the tutorial on the EM because it's going to make your life much more easier uh why I did it uh like this I wanted to show you that this class applies only to the to the to the immediate chart of those um of an element you use it on so this sublines they already have Style again and then finally if you want to use uh in line so this is the case usually when you do some kind of navigation right so you want to have like a na bar right what they have over here for example this is the this that could be used or created with the use of of the list in line list so all the elements will be basically printed next to each other and no not one below the other so again call md6 multip by two times and I'm going to get this one from the documentation and I'm going to get grab that one from here and this will show us this next to each other I'm going to add some spacing later on for you uh so when you when you refer to this file let on uh you will clearly see so I'm going to add something like heading one um list Styles and maybe use Cutters or um y right so you'll have uh this separated so you can easily uh refer to it and and realize what we are actually talking about or maybe it's even better if I do it here yeah we give some space in between okay let's move move move on um so uh what is um also important to mention here is that as I mentioned you um uh at the beginning of the section um the fonts are responsive uh so uh this is cool but Boop went even further step further and they came with this responsive font sizing so RFS project so this is a separate project um and this you can find it on the GitHub um actually this is really cool because that allows you to change um not only the font size and that's how then they came up with the name right so originally they wanted to to adjust the font size depending on the screen size uh however now they they went uh even F because initially it was def developed to resize the fonts um but nowadays um s is capable of rescaling actually you know basically every uh value of NSS property with units like you know margin paddings border radius and so on and so on um so let me just show you quick demo over here so if you if you if you watch carefully you're going to see that when the screen resizes over here also the different um and different things are changing here so not only the phone size but also ping and and margins and this this this make it uh you know to look um much better for example on on the very big screens uh like you know 4K now we not going to go into this one because it's a separate project uh but uh I think it's it's worth to to just just just uh be aware of the fact because you might need to um at a certain point of time when when it comes and you will have to work on the for or some paddings to to make them look good on on for example very very very huge screen so that's uh where this RFS uh might be very useful okay so let's move to the images now um bootstrap allows you to easily make images responsive so let's have a look at um the following example so um I'm going to create a div uh with a border so you could see how it looks like so let's have let's have a div I'm going to give it some custom Styles so for the sake of U this tutorial um so with um let's say 40% and also I want to have a border um five pixel red solid so we could see it uh okay now obviously we need some um content into it so we could see it so let's add image and let's uh add some logo here now you can clearly see that this is our this is our div uh so if we check this in inspector now it's it became even smaller now because inspector popups here so now the 40% is even smaller so uh yeah this is this is the this is the def right this this part the bluish one and this this this orange is not um okay so uh as you can see sometimes the the image the content uh just simply go out of our borders and what you can do how you can quickly Fix It Is by simply adding a class to our image called image fluid and this will make our image responsive so uh yeah I mean that's that's that's really basic but also very very very important um feature feature uh then if we go to if we go further um let me do H1 my five and let's uh go to thumbnail and let's uh let's have this image however we're going to change this to image thumbnail so um that will give our image something which let me enlarge it here so it's going to give this style this border rounded border around it um let's also do uh see let's make it a little bit smaller so uh with the use of with 25 I just make it uh smaller now finally the the last option you can see here um is how to align how to actually align um images with use of uh bootstrap so let's do that now let me close copy this one and then let's have alignment um so basically we will be using the float um utility which we're going to discuss uh in a second so um yeah let's just do let's just copy this image again uh so this was the one and let's change this one to uh to the float let's say and so this will move oh yeah let's make it smaller so this will move our image to the end and now obviously uh if we are working with the FL think we need to remember to use the clear fix so clear fix um so because otherwise um maybe let me show you that um let's have some paragraph him here uh otherwise other elements will be floating around it so maybe I will even use lorm 50 so you could see what I'm talking about oh it's too not enough okay fine let's use 100 um so this is floating our image um so now if we add the clear fix over here basically that's going to fix that state now okay let me get rid of this paragraph we don't need it anymore because I want to show you also how you can actually um Center the image with uh use uh of bootup classes so let's get this image again and we can simply do that by uh adding by using the flex box so d block um MX outo and through 25 and this will Center our image um like this one and one more thing actually I didn't mention is that we can easily for example make a our image um or give our image uh rounded Corners like here simply by by adding this uh rounded class to it uh and uh last but not the least if you are working with picture um it's also supported by boot propop so here you have the Syntax for working with the pictures and making uh them also responsive um like we did with the previous examples okay so now let's move to the utilities so because this is also one of the most important part of the bootstop and especially taking into account that recently tnd um become more and more famous and this is so-called U First framework so I would like to also show you that a lot of these utilities options are available uh Within bootstrap as well so we're going to go through the utilities um but I want to start as always uh from the most uh I believe the most common and most important one which is spacing however we're going to go through all of them so um what I did I prepared this um sample div with uh some content here which is actually styled using Styles and uh I'm going to recreate this for you uh just using the bootstop classes so we will achieve exactly the same effect with uh with the use of the bootstrap utilities so uh let me do let me do it uh like this I'm going to grab this div and I'm going to add it below and let me get rid of all stuffs over here so we don't need this this that and nor this okay so we have just simple d um here and let me also add some margin here actually we can already start with um discussing the spacing UTI so you've already seen me using some of them um in the previous parts so uh let's quickly go through the theor theory um so it's fairly simple because use the in order to use this utility you simply add the proper class like mty E5 for example which will stands for margin top five and this will give us some a little bit space over here now um as you can see uh already m stands for margin P stands for Ping and there are different um way you can combine it so uh like we did so usually you start with property and then side so you do like margin and then side which is top and then the value so so the size uh is from 0 to five it's also accept Auto which we're going to use in a second basically um bootstop defined a spacer so like a basic value and different different numbers different values here from 0 to five are actually multiplying this by different values like here it's 25% of the basic spacer so at this one will will make it to 25% and then it will the two will multiplied um all by half so it's actually it's going to it's going to use half of the value three is the default spacer and then four and five is like again a bigger um amounts like one and a half times more and three times more than the Basic Value um so uh yeah let's let's see let's see how does it work in the practice and also by the way this is um something which I also mentioned to you already so bootstrap in the version five change uh the naming convention so before we had top bottom left right so but now it start and the end because of um because of uh RTL right so right to left or left to right uh depending on which one you use before we go to the spacings let's um let's let's add some border here because that will just make it um a little bit easier to see what we want to achieve so what I'm going to do I'm going to add the border to this uh which which will give us this border uh it's it's very light actually I lost the top uh margin okay that's cool and now uh to make it a little bit thicker I'm going to add border one to define the size and also I'm going to do border dark okay so this going to make it slightly bigger so this what you can see here you can again obviously define whether you want to have the entire border or just the one of the borders or one of the corners so um yeah you can obviously Define color of of the Border like we've been doing uh before so with the colors um you've probably already noticed that we've been using this primary secondary success danger and so on let's have a look how the colors utilities looks and work like so we have these basic colors defined and we can use them for uh both coloring our content like a text or um on also to do the backgrounds so this is here background which uses exactly the same you know colors uh it just uses different classes so background primary background secondary and so on and so on um there are different color variations over here right you can even specify the gradients um you can you can specify the opacity so this is all possible within uh bootstrap now talking about the colors as everything as almost everything within a bootstrap it's it's uh customizable so uh there are there are variables which you can adjust if you want to change the scheme color um but you know I I hope you get the point that if you are using everywhere like you know the primary secondary and so on and so on so once you define decide to change the color scheme uh to change the layout of your page in the future you just change the single value and it's going to update everywhere in the in the page okay so uh we've got this one uh what we are missing to have the same um kind of result over here we need to also shrink it a little bit so uh let's do it with the um size so if you go to the sizing utility you're going to see something which I already used before so I want to add w50 which going to set this with to the 50% right and we need to center it we need to center it um so um for for the centering this um we also did it in the preview but let's just go to the uh position so uh actually position it's something different positions uh is where you can Define um your um your position value like static relative absolute what we actually looking for um is within the spacing so where we just started just down below it's horizontal centering um so we're going to use m X Auto which are going to set our margins to um to Auto uh from both sides or so MX uh I think I didn't mention that so I think it's a good time to say about that because um maybe you've seen it already uh however except for the specific directions like a top bottom a start and the end you also have the aises right so the X will work on the x axis and the Y will work on the Y AIS so the horizontal and the vertical one okay so now once we have work on the on the alignment and the Border Let's uh see how the the paddings look um in work um so uh let's do uh let's do something like this let's say we're going to have padding left or actually start five this going to add as this ping from the left side which you can see over here obviously we could do it from the right side so then we need to switch to end ping and we can do the top uh we can have different values so we could have p uh T5 and P start on three let's say so you see that the volumes are a difference um then again we can do PX five which going to give us pings for both from both directions left and the right um or we can just say if we we don't specify the direction itself it's going to apply this to all the directions on top right uh bottom and the left as well now the same applies to the margin so let's work on that using um this uh paragraph so I'm going to add class here so then again you can see that if I do margin top five this I've been using this a bit uh it's going to add me the margin here if I want to do margin uh y so in both directions it should change this um just space over here let's let's see how it works without so this class is incorrect now so we don't have any margins here if I go to Five it will add both from the top and the bottom um so yeah I will leave it to five so it's going to add me margin from each and every direction and finally this uh diff What we what we have here we have a wave 50 so you already know that right so class it's W 50 for 50% we need to we need to uh align it so let's do MX Auto to set it in the center what else we have here oh we have a text alignment we didn't talk about it um but we I think I've used it already uh in the previous example but let's just see how it works so uh for this we just need to do text Center and this will do the same here so this this text alignment uh was there before in the when we were talking about the typography um so this is this is something you already seen now what else we have here we have background um so if I go with background light I believe I'm going to get a little bit a bit grayish over here it's slightly gray I'm not sure if you can see so let's do background dark then which should give us the pretty much the same uh dark gray color and finally text white for the white color so this is again what you can find here in the cols right so um you can either use this primary secondary uh but there are also colors which are uh predefined like you have the blue indigo purple and so on and so on um you can also use the gray scale right so you have a gray 100 gray 300 and so on so you can achieve this as well with the simple use of classes what else we have here so we talk about backgrounds we talk about the borders we talk about the colors uh display obviously you can you can define whether you want to how you want to display a given element so you don't need to change the display property you can just add simply add for example the um Nan so this will this will make our paragraph totally dis disappear let me revert the change and now the paragraph is back what is also interesting is that you can also use the break points right we already learned about the break points where we were talking about the greed so we can actually apply um apply this on these certain uh break points on the certain screen size so for example if you want to see uh let's say we want to be something visible only on the let's say medium size uh Let's do let's add this here so now our um our diff is visible however oh oh obviously this is uh I didn't remove dots so now it got disappeared and when we increase the size of the screen we should see that it will pop up once we reach oh where are you oh now it is so because we had d none so basically we don't display this um on starting from smallest screen then we have DMD block so if we are on the medium size uh breakpoint between medium and large then we can see it and then if we go to large again it's going to be disappearing right so if you want to do this on the specific spe ific uh screen size that that's how you can do it so you can specify very complex rules or if we just get rid of this the LG n then it will be just simply um invisible on the small screen until we got the medium size and then after we start make it bigger bigger it will be visible right so this is very very useful to for example you know hide something on the mobile or show something on on on mobile um so uh yeah let's get familiar with this one because it's going to be very useful now Flex um obviously um Flex is is um very um important in the web development so again instead of using the the flex um uh Styles uh or css properties you can simply add the classes which going to be uh using and utilizing the flex so uh we're going to do uh another example uh on that let's grab something from here um so uh yeah I mean as you already know I mean if you are not familiar with flex then obviously uh please uh do uh check the tutorial on Flex first because otherwise it's going to be a little bit confusing but other than that if you are actually familiar with flex already then you can uh use just um you can you can easily see in the documentation um how to apply this uh Flex properties with just simple use of the um classes right so the classes utilities which will um do this for us and we don't need to type the CSS um ourselves so basically long story short just to enable Flex you should do the deflex which going to make uh we going to apply Flex to this to this container um and then we can we can start working on uh different uh example here um so uh yeah let's just crap one of goes from here and let's let's check this out let's add border so we could see it and B dark margin top five so I think you already know and now let's just check how it looks in in col console so you will clearly see that this D flag uh class is setting this display to flex and then uh the flex row is setting this to to row and then uh obviously we can we can we can we can we can uh just play with it we can have like Flex row reverse right so uh uh this will reverse the um the order right so now it's one two three here although it's like one two three here in a code uh we're going to go to columns right so if you want to change to columns instead of rows you can also do it just simply changing this class so we have columns now and so on and so on that which gives you a lot of you know option just to justify content easily talking about just ification bootstrap also uh helps you to vertically align so everyone who was trying to vertically align uh or Center something you know that um it in the past it used to be a a real pain um for the developers to do it with the CSS now uh you can simply just use the Align middle and that will just uh set it to a middle so yeah also very very useful um utility float we've been using already with images right so simply set float start float and keep in mind not using left right just start and the end um what else the interaction right when you click on it it's going to select the entire text right this doesn't have the behavior and this can't be selected so lot of utilities would just makes your life easier you can change the opacity with the simple class and the value over here um change the Overflow uh so then again if you want to have a scroll or not if you want your content to overflow simply say overflow visible just add the class and your your content will become um automatically visible hidden if you want to cut it out like we could do with our image example right if when was too big we could just set it to overflow hidden and then our image want go out of the um out of the div out of the parent div obviously um yeah if we didn't use image fluid uh for to make it responsive then it would be obviously invisible uh fully right so the part of the image will be just gone position we talked uh already right so you can arrange you can set it to static relative and then if you go decide to um to uh to go with the absolute or relative you can also specify like position absolute top 50 start 50 and this will set it to correspondingly um Shadows uh we haven't used it I believe so let's just uh quickly have a look so let's do Shadow large so we could see the result easily and let's add it to our diff here so this going to give nice shadow around the element over here um and then finally we talked about sizing like we set with width and and height and spacings margin pings text um so uh yeah this is this is about for example wrapping an overflow for the text right here uh vertical line and visibility which uh you can all which can be also um adjusted with the use of visible or invisible class okay so now let's get back to content and specifically to the table so um I've got you two tables here um and we're going to make one of uh one of this table responsive table responsive also going to show you what else we can do with the bootstrap classes um how we can easily change and and adjust it um so uh first let's let's make it uh let's make this uh responsive so uh what I'm going to do I'm going to add um this table responsive MD so I'm I'm specifying not only that I want to this table to be responsive but I'm also specifying the break point uh from which onwards I want this be uh responsive so as you can see the upper table is just getting shrinking shrinking shrinking uh and the bottom one got the scroll which allows us to easily browse it for example on the mobile right so this how you can um this is how you can you can do it and there is much more uh which you can actually do with the um with the uh tables using uh using bup so let's have a look at just few examples because again obviously as you can see there are a lot options here like you know we can play with a table footer header styling them easily uh so I just want to show you uh a few um examples which are used most often here here we got the table responsives uh so um yeah so it can be always responsive or it can be on the specific break point uh so um what else we can do with uh with the with the table um we can easily um and this is something which bootstop was working on um very hard when it migrated from boost drop 4 to boost drop 5 uh I mean uh a direct team so if we do table dark it's going to change our uh table to the dark mode which is very handy because you know with just single switch you know the lot of pages do have now right this um this night mode uh which programmers do love so much at least I do um what else if you want to make it bordered simply just type table bordered bordered and this will add as those borders and as you SE in the do you can also specify which borders you want which borders you don't want to um let's add table hover and let's see what's going to happen so now we can when we hover over the uh given row it's going to highlight so it's also very very useful when it comes to the big tables with lot uh amount of data um you can also to make it easier for your users to to read the data you can add table strip which will basically make every odd cell having different uh color and you can also change colors right like everything with bootstrap you can do table primary for example we going to change the color or info and you have a nice overview of all this uh variants here right so you have all the colors and options here um yeah so these are the most important um uh utilities which you can use with your tables as you can see it's very very easy and you can um very quickly uh change and adjust your existing table because what you have to do this is just a very plain table HTML table what you have to do is just to add a proper class to it and it's going to look amazing thanks to Bo Str okay so now I would like to talk about the two other components which are very useful to make your s more Dynamic so if you're creating some platform or you know some dashboard admins uh very often you want to show some kind of notification so there are two interesting components which bootstop offers you to use the first one is called alerts so um this is how it looks like uh you might be you know you familiar with those kind of Arts whenever you are working with some platforms you click on something and then usually in the top you can see this kind of alert this is very um easy like most of the components uh within a bootstrap but what is most important for except for the fact that uh this is a simply simple to use Simple to create then you can add icons to it um EAS change color is it there uh dismissible so you know whenever you show it you can also get rid of it by just clicking this x icon so let's have a look how how to build it and um yeah as you can see this is this is very simple because you just need to use uh a proper classes so the first use alert and then uh a color so this is the primary one so we just use an alert an alert primary um and if you want to make it Dynamic you should also keep in mind to to use the roll and now bootstrap utilize the SVG icons uh so if you want you can easily add um your icons to the alert so simply add SVG and I'm going to show you more icons um soon um and finally if you use um a bootstrap uh plug-in uh the alert plugin all are uh the uh compiled bootstop JavaScript uh version which we are using here then um simply by adding this data attribute or actually adding this button here right so this is this is button and one you can see over here this is just a button which looks like this um and by giving them uh this class button close and this data be as dismiss um attribute it will work and it will automatically um do the job so it would just remove it so just keep in mind that uh when you dismiss uh it's actually being completely removed from the page structure now let's move to the next one which is toast and the toast are a little bit smaller um elements on the page which are also dismissible and they can be also shown uh on request so um let's let's uh let's check this one um so I'm going to copy this example here I'm going to create another row for it actually um we don't need row specifically because uh by default it's not visible and we need to use the um we need to use the JavaScript uh to create um a button which will basically uh which will basically uh make it live so as you can see it's popping up here in the bottom right corner so actually let's use this example which we have here because what is important here is uh this piece of JavaScript and we're going to go through it um so uh yeah let's have a Buton and the um toast so um basically the the structure is pretty simple uh if you use this code Pro probably doesn't make sense to uh you know um type it all by yourself simply copy the example and then adjust whatever you need so uh here you can have an image right this is the image that they used uh you've got the header bootstrap and then some some extra information uh button close with which you already know from alerts and then the body of your message uh you can customize it you can add images you can get add content uh it's up to you and then we need this uh this uh piece of U JavaScript over here so let's add script tag here and let's paste it let's see if this works so here we've got our toast on the left side this time so as you can um imagine you can easily um adjust uh either uh content or behavior so whether you want to uh whether you want to uh show this uh this this toast on the left or on the right side you can uh you can easily customize it if you want uh few of them right so you want to stack them here we have just single single um notification single toast over here however maybe you want to show two or three or four or five or more uh then they will they they can also stack one below the each other so you can uh you can you can just just do that um don't forget to add some spicing uh to it now maybe let's have a look at this uh piece of um piece of JavaScript over here because what it does uh first it uh create a link to the to the button right so to the the button you can see over here uh so we assign it to the toast trigger and then um we we are getting this toast live example uh which is here live toast right so you you catch your toast by um by uh ID and then you uh whenever this is clicked uh you simply use the show option there should be the other example here and um there's usage right so if you have multiple uh toast you can also use um you can initialize them this way so um simply just uh search for all the elements with the class toast and then you'll end up with the list of uh the the array of the all to you have and then you can uh you know if you have five different toes you can basically uh trigger all of them or just provide you know like number one two three or five um very often you also want to you know dynamically create them so that's that's also possible let's see what what else you can do so for the placement um you can uh you can you can place them uh using uh different CSS options uh so for example middle Center let's have a look and let's check this classes over here so here you have this div class at container and then you have um position absolute top 50 start 50 so this will be the center um bottom so yeah I can play with it and see how to how to place them in uh in the in the uh in the place you actually want it to be placed at your page um so uh yeah I mean that's uh that's really really cool and let's go to methods which are available so basically obviously we can show we can we can hide we can dispose if you you don't want to get uh this and get instance so uh yeah this allows us to to just grab the uh the our uh toast and then we can dynamically change the content of it so technically you could also have just one those and and and keep on changing the content you want to display to uh to the user so yeah I mean really put your hands on it because it's uh I think you're going to use it a lot sooner or later you will need this kind of notification your project if you're building something more advanced so uh this is a very very uh handy tool to show user notification like you know the Facebook notification or or messenger or something you are seeing this everywhere okay now it's time to talk about the Navar so the navigation bar you can see on many pages actually probably all of them and they have it now what is so cool about this SAR it is that it's responsive by uh design by default um so as soon as you shrink your screen to the uh you know tablet to the mobile size it's going to um automatically collapse and then you can uh use this So-Cal homeburger to uh basically show or hide the content which is there which um saves a lot space uh especially when it comes to uh mobile devices so uh let's have a look how how does it work with bootstrap as always always bootstrap uh gives us like a basic example which we can work on it's a little bit complex so obviously we're not going to go through all this uh this classes because that's not the point uh to you know to to learn it uh and know it by hardage in every line uh that's not the point that's why we have a doc for and uh so so so simply uh you can start by just grabbing the basic KN bar and then do some adjustment to it so that's what I did here I've got uh the uh um I've got the uh the basic example what I Chang here um because I wanted this to be dark so actually you know what let's me let me do this from scratch again so let's get rid of this nbar and just use the basic one so this is the basic uh n Bar and now we want to work on that so first thing you could uh or might want to change is whether you want to have the full W or not you can simply adjust it and change it by changing this container either to fluid or if you keep the simple container then it will get them to um to the center so as you can see this is going like here and then if you get container it's more to the center you can see it's clearly on the on the bigger screen so this is fluid and this as a normal container so if you want to have this margins from the left and the right then you should go with the container one and that's what I'm going to stick to now um let's say you want to have I want to have logo in here very simple this is uh this is called uh this is part which is called brand and you can see this over here and here is nvar brand right so this is what we what we've got here we want to change it just scroll it down and find what you like so I would like to have the image over here so I'm going to add this image over there so let's say it's Navar and I want to have an image here and let's grab some uh existing image because obviously I don't have the bootstrap one here so let's just replace it with some logo and here it is uh let's change the uh color the size actually make it a little bit slightly bigger okay I think now it looks better now maybe even slightly bigger right that could be nice and now um I like the dark one so I wanted to to do the dark one um so simply scroll down until you find a proper section here you have the color scheme so probably this what we are looking for right yeah they have different uh color scheme and then again you can see you can notice um this pattern here so um like with the all the other components you just have to use the proper class the color class um so you could use like a primary if you want to have a primary color I will go with the uh Navar dark and background dark so if I go with the background dark only let's change light to a dark you will notice that I've got the dark navbar however my link the text over here is not really readable right so that's why we need also this navbar dark so we change this Nar light Nar dark and that's going to change also the font color okay now secondly um um if you don't want something in your nav bar simply just search for it in here um I don't want to get this disabled here uh and by the way if you are not familiar and that might be a little bit confusing right at the beginning because there are many elements over here uh I strongly encourage you to just open the uh web developer tools and then go to the elements and try to just search for element you're looking for for example this one right so this is the element and you can for example press delete and see whether you have the uh result you wanted right if something if you if you do something wrong let's say you remove the wrong element uh accidentally then nothing easier just refresh the page and you're going to get back all the original HTML and the same applies to whatever changes you want to do so let's say I want to have this one I'm going to edit this and I'm going to copy paste and I got two dropdowns now right so now you can play have a kind of soundbox um which you can work on so um yeah let's let me let me get rid of uh this disabled one because obviously I want all my links uh to be active um working in my n bar so that's cool obviously I would could add some more links here if I be uh doing the real page um but that's uh up to the use case you want to you want to achieve right you're going to find many examples with the code um here container so that's what we talk about the placement all right so we have option for the default one uh so the default will basically um if I'm going to scroll down it's going to disappear let's see actually let me add let me add something at the bottom here let's do uh div and let's do some nasty thing it's going to add right so it disappears and then if we do a fix upop to our nav bar so we have nav class fix stop it will just stick to the top so regardless whether we scrolling or not it will be always there um now because it's um U because when when we do it like this the position is absolute so now this margin doesn't work anymore we had margin over here on this element let me just get rid of it so you will see there was margin here but it doesn't work for that so we would also keep in mind to to to always keep this margin from the top for each and element because otherwise now will simply it will ignore the um the margins which are there you can also do the fixed bottom if you have it on the bottom uh and sticky top so that it will just stick to the top when you start scrolling if it's not there right so if for example this was our nav bar and we start scrolling it will just stick go here and then stick at this uh at this uh height just to the top like the sticky one um yeah a lot of different options here and um I also wanted to show you two more things um so one is uh this uh external content option so if you for some reason want to use this functionality outside the uh navbo itself you can do it butu give you this example very simple right so we have just nvar a very simple one as you can see not many not many classes and the Toggler over here and um what's going on here is that by using this data BS Target attribute and using the same name as we have here we are actually uh con combining this this this uh this button this hamburger or we are connecting this to this element so it knows which one to collapse if you have more of them don't forget to use the unique IDs over there new component introduce inop 5 um off canvas so the menu on the right the side menu which you can also um use same way as you do with the Nar so simply use the basic example and then just start playing with this around and changing adjusting uh to your needs so that's um mostly about enough bar um probably sooner or later you're going to uh need that you're going to use it um for um for the page you will be building or even the application right a lot of the application uh use it um like I know Instagram and so on so so so take time to play with it um because because you will be using this for sure and now let's move to uh navs navs and tabs so another category of components which you can find which I'm finding very useful and you can I hope you will also going to like it so the bass nav is um you know used for the navigation um if you want to have this um um just the links right you can call it just the menu on on certain page so it's not strictly like a nav bar it's not always uh stick it's something like you have um I don't know let's see on some pages amazon.com for example so as you can see this is the navigation I'm talking about right basic navigation which is below the nav bar over here so the base nav uh so this is exactly the same uh what you've got here by the way um we've been talking about different components look how the Amazon page is built nav bar so we just discussed it nav over here um slider or Carousel so-called cards we've been covering uh in few minutes back and yeah and then footer and some links here so this is the basic setup which you use and uh which bootstrap offers you and with use of them you can just recreate literally any page in the internet so this is the base navigation uh it's it's again very very simple right you just have a basic structure and then you just uh use as many links as you want however what is even more interesting are so-called um tabs so what the tabs are tabs uh allows you to change the content uh so these are our tabs here let me show you and them how they look in an inspector so this is the entire so this this is these are tabs and this is the content top content right it's very small here obviously it could uh be much much bigger uh it could be even with the entire page right so it could take the entire page and we could change the content of the page uh while changing to different tab this is very handy you can see this a lot when you work with the um for example the admin panels right so imagine this is the settings page and uh you want to say I don't know like here right so the some settings some general settings some profile um adjustments uh and whatever right and the same with the vertical one so imagine this is some kind of you know application and you can uh edit your profile so here will be your I don't know personal information here will be some um work related info and so on so this is very um useful and you can see that this is very Dynamic right so you don't have to reload the page you can have all of that on the single page and then again if you go to uh to this um and scroll to the a proper section you will get this TS right home profile contact UM very simple usage right so we have two sections here we have a pills which are here 1 two three and then we have this uh kind of place holders so we have three of them as well and now what we have to do so this is the content going here uh what you need to do you need to just make sure that you have the corresponding um corresponding uh ID over here so look this is the Home tab right so this is this is called home so we have this area labeled by home and the ID is pills home and this um yeah let me actually show you this in a source code it's going to be much better visible so let's go to our TPS so this is the example all right so this is pills home and this pill's home corresponds with this button here so uh it uh has to match this data BS Target so it this target and this has to be the same so if you are just adding new one let's let's add something new here so contact tab let's add new one and let's call it um I don't know might be just other so I'll just change this to other also this one right and now we need to have the new novel item here so I'm going to make a copy of this and now what we need to do here is we need to change this to other other so this ID has to cor correspond this is the other and this is obviously other and that's how we get the new tab in um in our page right very simple very very easy and exactly the same way if you want to work with the vertical which example you've got over here okay now I would like to uh talk a little bit about something which is not specifically a a bootstrap component because it's separate project however is created by the same team and I'm thinking about the icons so if you go to the extend and icons you're going to see this page uh where you're going to see a the list of alternative options so if you're familiar with fond oome uh or this o i or whatever icons you've been using uh there are some options here uh so you know feel free to to use them um however bootstrap uh recently came up with their own set of icons and I really like it I feel like they are really really um um yeah good uh looking icons and what's most important there are like 1500s already so so it's a lot and I'm pretty sure that most of the icons you might be looking uh for to use within your project inside your project you're going to find it here so how to use it it's very simple you have all icons instead here so if you're looking for something uh let's say Wi-Fi you simply just search for it and then you choose and click on it and then you're going to get uh three options um first you're going to have examples so you're going to see you're going to have a preview how it looks like and how you can use it with the uh sample examples of like you know how it's going to look in the button or in the input now what can do now to use it you can uh either download this like SVG so simply hit and save and that's going to save you the uh the image um and uh then you just load it uh as you would do with any kind of an image uh you use on the page uh other option which we're going to cover later is to use it as icon but then you need to include um uh the font the CSS for that um I want to show you this before we move to to the icon font so this is simply the HTML this is SVG so this is like a row code of this icon so this puff is basically you know the SVG consist of this lines Puffs and this is just you know these are the the points uh so the browser now know how to um draw this icon so it's very simple to use because you just copy this and then you simply paste it and here it is this is our icon right uh you can change the size uh to something bigger let's say 50 uh using this width and height Properties or you can also do it like you would do with any other HTML element so you can just create some um class let's say icon and then create some custom style for it so I'm going to call it icon and Define a width of 200 pixel and that's going to work as well now coming back to the installation so the icon installation simply hit the install button that's going to scroll down to this section um as you can see there are uh many options how you can install it you can do npm you can download the entire entire library or you can use the CDN so I'm going to use this one uh so let's just paste it in our head tag and now coming back to Icon let's grab something uh we can simply just copy this icon font this I uh tag and paste it here down below or next to our icon it's small um obviously uh so again how to change theze you can do it with Styles so set the font because it's like font so just send the font size to whatever it is I know 50 pixels let's say or 200 you can also change font color obviously uh you just work with it like you would be doing with the um any other font and as I said I mean you know I think you have pretty much uh every icon you could possibly need in a project like so you know some hamburgers over here yeah I mean just give a try and uh I really like this and I really like having those icons uh and everything within the same ecosystem of bootstrap okay so now let's talk about um so important components that boot finally decide to provide um a separate section for it uh within their dogs because recently in the Bop 4 uh they didn't have it and now we have like the separate uh category for forms so um yeah bootstop as um like with the other components it's making um our life easier um by um supplying us with the certain classes which makes our uh inputs and and other form controls simply look better and uh let's uh yeah let's see what we have here and what we're going to do is we're going to build some uh some contact form uh so uh we we're not going to go uh into each and every um control because that would take like you know probably few hours just to just to cover all of that but we're going to build like the um very common contact form and then I'm going to show you a couple more examples of what you can do also with the form so um yeah let's jump into it uh let's open this in live server and now what we're going to do we're going to start with uh some uh text let's say so um let's have text Center and inside it I want to have H2 get in touch so that's uh yeah that's going to be uh our heading and then let's have p uh lead something like I don't know um questions do not hesitate to contact us okay now let's add some row and we're going to also add justify content Center so it will be always centered and let's also add some margins here and and we're going to add um some uh forms but before we're going to add forms let's add also some column so uh there's going to be large um there's going to be six on the large screens and on the smaller one uh it's going to just take the full WD and inside it let's start creating our form so I'm going to do form I'm going to leave the action empty for now because we are not um adding any logic to it we will just creating the front content part for it and let's start with the label so if we do a simple label for email because we're going to that's what we're going to start with uh it going to looks like this and let's add input type email okay and then let's give ID email and uh what we can else have we can have placeholder obviously something like um myemail.com so this is how it looks like uh just by using the normal forms and loading bootstop CSS however we can we can make it even better because if we add class form label to our label and we're going to add class form control that's what going to happen and yeah let me let me add uh show you few more examples then we're going to uh also talk about uh variation you can have with um with uh bootstop uh forms and inputs so let's add another one and let's let me just copy paste this one because we will have it for name and name and name and then let's say I know I example David okay we not um going to bother with the spacing C we're going to we're going to fix it uh later uh so we have two inputs uh now let's uh add some select uh so we're going to add again label and that's going to be for subject of our uh email and we're going to add again class form label and then we're going to call it subject okay and now we have select so just the normal select except for the fact that we're going to um add actually we don't need this name but I'll just keep it um class form select and then we're going to add some options here so option and it's going to be let's say uh pricing oh it should be pricing let's make copy of it what else we could have here possibly uh technical and some others or general whatever you want to call it okay so this is our this is our select now and if we want to have some default value selected then we just add this selected to the given uh option and it's going to work like a charm and finally let's add some text area so the user could write us some uh some message so again label and that's going to be our query uh so write a message and then we're going to have a text area and obviously oops text area uh it's going to be query query calls row we're going to set it to default and but we're going to add class form control okay so this is it maybe a little bit uh smaller Oops I meant to be smaller not bigger um and then finally let's add uh maybe some div with text Center and we're going to add some button here so button uh it's type it's going to be submit and class it's going to be BTN I know BTN primary let's use primary send okay oh it didn't work text Center if I only can't spell it properly um yeah so that's that's it um it's it's um yeah it could be working form however let's tune it a little bit um with bootstrap 5 we can easily uh create a pretty nice um pretty nice effect uh on called something called floating labels and so I'm going to show you that in a second um just one more thing here is that we could also have a placeholder I believe write something yeah this is it and it's going to disappear uh when we start typing that's cool however if we want to use this floating then I'm I'm going to get rid of it I'm going to show you uh a nice trick I believe uh which you can use when working with bootstop form so let's do form floting and then let's do some uh spacing My5 and now what we're going to do here we're going to just put it this inside Dave and what happens now is that we don't need this um we don't need this oh actually we don't even have this uh uh we didn't even have this class here so we were missing this class form label which should be there uh however when you work with floating we don't you you should remove it and then let's change the order of it and so the text area comes first and now see what's going to happen oh hold on this is let's do uh let's do this like that style and then the height of of I don't know 200 pixel okay and no a little bit smaller 150 and then we have form floating text area and it doesn't work because we are actually missing this placeholder I believe yeah it can be empty for some reason yeah so now you can see you have this nice floating label over here and uh we can actually do pretty much the same with our inputs so let's do this now uh let's uh use it for name uh okay so then what we have to do is we have to switch our label with the input that goes down below and now it's working working fine see so you can also achieve this uh very interesting effect on your inputs simply by using this um this div with the form floating class um yeah so this is it this is how you actually work with it obviously there there are more um inputs here you have a range option and you have a steppers and and you have a um input groups I think this is also interesting where you can combine in put with uh other elements uh so I prepared for you some uh examples over here so uh you can examine that uh by yourself and play with it so if you want to play with some checkboxes uh you have you have really nice option like this intermediate checkbox right so we have like checked unchecked and this one is intermediate step uh available uh some rench some file upload and and few more examples also with the validation that's also interesting because you can easily add um the validation messages to the uh to your inputs and then that's also fairly simple with the uh with the bup because as you can see mrap comes with predefined um labels you just find that it's invalid check right for the input and then you say what you want to uh what you want to write so you have this uh invalid feedback right so this you must agree before submitting and you also have this positive feedback uh so here valuate feedback which you use uh together with along with the input uh and this uh this obviously gives a user a nice positive feedback he knows that the message is that everything was fine and you know for example the password he provided uh was strong strong enough okay so we covered a lot of different components uh which bootstrap offers us uh let's see what we haven't covered yet uh and which we're not going to do in this video because it would take definitely too much time but uh these components are not that common but they will still can be useful for you so for example the accordion right so the kind of collapse the difference between collaps and accordion is that accordion by default works like uh this which means that you can have only one active item right so we I I cannot expand two at the same time uh I just have to use to one and then again this is pretty much simple I mean there's a lot of code over here but obviously uh I think um you can easily um play with it and understand how does it go because you can see that there's accordion items which are recurring elements right and then if you want to just add or remove it you simply copy paste add new one and then you have uh you change the heading and then the content uh what else we have here we talk about alerts uh budges you also um we often use them however again nothing fancy nothing nothing complex here is just the span with the class botch and that that going to give you uh this look you will see this uh being used for example in the notification like here or like this uh so pretty pretty straightforward breadcrumbs again if you want to show user where are you now what are you doing um I mean if you are going further into for example documentation like here you could show it uh that we are at components and then bread gums uh maybe with two Ls it doesn't make much sense but for example here if you go to variables maybe that would uh make more sense for that um with we talked about the buttons um you can obviously uh um use button groups as well if you want to work with them so if you won't have to multiple buttons combine um into each other we talk about the carousel uh drop downs we didn't talk about it specifically but uh yeah they work pretty much the same as you've seen in the Navar um so that allows you to show um you know more info on Demand right right so you can have uh some info in the nav bar and then if you want to have more links you can just add more and more dropdowns list groups pretty much straightforward uh similar to cards and panels we've seen so the panels but they are just uh they're just just um either using uh lists um and that's how you that's how they look like um models this is also very uh very interesting and important uh components so let's have a look at this a little bit closer H so again mechanic is pretty uh pretty much the same so first you just copy the model into your page uh so let's add it here to our body so this is this is uh this is model and it's not going to be visible uh until we actually uh fire this off so we would have to add the this uh a piece of JavaScript to it so this will fire when we click on the button so let's add this button over here okay and we will need to actually use this this uh yeah I copied I copied this model and this is different example the IDS are different but it's triggered by um uh data uh Target data BS Target so that you need to make sure that this matches so we have this example model here and you have example model here over there uh so then again for the model itself um you have header you have body and you have footer so pretty much like we we've been doing with cards so you can design it as you want you have different buttons over here is dismissible and then you can simply just add the trigger it is possible also to use JavaScript for that uh so uh if you want uh you can you can um do it from JavaScript and you're going to find more information how to do it here and change the configuration whether you want to have a backdrop light like this Shadow uh in the back this this this gray which kind of makes your eye focusing on the model uh so all of that can be controlled from uh from the JavaScript um and as always there are like different options because you can have like full screen models uh you can have um large models small models extra large so you can you can decide um and work on uh different sizing and also um also when you want to display whether it's on the center or maybe to the right and so on you can embed different um different things like you know I can ED for example the YouTube um videos so a lot of uh possibilities to choose from and finally OB obviously uh when you have uh models you can also uh use different methods to show toggle right toggle so change it from show to hidden hidden to show show hide and this PA and so on and so on we talk about n and n bars off canvas we also covered um so uh yeah popover this is also interesting that's also why we actually used um why we actually used poer uh in the first place the popovers are pretty uh similar um to the tool tips right so let's see tool tips first so the tool tips you know when you hover over certain element you can get you can show the user a certain um tool tip with extra information which will make this easier for them to uh you know get more familiar how to use your website and when it comes to popover it's pretty much the same however you need to click to toggle rer so if you click on it it's going to appear and it stays there and if you want to hide it you need to unclick it uh and you can decide whether you want to uh whether you want user actually to specifically unclick on the button or you want him to unclick anywhere um finally Spinners and scroll SP so let's start with spinners this is what you use when you want to um load something right so you just use it and then usually what we do in such case we uh actually uh it doesn't work because I put it uh probably inside yeah inside model so let me get it out of Model yeah so this is the this is the spinner so you use it when you want to show that something is loading you can use it and combine it with for example uh buttons right so when user click on something and waiting for the feedback it's just giving you him more information that he's actually waiting for something and and and and the page is doing some logic in and behind uh and then once it's done you simply just use your JS um to change it uh to to hide this element or to replace with something else um progress so the progress bars uh yeah pretty straightforward here uh so depending on the value you said is in this attribute value now it will basically fill up the progress bar uh to show the current status you can add labels like percentage you can change colors uh and there are obviously different um the color version uh of uh of this um as well as the you know multiple bars so if you want uh to show uh like you know for example that certain amount consist of three different values and then you can uh use different colors to show it and finally uh scroll spy so uh this is this is also uh very useful uh which you can also see very often on the pages for example we are using this at our MD boot.com if you go and check any kind of NV navigation we are using the scroll spine over here so this uh gives user you know the nice feeling where he she exactly is now while uh using this documentation uh so yeah this is also uh handy it's not that common it's it's a little bit more complex but uh sometimes you might want to use it uh like here you have a navigation however you don't know where exactly you are obviously I mean you can match it here but this visual um hint it's it's it's always useful and you can see it uh especially when it comes to you know technical uh documentation okay so we cover a lot of components U obviously there some more uh to go through uh however we're not going to do it in this video but let's wrap it up and actually use whatever we learn uh in this course to build a proper website so uh um I'm going to start with this this this template where we have the bootstrap CSS and JS loaded and let's start uh building our page so I'm going to start with the header and inside this header I would like to have some Navar so let's find it out let's go to components and then check for Nar and I'm going to grab the basic example and I'm going to start with it it's going to be good for the starting point and I want to get rid of this disabled and I want to let's see what else want to I want to make it dark actually right now so now let's start with getting this disabled out and let's see how we can change the color here it is so I want to have Navar dark and Navar and background dark yeah this looks cool to me and I think that I might want to use container instead of the container fluid which will basically Center my content okay so uh let's now do something which is called um jump botron it's not there in the in the bootstop 5 however in bstr for bstr used to had something like this in the past so just like a catchy um element which we can use to you know to um catch someone attention and I would like to use it here on the page um so let's go and do some let's do some GD so I'm going to do the main part so I'm going to just do the semantically uh correct and then let's do container and ins inside this container let's have a row and oh let's have a row and then inside it I would like to have uh call MD 7 and then call md5 so I don't want have them to be equal I want them however I still want them to sum up up to 12 so um in the left side I would like to have some image uh with obviously image fluid class and let's grab something from pixum which you already know oops I need to put it here uh so we have it here on we already see that we are missing some spacing so let's addit class My5 okay so here we have image uh if we change ID we're going to get some other image uh so we can play with it and search for something which will suit you most uh and as far as the right part is concerted I would stick it to some some catchy tagline so let's have H1 and then let's say this is our tagline okay and within this tagline Let's uh also add for example some paragraph We need to get a it a little bit uh down and let's add some LM I know 30 well that be sufficient yeah I think that's that's okay uh it can be too long um obviously you normally we would use some catchy text over here it canot be too long uh because user need to read it quite fast and then let's add some button so we're going to have a button uh so the type is button and the class is BTN and then BTN primary and then margin top let's say five and then let's say I don't know call to action we want user to do something here yeah maybe this is too much I have about three yeah I guess that's better and I would still do I know let's do this class mt5 yeah I think it now it looks cool so this blue uh color response with the image so uh yeah I I really like it now let's um let's add some call to action here now um so um I'm going to show you how to create actually uh the um component which is not doing bootstop like we did with Jumbotron just to show you that Boop is not only about the components it's also about the utilities and classes which you can use uh to create and to design your own um ideas so uh yeah let's add another row over here and now within this row let's just add the full call to be semantically correct and then um let's do something like that I want to have BG secondary color um BG secondary okay and let's add some text uh here lauram uh 10 let's say okay yeah it doesn't look good yet but we will make it beautiful soon so we've got the um kind of dark background so probably it will be wise to change text to white or something lighter okay and now see uh what I'm going to do I'm actually on a also wrap it up as a card body so I'm using the bootstrap component here and I'm going to do some spacing here so My5 as well as py4 and let's also add card okay and I want this everything to be text Center entered and yeah I think I think this okay um perhaps even little smaller yeah something like this would do yeah and maybe even I think that that looks cool now um now let's uh add some cards here to uh show our latest blog posts so I'm going to add another row and now let's see what we've got here so let's get back to cards and um either we're going to use three cards with an image so uh we can copy the basic example or or we would go with the this card group so I don't know which one I like more I think we haven't done card group yet so let's do card group uh in here however I would like to no we don't have the one with the button so uh let's do we're going to add this manually so let's do this here we have a call and now let's put it let's place it like this and now let's um let's add some images so I'm just going to replace this one where is source with number 200 2011 and then 202 so this is going to give me nice images and let's just add a button so again you can type everything yourself or you can just copy paste an existing um sample and let's I don't know should we put it above or should we put it um below so let's try below so I will do now multi cursor so I'm just going to click here here and there with my ALT pressed and now I can type in um in F in few places at the same time so I'm going to add text Center and inside this I'm going to put our um our button I'm going to change it to read more and actually you know what I just did it let's the a um because we need this to be a hyperlink and then no I will just I'm not sure if you can see this clearly I'm just editing this three lines at the same time read more yeah and this will go here and actually I think I should do it I should do it other way around so I should and actually you know what let's get rid of this we don't I think user is not interested in whether it's been updated or not 3 minutes uh because it's a blog post maybe if we were doing the magazine that would be uh more important and you know what as well I don't want this to be centered to be honest when I look at it now so let's just get rid of it and stick today the basics St okay that's cool and now finally I'm going to do um I'm going to do some Shortcut here I'm just going to get the form so let's have this form here from here and let's oh actually I want to have this container so uh yeah I will need this row where are you hold on I I can't see oh here it collapse and now let's let's cut this one and let's change to The Landing oh I need to find my row now so this is main this is number row number one row number two row number three and is it yeah this is the one except for the fact that we need some spacing here as well okay and finally let's go and find some bootstrap five footer this is one of the option uh but let's just let's just do something like sticky footer um okay so uh this is footer I'm going to get this footer and I'm going to go and add it here as a footer and obviously I'm going to change it to dark and let's see yeah so this is our sticky footer at the bottom and then we would do something like copyright https MD boot.com MD bootstrap.xml so I hope that I just gave you this idea how quickly you can really prototype your pages with the use of the pstr components uh and you can really really nicely um just organize everything and because obviously you could write all of that by yourself but a it would take much much longer B I mean you would be actually Reinventing the wheel so you would be fighting with you know making this uh making this responsive uh and this obviously by default is responsive uh so it will adjust the screen it will look um perfectly on each and every screen uh you have a you have also scripts here so you know to create this drop down you can do it yourself but it's there it's been tested by million of users so there's no point doing this uh so I hope enjoy you enjoyed uh this um tutorial okay so finally I wanted to show you the last thing is uh how you can easily publish your page so what you have to do to publish your page you simply open the command line I have the one which is built in in uh Visual Studio code but you could also use a a command line from Windows or terminal from Mac OS whichever you are using navigate to the folder uh of your choice and then I'm going to go to CD Landing uh because this is where the uh the page we uh we just created and the free code comp uh is just the generic folder with all the subfolder there is no index HTML file so uh I will need this index HTML fire actually Landing uh to be there and uh actually you know what let's let's also rename it into index HTML so as you know then the browser will know uh that this is um this is the the entry file and then what you have to do is just simply type MDB publish that's going to ask you whether you want to use npm or yarn I'm going to stick with the npm it's going to ask about the name so let's do the free code comp bootstrap five let's say and few more options I'm going to just accept the default ones I'm going to hit enter and what you're going to see is that this going to be updated within uh just a second and you're going to see the URL over here when you click it boom your patch has been just deployed to the server and this is uh this is there uh this is secured with SSL and it's absolutely free if you don't have it uh yet simply navigate to MDB go.com and there's where you can find the installation procedure so you you have to install this MDB tool so you'll be able M to do MDB um in your command line so npm install minus gmdb CLI and just create uh the free account so you would be able to do MDB publish on your account with your url