Bootstrap CSS Framework - Full Course for Beginners

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 helped create a popular  bootstrap library. Hey, YouTube,   my name is David. And today I've prepared for  you a crash course for bootstrap five. So the   most common front end framework used around the  world. I'm a co founder of MD bootstrap.com.   So I think we are the one of the best people to  teach you that because what MDB is, is actually   Material Design connected with Bootstrap. So we've  created open source library where we actually use   Bootstrap five, and we've been doing this for five  years already. We started back in 2015, when the   bootstrap three was the current version, then we  migrate to bootstrap four. And now, obviously,   we are using Bootstrap five. So once you finish  that crash course, you might be interested in   checking this out. Because as I said, this is  the library where we decide to connect material   design from Google. So to specific design, which  comes from Google Apps, with the Bootstrap. So   we have a hell of a lot of experience, in depth.  What we're going to cover in this video, what   bootstrap actually is just a few words, because  you're gonna see this on the real examples,   then I'm going to guide you for the installation  and the setup. So how to start working with it,   there are going to be a few ways how you  can add the bootstrap to your project,   then we're not going to cover the most important  part, which is a grid system. So this would make   bootstrap so famous. And we'll be also using and  learning how to use different components. And   finally, at the end of the video, I'm going to  show you how to build a page from scratch using   Bootstrap. So what the Bootstrap is a long story  short, is the most popular front end framework   around the globe now, so let me give you  some numbers in 2013, bootstrap around 1.6%   of top million sites, then back in 2016, bootstrap  ran already 15%. In 2018, it was already 18%. And   nowadays, it's more than 20%. Around the globe. So  it's a huge number. It's really, really widely use   library. And there is this page, which is called  the bill with, which gives bootstrap a 72%   of share of the framework market. So within all  the pages, which are utilizing any framework,   Bootstrap has 72% of it. So I believe this  is a good reason to know what's, why should   you use Bootstrap. There are many, many different  reasons why to do it, but obviously, did increase   your development speed. So if you use the existing  components, like you've seen on the screen before,   you've gone, just save a lot of time,  you could create all of it by yourself.   But there is no point because it's been  created for you. And it's been tested by the   millions of different developers. responsiveness.  This is what made bootstrap actually so   famous. So but now it's obvious when you  create a page, it has to be responsive,   but back in the days it doesn't fit in that  Wasn't that obvious. And bootstrap grid   was the revolutionary tool, which  change a lot in the web development.   Obviously, when you're a developer, if you use  a library that prevents you from repetition,   so you don't write pretty much the same code  in different ways for different projects.   So that gives you the as the consistency to your  project, because just reusing the same code,   bootstrap takers of the browser console.  Bootstrap, they cares about the browser   compatibility, 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 a guru for   it or just ask question on one of the one of the,  you know, Facebook groups or Stack Overflow, and   then you're gonna get answer very, very quickly.  And finally, you can customize it to your needs.   So these are the components which are there,  and we will be going for most of them. So we're   going to put our hands on the keyboard, and we're  going to start using them. So we're going to just   create something out of it. So yeah, I mean,  without further ado, the jump into installation.   In order to install Bootstrap, we need to navigate  to get bootstrap.com. And you can already see that   there are multiple way on how you can install  bootstrap on how we can add bootstrap to your   project. So we can already see that you can  use it with NPM projects. You can also use CDN,   or you can simply download it so  I'm going to show you all three   options. So let's start with the download option.  So I'm going to hit download button, they're going   to redirect me to this page, obviously, it might  look a little bit different because Bootstrap   is continuously updating the documentation.  However, it should looks more like this. And   now once we are on the download page, let's  hit this download compiled CSS and J S.   And let's save it. So this is going to store it  on my hard drive. And then let's go to this dist   folder. And let's unzip it to the destination  of our choice, I'm going to pull it over here.   Let's wait a second to unzip it. So as you  can see, it will contain CSS and J S. So let's   actually, let's leave it like this. Now  what I'm going to do, I'm going to open   the project in the Visual Studio code. Okay,  and let's create a new file. So I'm gonna hit   new file, index. HTML, now I'm gonna type  exclamation mark and press up. This is what   Emmet does. If you are not familiar with  Emmet, please check the tutorials on that,   because I will be using this, I will also explain  how to do it, but I strongly encourage you to get   familiar with it, because this is going to  speed up your development. And actually,   one way of doing of using or speeding up  this development is to use it like this.   So instead of typing the Learn the full formula  for linking the CSS and JS, I'm gonna just type   link and press tab. And that's going to give me  this, the stack prefilled. And I'm just gonna say   CSS slash, and I'm gonna search for Bootstrap  CSS file. So there's going to load the CSS,   and the same for the body for the GS before  the ending body tag, so I'm gonna type script,   source, and then hit tab. And I'm gonna do  the same. So J S slash Bootstrap, Bootstrap,   J S. Now, if you want to load just the bootstrap  J S, you need to remember also to, to install or   to add Popper, if you want to, like if you  want to use it, because bootstrap depends on   on the proper js to go to proper JS web  page, and then either download it or   loaded via CDN. But just to show you 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, I can already see for those who  are familiar with disrupt the default 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, I did it with  pressing combination of CTRL SHIFT R. But you can   also do it from here. So click on the menu, those  three lines over here, this hamburger so gold,   and then go to more tools, and developer tools. So  that's how you can open and close it. And now we   can see the error here. But this is regarding the  fav icon, which browser tries to log to the icon   which is shown 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 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 the Bootstrap CSS  and Bootstrap JS has been loaded successfully. Now   as I mentioned before, if we would like to use for  example, pop over component which relies on popper   dependency, we would have to also add properties  here. So before loading the bootstrap J S, or   there is the other option. So instead of  loading Bootstrap, J S, we can also do it by   loading the bundle. So the bundle contains all the  dependencies, right, so if you don't want to add a   separate dependency over here, you can simply load  bundle instead. Now this is the most basic way of   start using Bootstrap. So by doing only the  source file, now let's move to the next option.   If you don't want to download and move  unzip files to your project manually,   there is a faster way to do it. So let's  see how we can start using Bootstrap   using Cydia. And then again, there are two  options So here we, we can have option with the   bundled js, which contains all the dependencies.  Or we can use the separate option where we   have the bootstrap loaded separately, and  Popper, as well. So let's see how it works.   Let's create a new folder here, and  let's call it CDN. Let's open this in   Visual Studio code. Let's create a new file,  index dot HTML, exclamation mark tab, that's   going to create the basic structure. And now let's  just copy 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.   Hello, World CDN word, let's say, and let's open  this with view live server. And then you can also   see that this is working fine. Let's open the  console to verify refresh. And we have Bootstrap   CSS and Bootstrap bundle Minjae s. And as I  mentioned, instead of this single line over here,   we could also use two entries for the proper  and the bootstrap separately. So let's save   it. Let's check whether it's working fine. And  now we can see that the proper is being loaded   separately. Okay, now let's move to the  next installation option, which is NPM.   So for those of you who are creating your project  with the use of the package managers like NPM,   or yarn, probably that's going to be the  easiest way to add bootstrap to your project.   So I'm going to show you how to do debt. So let's  create a new folder, and PM, let's open this with   Visual Studio code. And let's quickly initialize  the empty NPM project. If you're not familiar with   NPM, I strongly encourage you to watch some  of the tutorials on how to use NPM. Because   that definitely gonna speed up your development  and with use of frameworks like React view,   and Angular, this is kind of basics, or basic  knowledge. So it's very wise to be familiar with   it. So let's do NPM in it to initialize our new  project is going to ask a couple of question. So   the project name was called bootstrap NPM.  And then, let's just accept all the other   default values, we could, we could decide upon  description and report and few other options which   are not required. At this moment. That's going to  create a package json file with all the settings.   And now again, let's create index dot HTML file.  And what we're going to do now we're going to   install the dependencies, I'm going to use npm  install Bootstrap, which gonna install all the   dependencies under node module. So as you can  see, we have node modules Bootstrap. And then   we have J S, CSS scss. So for those of you who  want to somehow customize the bootstrap properly,   this will be the way to work with so linking via  CSS, we will be using this. So let's now link our   our dependencies here. So again, in hat, let's  do link. And now we need to say node modules.   bootstrap this CSS, and then Bootstrap CSS, we can  also use mean, so minimize version of CSS. And for   the body, we're going to do exactly the same. So  link, script source, and then go to Node modules.   Bootstrap, this j s, this time, and Bootstrap  bundle J S. So this will give us 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 the network. So we have Bootstrap,   CSS and bhandal. If you don't  want to use the bundle, but   install the proper separate you can obviously  do it. So just type npm install at popper   J S slash core minus minus safe and that will  store it in under node modules. So now you will   see and two folders here so Popper, and Bootstrap  and obviously you can link it now to your project.   Okay, so if you want to understand why bootstrap  become so famous, we have to start aware of the   grid system because this was the real game changer  back in the days. And before we started learning,   because before, I'm going to show you how to  start using this in your projects in your website,   let me start, perhaps with some demo,  so you would better understand that. So   I've got the three examples here for you.  So to give you some insight to some feeling,   what this grid and what this Bootstrap is  about, and why so many people in website   use it, let's have a look at the following  example. So the the whole thing about the   responsiveness is that the content should adjust  to 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 the desktop is never one  which will simply be have like a water,   which depending on what you pour it into, it will  just you know use the whole space available for   it. So the bootstrap uses the bootstrap grid uses  columns to achieve that goal. And we can see here,   this is like the very basic example. So on the  big screen, when we have a plenty of space,   we can easily fit this main content here and the  sidebar, on the right side, right, we have a full   screen, we have enough space, we could even  make it bigger, larger. But however, what's   gonna happen when we start shrinking this, you're  gonna see that at certain point of time, there's   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, you might end up in a situation where it's   just not enough, right. If you if you go to the to  even smaller, then what's going to happen, thanks   to Bootstrap is the going to stack one below each  other. So if you open our Web Developer Console,   and use this mobile option, you can choose one  of the predefined screen size. So for example,   we're going to check for iPhone S II, and  then you will see how this actually looks   on on the phone. Right. So you can also  check some tablets, I believe here.   Yeah, even on the nest, Google nest hub.  So this is more of a like a tablet. And so   this allows us to create very complex structure  like this one. So imagine the page, you have some   magazine 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 is that   the 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   make them visible or invisible at certain  screen sizes. And finally, this last example,   hopefully explain will explain to you the  concept of this columns. So what bootstrap does,   how does it work is that bootstrap uses a rows  and columns. And within each row, you have   12 units to use to spare. So you can use them as  you like, if you want to spend the whole 12 units,   the units of width on the single row or on the  single column, right. So you want this main   content to be the full to have the full width,  you are free to do so you can just say 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 this defines a different breakpoints. So   these are like this kind of, you know, area so we  can define the extra small are the mobile phones   small, between small and medium. It's something  I know for example, a huge falls or difference   with the larger screen like a couple of inches,  then the medium could be tablet and the large   is going to be like desktop and so on. So you  can define the size of your column for each   and every screen size. That's what you can see  over here. So this column has multiple properties   or actually you could say multiple with assigned  to it. So uh, where we are currently at now is   this size so it's double, large. So this is for  the screens, which are bigger than 1400 pixels.   And obviously, we this is bigger. So if you  check it here, it shows that we are now at 1600.   But see what's gonna happen if we start shrinking  below this breakpoint, right? So I defined it,   I want this column to have the unit of one. And  that's why we can fit 12 columns next to each   other, right, we have 1-234-567-8910 1112. Now  what's going to happen if I start shrinking the   screen, and I'm going to reach to the breakpoint,  all of a sudden, the size of the call has changed.   And now the second size has been applied. So  now, each of the column has a size of two units.   So now, obviously, because as you remember,  as we said, this is 12. In total, we can   fit on the six columns next to each other.  And that's what happened here, right, so   123456, and another six is Jasmine wrapped. Let's  continue. And let's continue shrinking the screen.   And then we once we reach the next one, the  next breakpoint, we are falling into this rule,   or this size, which is three. Now obviously,  if we have size of three, we can just fit four,   because four times three gives us 12. And then if  I continue shrinking that, I'm going to get into   next one, which is now Call MD four, which means  each column has a size of four, so we can fit   three, if I continue shrinking, I will go into  size S M six, which means each of these has six.   And finally, at the smallest screen, each of  the column will take the full available width   for the screen. So this is how it was designed  is how this is so amazing. So yeah, let's see.   Let's see, let's learn how to use this boot  bootstrap grid now. So starting with breakpoints,   I already told you how does it work? So  bootstrap comes with predefined breakpoints,   so you have six of them. And this  breakpoints are usually you know,   they're adjusted to the most common screens,  so you can customize them if you want,   you can change it. However, I think it would  be just wise to go with the default value.   Now, what we will be doing some coding in a  second. So I want you to understand that this   grid consists of three elements. So what we always  need, if you want to start using it is grid,   it's a row. And these are columns, one or  multiple. So we do start with the container.   So the container is going to be the very first  element which we which we need, which required if   we want to work start working with the bootstrap  grid. And so let's start here. I have the starting   template here with just loaded Bootstrap, CSS and  J, s. And let's, let's create a container here.   So we could see how does it work and some  content and let's add I'm gonna add cross border   and that's open as well. Okay, so, this is our  container, as you can see, it has some margins   from the left and from the right side. So, this  very first thing you should know. So if you want   to use the container to use the full width, 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   with all available here. However, you can  also do something which is called container   combined with the with the break point. So if  you want to mix it so depending on the screen,   you want your container behave  differently, you can obviously   and easily do this with Bootstrap.  So what you're going to see here   is this S container however, when we start  shrinking, and we go below the medium break point,   then all of a sudden the container start behaving  like a container fluid right. So you can simply   say that you want to have the container fluid up  to until certain break point for example large.   So if you can see from this table, right, so this  is going to have the 100% until this resolution,   the screen size is met. So this is the very  first thing is container. Now let's move to grid   So the grid consists of rows and nickels row  there is not much special about the rows. So   let me just use a bit of CSS here, I'm going  to add some styles, which is going to help us   to see the columns. So we're going to see  them 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,   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 to, let's see, how does it look  like. So now you see our actually, maybe,   maybe you don't see this yet. But if we go to  inspector, you will see that this is our row   and this container, so container is a little  bit wider, or, and then we have a row here.   Usually you have, you can have multiple rows here.  But what is really interesting are this columns,   and I'm going to show an example in a second  with few rows. But it what's going on here.   Now, if we use just the column, bootstrap will  basically do the calculation, do the math, and   it will automatically assign the proper width for  each column, which means that if I'm gonna give   you more columns, it will calculate the width.  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.   You can also have more columns within a single  row, but probably you're 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   easier than that. So, again, breakpoints comes to  the picture. And we can use, we can use a columns   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 with a four. And this also  should have a width of four units. And now   if we add another column here, it's called  outdoor Bootstrap, it will obviously automatically   fill up their this remaining space, and we can  play with it to achieve different results right.   Now. This is, however, not as flexible,  I mean, sometimes you want to use it,   because you want to, you want your columns to  always have the same size depending I mean,   regardless of the screen size. So it is possible,  however, more often you will actually use   variable with content, which means  that except for providing the size,   you will also want to provide the breakpoint, what  does it mean? Let me show you how to quickly so   if you do call, MD, and now eight, plus  MD, four, you're gonna see that we have   this nice eight and four distinction here.  However, when we start shrinking your screen,   below medium, what's gonna happen is that our  calls will take the full width of full width   available within the container. And now as you  can also see, our container MD is changing to   the 100%. If I stick it like this, to to keep  the margins here available, however, and those   margins are gone below the certain level, because  basically, Trump assumes that if you are a mobile   user, you don't really want to have this margin.  And if you want, then you should just do an ad   manually. So I hope you do understand  now how does it work? Obviously, you can   first of all, you can change this and  to something else, and so that's large.   So this is one thing. So now we're going to  get full we've already on the medium size,   and we're going to get this ratio on the bigger  size. However, the most important thing is that   you can also mix and match the slides. Call  and the amount, 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're  getting this now. So we can, that's how you can   create a very, very, very complex examples.  And the one, let me show you quickly, one   from the, from the demo, which I was showing you.  So this is the example with those columns. Having   very actually all the possible scenario, right, so  we have the size for each and every screen size,   which allows us Whoops, not this one, this one,  which allows us to really, really create complex   scenario where you will be just, you know,  changing the size of all of them. Okay,   let's, let's continue, let's see what else we  have. I mean, there are different options for   mixing this combs together. Let's see, and  let's go through the most common ones. So   what you probably gonna need quite often is an  alignment. So let's have a look at this example.   Okay, and now we need to do water. And let's  get rid of this two rows now for a second.   And now let's make it a little bit bigger.   So I'm just gonna do this manually. So now you  can see that our row 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 items start. And then if you want  to do it in center, which is to the center, if you   want to be aligned to the to the bottom, we just  say, Stop align items. And so this is this is the,   this is the alignment, vertical alignment.  And obviously, we also might want to have   the horizontal alignment. So coming back to this,  let's have this container row, and then let's have   call of size two. 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.   And this will justify them to the center, right.  So regardless of size, they will be always aligned   to the center. And there are different options,  which you can obviously use here. So you have   around between and depending on the use case  you would like to use. Okay, and let's move   to gutters now. So the gutters are responsible  for the for the distance between the columns   here. So let's, let's use this following example.  Hold on and just add this one, what is the   base Okay. So here we have gutters, and actually   let me reset this. So now these are gutters  and I'm going to add some custom style here.   So you could see one more of think,  because it's not easily visible.   So within each column, I have created also  the extra div with the background so you   could see how actually the content  goes within within the div itself.   Okay, so before we start talking about the  gutter, I need to explain one thing, which is   used a lot within the Bootstrap. Basically, when  you've seen me using this margin, right, and I   said m y, what does it mean this mean that they  want to have margin applied in the y axis. So it's   for the top and for the bottom if I would say m  x, I was talking about the left and 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 this our default spacing and spacing and   padding and margins for the, for the columns  and the grid bootstrap grid. And now if we say G   zero, we're gonna set them to, we're going to  basically reset them to zero now if I, let's see   how it's going to happen, if I'm gonna be changing  this in the x axis was 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 budding cure from the left and the right,  let's say one, and five, right. So this, how you   how you change this in the x axis, and  let's do g y, and then a set from 1345.   So this, you need to understand what you need  to understand is that she acts are the gutter   in the exposition works actually, here on this  on the space between a column and row, and in   the y position, it's actually working in between  the columns here, right, so they're wrapped up,   and it's talking about the space over here,  which you can see on this example. Obviously,   you could try to do it with the margin and padding  duty, which gonna cover in a second. However,   this is just an easier way which was introduced  in in the newest bootstrap to work on the more   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   the components from the most common one. So let's  start with buttons. Because we use them a lot, you   can also see them being used here on the bootstrap  docs page. So let me quickly open the workspace,   I'll create a new folder for components. So you  can easily reuse my code if you want, if you want,   you can download it from the GitHub. And so let  me create a new file for a button. So I'm going   to call it HTML. And I'm just going to copy  paste the basic setup. Okay, and open this   in the live server. And now, let's, let's grab one  of the buttons actually, you know, the more you   work with the Bootstrap, obviously, the more you  get familiar 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 the colors very soon.  But now for your information. Bootstrap comes with   predefined goals, and it calls them like primary  secondary success, danger, and so on. And you can   adjust this course we're going to cover that a  little bit later. For now let's just use primary.   And let's use some do something like click me. And  let's see how it looks like. So you can see that   you have this button start right. So obviously,  if you would go with the just simple button,   it looks like this. And simply by adding these  classes BTN. And then color, you are getting this   status 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, bootstrap allows you to easily   a adjust both color as well as size and  few other properties. So for example,   here we can see that from guns, we have  the so called outline buttons, right which,   which which have ratio, just let's just do  it like here. So I'm going to add the new.   I'm going to add a new row here into  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 his   primary outline, secondary and so on and so on.  Here you see the light or actually you can see   it so it's used in certain circumstances. But  other than then just the outline. We can also   easily adjust the size of our button. So if we  want to do that Under container. By the way,   I'm going to add some classes here and my five,  we're going to learn about it as well, soon,   but this will give us some space and cure.  So if you want to do something larger like,   like the larger or smaller button, we can simply  use this btn large, so that we just use this one   here. And the same for small. So if we do btn SM,  we're going to get the small and let's add, just   compare all together, let me just remove  it. So just call it irregular button.   So you will see the difference, right. So this  is large, this is regular, and this is the small   button so you can do it. You can also disable any  button simply by adding the disabled property. And   as you can see, that's also going to be started,  right. So it's going to looks like now this,   there are a couple more so you can you have the  Blog button. So if you want to have the full wave,   you can use this blog buttons. And actually,  you know, the button is commonly very commonly   used within bootstrap because, for example, you  can use it to toggle state. So as you can see,   here, we have the active. So if I click on it,  it becomes active, so you can see the color is   changing. And then if I click again, it is getting  deactivated. And lots more because you also gonna   see, for example, buttons being used as a drop  downs, for example, like here. So it's really,   it's really wise to get familiar with with  it. And then they'll their methods related   to the button system is a bit more advanced.  So we're gonna leave it for for the lighter.   But one important thing regarding your buttons  is also that you can like everything actually in   Bootstrap, you can easily adjust it using  or adjusting the variables, which comes   with the sass with the bootstrap Sass files.  So if you want to change the generic look   of the of buttons, or you want to create new  ones, you can also do it with the use of a CSS.   Next, very commonly used components are cars,  so you're gonna see them almost everywhere.   So let's see how they look in the real world. So  here is the basic example. By the way, if you if   you check the docs, you can see that this is like  it's a really huge, tremendous amount of examples,   which you can use with Bootstrap. So we're gonna  cover the most important one. So let's start with   the the examples. The basic example shows us the  one of the very often seen cars, so the cart with   the image title, and some kind of photo isn't  exactly the footer. But yeah, let's, let's call   it this way, I'm not sure what the result are in a  second. So let's copy this one. Because it's gonna   show us the issue with what you're going to face.  If you start using this for the very first time.   Let's add some image here. So I'm going to use  image Pixon. for that. So this is very interesting   service, which allows you easily to use some  images. So you could have the real image,   and you can easily change the size. So here  we have 200 by 300. So let's see how it looks   in our case. So this is the card, actually, we  didn't want like this, we wanted to have, say 300   by 200. So something more like this one, and add  some spacing here. As you can see, every time we   refresh, we're getting some random page. So it's  it's pretty cool to see this used, it's kind of   testing, right, because you can already see we  have a different option. Now talking about it,   let's jump into the sizing. So because here our  cart has a certain sign as you can see that this   is because we added some stuff over here. If we  remove it, you're going to notice that if you   want to start that was what we're going to do in  a second if you start typing this just by hand,   right so if you just create these in this class  card, which is actually making a card looks like   a card, giving some borders to it. You're going to  notice that this gonna happen so it's gonna take   the full away if available. So how we can how we  can work have done let's go to sizing so there are   a few options. So first is obviously already known  to you So if you use a row, and then you're gonna   add, let's say a call to it, and you're gonna  wrap up your card into it. So you will be able to   decide upon the size of by using simply great. So  depending on the column size, you're going to get   smaller or bigger carts, then the next option  here will be to use these utilities. So let me   get rid of this one, or let's 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 hallway hallway   available. And now we can use the utility  which we're gonna cover. But you can already   learn this one, which is w 75, which stands for  with a 75%. And you can see this example here,   I'm not sure you can clearly see this, this  is this stands for 75%, which is over here.   This one stands for 50%, which stands over here.  So let's give it a try. Let's say 50%, we want to   have our cart fulfill the 50% of the space here.  So this is the second option. And the third one   you actually seen because we've been using this  around before, so let's just add it for the sake   of consistency. So you'd have all your cards in  all possible scenarios. So let's add just stars.   And now we have three under. Okay, now  let's get back to the to the basics. So   let's go with the new row over here. And let's do  a call tree for the sizing. Let's see how the very   basic basic card looks like. So let's do just  the card. And let's do some Lorem. Five, let's   give it here. Okay, and let's add some actually,  you know what that mean? Give it to the top,   right, and five, and let's get this one to  the top. So we could easily see this one here.   Okay, so it's healed up. So this how the,   how the how the cart looks like. So it doesn't  look good yet. But what are we gonna get,   if we're gonna add cart body, that's going to  look much better than that we've got before.   And this is already looking, giving us some nice  look, it has some padding, it has some margin. So   this is something which sometimes some people  call panels, right, so we could have those panels   over here. Now what we can do, we can add  certain elements. And it's very cool because   you can compose your cards from the sub  elements as you wish, right. So if you want to,   if you want to add, for example, the image to  our cart, you can easily do that by adding this   still within our cart. But above body can add  image with the class cart, image top and reuse   image here. And this will automatically link this  image to our cart. I'm going to skip the list   groups for a second. As you can see this, these  are kind of few panels connected to each other.   And let's move to the header and the footer  section because this is interesting. So let's   get the the another cart over here. And  instead of the image, let's use a cart   header. So this is what we're going to add here.  So let's get rid of this image here. And let's add   cart header instead. So  this is our current header.   And it's going to add as nicely looking color.  Now since we have a header, obviously, we can add   some footer as well. So let's use the example  of this one. Let me just copy paste this one.   So let's add it here. Here we have a text muted.  Let's see how it goes. 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 footer, obviously, and this is,  we don't want to see this, like not screaming,   to our use, right. So this is how you work  with that. And I think you can have really nice   results. Using that, let's have a look at  predefined examples, because they're gonna   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. So here you have also the   image examples and how to work with them. But  let's slightly 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 call three asbestos  example. And let's just grab the image again.   However, you don't have image here, we have  an image here. So what we're going to do   here, we're going to replace this image, or  actually, this three dots with image now change   the ratio. So I'll have 200 by 300. Now, let's see  how it looks. I think it's too small. So that's   because probably here   we would like to have it slightly bigger. Yeah,  now it looks better, right. So now we have three   plus three plus six, it's something to 12 is  good. And here we have this horizontal card. So   I think it really looks nice.  But other than that, we also have   something which is called card groups.  So very often you will see and we're   also going to build it at the very end of the  scenario, we're going to build a simple page.   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 least like last three  articles on the page, you would see something   like this. So what you could do, you could  create like three columns with the size of four,   so four plus four plus four, or it could use card  groups, which would also looks nice. So again,   it's pretty much the same as the normal card,  right you have a card here, the only thing you   have to remember is to add this class card group  added up. So let's have a look at this one now.   So we have a row here. And let's add a row,  the row with some margins in between. And now,   let's 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 really looks   it looks really, really nice. So this is this,  this card groups how the looks like. And as you   can see, there are many, many more here is the  example of of the cards next to each other. So   obviously, we're not going to cover all of that,  because there's, there's, there's there's a lot   examples, but let's get back to a few more  examples, because they're also interesting,   you will probably see them in for example,  like admin dashboards. So you can have this,   this card having different stats, so you  can reuse the same colors, which you've seen   when it comes to buttons. So simply by adding  this classes like background primary, to our cart,   right, so here we specified, this is just a simple  card. Let's have a look at this example. Um,   so let me add my hand see what we have space here.  Let's want to feel it added 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 cart now, right?  But if we start playing with the colors, so I'm   going to revert this text white and the background  primary. What are we going to see is that it   will change color to something like dad. So let's  duplicate this one. So we have called 312 Troops,   I know, we all should have four guards 1234. And  let's change the colors of it. So I like this,   this dark one. So let's go here and choose  background dark and text wide for the second one.   So underneath, this is the  first. So this is the second one.   By the way, this m V stands for margin bottom,  so it's adding some margin margin on the bottom   here. Don't worry, we're gonna cover margins.  In few seconds, you can see no 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, that's everyone to have text  wide and dangerous. So this is the last card here.   And while these are our  cards, and again, another row,   for last examples, let me just copy them to  make it faster. So let's just do 123 and four.   So this row, it's pasted. And  these are examples of the outline   cards. By the way, it doesn't work here that  Miss, you know, it actually does it just   looks this way, right? Heather? No setting  does it work, you're probably because   they have to be placed within a call not row. So  here, we're gonna have them. Yeah, so this are,   these are border with cars or cars with border,  and different examples of this. So as you can see,   there are plenty of variation over here, which you  can use, obviously, you can also easily align them   and play with it. And like everything. In  Bootstrap, you can also work with SASS variables   to change, for example, the distances  between cards or, or background color   or anything like that. So yeah, I mean, I really  liked this component. And I've been using this   a lot in my project. So I strongly encourage  you also to have a look because it's very,   very useful component. Okay, now we'll jump to a  different category, which is content and exactly   typography in the Bootstrap. So let me  quickly create a new folder to organize   it slightly. So we'll move to content. And I'm  just gonna grab the index. So our template from   components, and let's open this in Visual  Studio code. Okay. So bootstrap comes with   predefined styles for the for the different  types of typography. So starting with headings,   just copy paste this one, we also need to create  a new file here typography. So this is one of the   so called ut utilities and Bootstrap have more  of them. Now I can paste it, you're going to   this one, and then on ready to pull it within  our container. So let's have a roll here.   And let's save it open. And let's see what's  interesting about the about the heading. And   actually the whole typography is that  unlike almost everything in Bootstrap,   it is responsive, right? So let's check this  element. And let's see the computer size.   computed styles. So let's have a look at the font  size, which is going to be 31 point 95 pixels.   However, if I'm going to start adjusting the  screen size, you can see that this value is   actually changing. So now it's 40 pixels. And then  if we shrink it, it's going to become smaller to   what is it now 24 pixels. So This is this is also  very, very useful why working with with Bootstrap,   because obviously, it looks just better it adjust  to the screen size. Now, what bootstrap offers you   as well is the class which will make the actually  any element to look like the hand. So there are   situations, there are situations where we don't  really want to have use h1, h2 for, let's say   different reasons like SEO. So let's say these are  paragraphs looking like headings. And if we just   apply this classes like h1, h2, h3, we're gonna  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 we could see the difference.   So these are headings, let's call them real  headings. And let's call MD six two times,   let's move this one inside first  comb and this one into the other one.   So, now, we should see them side by side   let me close this one and slightly make it  bigger. So, now you can see that they look   exactly the same. So, if you want for  some reason to your whatever paragraph   looked like heading you can do it with  use of this will serve also comes with   this display headings. So there are slightly  bigger so, if you really want to something   to stand out to be more visible, you can do it  with what is this place. So, let me just show   you that. So, you use classes like display one  display do and this will give you that result   what else obviously, it comes with a lot of inline  text elements in line tags. So we can highlight we   can actually cross out text you can ask why why  they are like duplicated right. So we have to for   for this one right. So, 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 lot  longer accurate. So, the difference is actually   semantics, right. So, for example, in case of this  s here, it represents elements that are no longer   relevant or no longer accurate, while this one  was deleted. So, this is like a very, very subtle   difference. But this is what is it all about. So  that might be new to you. But there are different   since 1805, that is nothing really does matter. So  you should carefully use it. But other than that,   as you can see you have support for  like, you know, making the bold or   you know, highlighted text with the use  of outsell let me just add it to our   to our example. So again, we could let's  have a new row here. And let's have   just put it like this. Right, so we're going to  have all the examples in one place. As always,   there are more many more examples, like  abbreviation like blockquotes. So maybe   maybe let's have a look closer look at the blog  close as they might be useful for you. So oh grow.   So whatever we want to use blockquote. On let's  do some paragraph and Lorem here. So that's how   the normal looks like so it doesn't really  look different. However, if we add this class   to it. Now, it looks differently. So this is the  this is the example over here. So this is the   basic blockquote however, you can also use the  more extended version with a footer right like   here, so we can add this specific caption with  the class blockquote footer which will make it   looks differently. So let's do this. Side by Side  call. And the six, actually, I want to have two,   or maybe, let's say even, or I'm gonna change  the size, I'm gonna 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 text alignment. So we're going to check   that here, you can already see that by using text  center or as the plastic center on our element,   we can, we can change the alignment of the  text. So let's use the last example here. Right.   So let's just do it this way, just to show you how  to do it by yourself. So I'm just going to add to   this feature class, text. And, and the reason  the reason it's, its end now is because and not   right and left is because since was five, there  isn't support for art, TL. So from, you know,   in many countries, we do read from from left to  right. So in your case, it will be from left to   right and live 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, it's the other way around. So while   they added the support for the RTL, they also had  to change the naming because obviously the left   doesn't necessarily always means that so if  you use RTL than then it could be confusing.   Now with a start and end, and you're going to see  more on that, 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. Finally, bootstrap offers you   an option for the for the list. So if  for some reason you don't want your list   to have any kind of you know, dots or points,  so you can use this list unstyled here, so   let's do it quickly. So we are going to  have you l aware of class. Least unstyled.   Okay, and inside that I want to have ay  ay, ay, with the content. Line Number.   And we want to have like five of  them. Oh, no, we want to have like   $5, obviously. So now we're going to  have this line over here. And then again,   I'm going to quickly do the new order list.  And with some numbers here, a lot multiple by   so three, oh, by the way, if you're wondering  what I'm doing, I'm just using an iPad,   which allows me to create  easily the different amount of   elements simply by using this shortcut. So if you  don't know that, I strongly encourage you to check   the tutorial on the AMA, because it's gonna make  your life much more easier. Why did it like this,   I wanted to show you that this class applies only  to the to the to the immediate choice of those   of any element you use it on. So this sublines  they already have styled again. And then finally,   if you want to use inline, so this is the case  usually when you do some kind of navigation,   right? So you want to have like a nav bar right?  What they have over here, for example, this is the   this could be used or created with the use of  of the list, inline list. So all the elements   will be basically printed next to each other  and no, not one below the other. So again call   and the six multiplied by two times. And I'm  going to get this one from the documentation.   And I'm going to go 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. So  when you when you refer to this file later on,   you will clearly see so I'm going to add  something like this Heading One least   styles and gutters or why? Right, so you'll  have this separated so you can easily refer   to it and realize what we are actually talking  about. Maybe he can barely find a word here   we'll get some space in between. Okay, let's  move on. So what is also important to mention   here is that, as I mentioned you, in the beginning  of this section, the fonts are responsive.   So this is cool. But bootstrap went even further  step farther. And they came with this responsive   font sizing. So RF s project. So this is a  separate project. And this you can find it   on GitHub. Actually, this is really cool. Because  that allows you to change not only the font size,   and that's how they came up with the  name, right. So originally, they wanted to   adjust the font size, depending on the screen  size. However, now they they went even further,   because initially it was default, the look to  resize the font. But nowadays, RFS is capable for   scaling, actually, you know, basically every value  of any CSS property with unions like no margin,   pilings, border, radius, and so on, and so on. So  let me just show you a 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 div different things are  changing cure. So not only the font size,   but also the padding and margins. And  this, this, this make it you know,   to look much better. For example, on the on  the very big screens, like you know, 4k Now,   we are going to go into this one because it's  a separate project. But I think it's worth to   just just just be aware of the fact because  you might need to do certain point of time,   when it comes in, you have to work on the phones  or some padding to make them look good are on   for example, very, very, very huge screen. So  that's where this RFS might be very useful.   So let's move to the images now on  Bootstrap allows you to easily make images   responsive. So let's have a look at the  following example. So I'm gonna create   a div with a border. So you could  see how it looks like. So let's have   let's have a div, we're going to give it some  custom styles. So for the sake of this tutorial,   so with let's say 40%. And also I want to have a  border, five pixel red solid, so we could see it.   Okay, now obviously, we need some content into  it, so we could see it. So let's add image.   And let's add some logo here. Now we can  clearly see that this is our, this is our div.   So if we check this inspector, now, it's become  even smaller now because inspector pop ups here.   So now the 40% is even smaller. So yeah, this  is this is the, this is the diff, right? This,   this part, the bluish one. And this, this, this  orange is not. Okay, so as you can see, sometimes   the image the content, 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 yeah, I mean, that's, that's,  that's really basic, but also very, very, very   important. Feature feature. Then if we go to, if  we go farther, let me do h1 and y five and let's   go to the top now and let's let's have this image.  However, I'm gonna change this to image thumbnail.   So that will give our image something which  is let me enlarge it here. So it's gonna give   this style this border, rounded  border around it. Let's also do   let's make it a little bit more. So what are the  use of with 25? Let's just make it slow. Now,   finally, the last option you can see here is  how to align how to actually align images with   use of Bootstrap. So let's do that. Now. Let me  close this one. And then let's have alignment.   So basically, we're we'll be using the  float utility, which we're going to discuss   in a second. So yeah, let's just do, let's just  copy this image again. So this was the one.   And let's change this one to the float, let's say  out. So this will move on, let's make it smaller.   So this will move our image to the end.  And now obviously, if we are working with   the floating, we need to remember to use the  clear fix. So clear fix. So because otherwise,   maybe they can show you that. Let's  have some paragraph him here. Otherwise,   other elements will be floating around. So  maybe I will even use Lorem 50. So you could see   what I'm talking about, oh, it's not  enough. Okay, fine, let's use 100.   So this is floating our image. So now,  if we add the video fix over here,   basically, that's gonna 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   center the image with use of bootstrap  classes. So let's get this image again.   And we can simply do that by adding by using the  Flexbox. So diblock, X, outer, and through 25.   And this will center our image like this one. One  more thing, actually, I didn't mention is that we   can easily for example, make our image or give  our image rounded corners, like here, simply by   by adding this rounded class to it. And last  but not least, if you're working with picture,   it's also supported by Bootstrap. So here, you  have the syntax for working with the pictures   and making them also responsive, like  we did with the previous examples.   Okay, so now let's move to the utility. So  because this is also one of the most important   part of the bootstrapping, Ash, especially  taking into account that recently, downwind,   become more and more famous. And this is  so called utility first framework. So I   would like to also show you that a lot of this  utilities options are available within Bootstrap,   as well. So we're going to go through the  utilities. But I want to start, as always,   from the most, I believe, the most common and most  important one, which is spacing, however, we're   going to go through all of them. So what I did, I  prepared this sample div with some content here,   which is actually styled using styles.  And I'm going to recreate this for you   just using the bootstrap classes. So we will  achieve exactly the same effect with with the   use of the bootstrap utilities. So let me do now  let me do it. Like this. I'm gonna grab this div,   and I'm gonna 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 DS here. And let me also add   some margin here, actually, we can already start  with discussing the spacing. So you've already   seen me using some of them in the previous parts.  So let's quickly go through the to do. So it's   fairly simple, because you stay in order to use  this utility, you simply add the proper class like   Mt five, for example, which will stands for margin  top five, and this will give us some a little bit   space over here. Now as you can see, already,  M stands for margin P stands for punting. And   there are different way you can combine it. So  like we did, so usually you start with property,   and then side, so you do like margin, and then  side which is stopped, and then the value, so   the size is from zero to five, it's also accept  outer, which we're gonna use in a second.   Basically, bootstrap defined a spacer, so  like a basic value, and different different   numbers in different values here from zero to  five, are actually multiplying this by default   variables, like here is 25% of the basic spacer.  So this one will, will make it to 25%. And then   it will the two will multiply all by half. So  it's actually it's gonna, it's gonna use half   of the value three is the default spacer, and then  a foreign fiber selector, again, a bigger amounts,   like one half times more, and a three times more  than the basic value. So well, yeah, let's, let's   see, let's see, how does it work in practice.  And also, by the way, this is something which   I also mentioned to you already. So bootstrap in  the version five, change the naming convention,   so before we had top, bottom, left, right, so but  now it starts at the end because of because of   RTL, right, so right to left or left to right. And  depending on which one you use, before we go to   the spacings. Let's, let's, let's add some border  here, because that will just make it 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, which will give us this border,  it's very light, actually, I lost the   top margin. Okay, that's cool. And now, 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 is going to make   it slightly bigger. So this is what you can see  here. Now you can again, obviously define whether   you want to have the entire border or on just  the one of the borders or one of the corners. So   you can obviously define color of the border like  we've been doing before. So with the colors, you   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 on work like so we have this basic colors   defined, and we can use them for both coloring our  content like text, or also to do the backgrounds.   So this is here background, which uses  exactly the same, you know, colors,   it just uses different classes. So background,  primary background, secondary, and so on, and   so on. There are different color variations over  here, right, you can even specify the gradients,   you can you can specify the opacity.  So this is all possible with Bootstrap.   Now talking about the colors as everything is  almost everything within a bookshop, it's it's   customizable. So there are there are variables  which you can adjust if you want to change the   skin color. But you know, I hope you get to the  point that if you're using ever like you know the   primary secondary and so on and so on. So  once we define decide to change the color   scheme to change the layout of your page in  the future, you just changed a single value   and it's going to update everywhere in the in  the page Okay, so we've got this one what we   are missing to have the same kind of result over  here we need to also shrink it a little bit. So   let's do with a wave the size. So if we  go to the sizing god you're gonna see   something which I already used before. So  I want to enter W shifty, we're gonna set   this width to the 50% right, and we  need to center it, we need to center it.   So for for the centering and this. We also did it  in the previous but let's just go to the position.   So our position something different  positions is where you can define   your, your position value like static relative  absolute, what we're looking for is within the   spacing. So where we just started, just don't  below, it's horizontal centering. So we're   going to use an X outer which going to set our  margins to, to auto from on both sides or so m x,   I think I didn't mentioned it. So I think is a  good time to say about it, because maybe you've   seen it already. However, except for the specific  directions like a top bottom, a start and the end,   you also have the excesses, right, so the X will  work on the x axis, and the Y will work on the Y   axis. So the horizontal and the vertical one,  okay, so now once we have work on the on the   alignment, and the border, let's see how the this  partings look, in work. So let's do, let's do   something like this, let's say we're gonna  have padding left, actually start five,   this is gonna add as this padding 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   binding and we can do the top, we can have  different values. So we could have B, D,   five and P start on three, let's say. So we will  see the divisor and difference. Then again, we can   do p x five, which is going to give us paddings.  For both from both directions left in the right,   or we can just say if we don't specify the  direction itself, it's going to apply this   to all the directions on top right, bottom and the  left as well. Now the same applies to the margin.   So let's work on that using this paragraph. So  I'm going to add to class here. So then again,   you can see that if I do margin, top five, this  I've been using this a bit, it's going to add   me the margin here, if I want to do margin y.  So in both directions, it should change this,   just base 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.   So yeah, I will leave it to five. So it's going  to add margin from each and our interaction.   And finally, this div what we what we have  here, we have a width 50. So you already know   that right? So class, it's Don't be 54 or 50%, we  need to we need to align it. So let's do m x out   L. We said in the center. What else we have here,  we have a text alignment, we didn't talk about it.   But we I think I've used it already in the  previous example, but let's just see how   it works. So for this, we just need  to do text center. And this will do   the same here. So this this text alignment was  there before in the way we were talking about the   typography. So this is this is something you've  already seen. Now what else we have here we have   background. So if I go with background light,  and believe I'm going to get a little bit   a bit great over here, it's slightly Gray,  I'm not sure if you can see it. So there's the   background dark then which should give us pretty  much the same dark gray color and finally, text   wide for the white color. So, this is kind of  what you can find here in the clips right. So,   you can either use this primary secondary,  but there are also colors which are   predefined, like you have the blue,  indigo, purple and so on and so on.   You can also use the grayscale, right. So,  you have a gray 100 degree 300 and so on. So,   you can achieve this as well with simple use  of classes, what else we have here. So we   talked about backgrounds, we talked about the  borders, we talk about the colors, this play,   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 the for example, D none.   So this will this will make our paragraph totally  disappear. Let me revert the change. And now the   paragraph is back. What is also interest thing  is that you can also use the breakpoints, right,   we already learned about the breakpoints, we're  talking about the grid. So we can actually applies   an apply this on the certain breakpoints  on the certain screen size. So for example,   if you want to see, let's say, we want to  be something visible only on the, let's say,   medium size, let's do let's add this here.  So now our our div is visible. However,   obviously, this is doing a 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 our Oh,   nowadays, so because we had dienen. So basically,  we don't display this on starting from smallest   screen, then we have the empty blocks. So if  you're on the medium size breakpoint between   medium and large, now 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  screen size, that we that's how you can do it.   So you can specify a very complex rules. Or if we  just get rid of this, the LG neon, then it will   be just simply invisible on the small screen  until we got the medium size. And then after   we start making bigger, bigger, it will be  visible, right. So this is a very, very useful to,   for example, you know, hide something on  the mobile or show something on on mobile.   So let's get familiar with this one, because  it's gonna be very useful. Now flex, obviously,   Flex is very important in web development.  So again, instead of using the flex styles,   or procedures, properties, you can simply add the  classes, which gonna be using and utilizing the   flex. So we're gonna do another example. On that,  let's grab something from here. So, yeah, I mean,   as you already know, I mean, if you're  not familiar with Flex, then obviously,   please do check the tutorial on Flex fast, because  otherwise, it's gonna be a little bit confusing.   But other than that, if you are actually  familiar with Flex already, then you can use   just you can you can easily see in a  recommendation, how to apply this flex properties   with just simple use of the classes, right, so  the classes utilities, which will do this for us,   and we don't need to type the CSS, our sub so  basically Long story short, just to enable flex,   you should do the D flex we're gonna make, we're  gonna apply flex to this to this container.   And then we can we can start  working on a different example here.   So let's just grab one of  those from here. And let's   let's check this out. Let's add a  border so we could see it bothered Argh.   Margin to foster Sonic, you already know.  And now let's just check how it looks in.   In console. So you'll clearly  see that this the flex class   is setting this display to flex. And then the flex  row is setting this top row. And then obviously   we can we can we can we can we can just play with  it, we can have like flags, row reverse, right? So   this will reverse the the order right? So now  it's 123 here though it's like 123 here in the   code. We're going to go to columns, right?  So if you want to set change to columns,   instead the 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 justified content is really   thinking about justification. Bootstrap also helps  you to vertically align so everyone who was trying   to vertically align or sent or something,  you know that in the past, it used to be   a real pain for the developers  to deal with with the CSS, now,   you can simply just use the align middle, and  that will just set it to a middle. So also very,   very useful. Utility float we've been using  already with images, right? So simply said,   float start for then keep in mind not using  left, right, this start and the end. What else   the interaction right, when you click on it,  it's going to select the entire text rank,   this doesn't have to be zero. And this can be  selected. So a lot of you do this, which just   makes your life easier, you can change the opacity  of the symbol class and the value over here.   Change the overflow. So then again, if you want  to have a scroll or not, if you want your content   to overflow, simply say overflow visible  just underclass and your content will become   automatically visible hidden, if you want to cut  it out, like we could do with our image example,   right? If it was too big, we could just set it  to overflow hidden and then our image want to go   out of the out of the deep out of the parent div.  Obviously, if we didn't use image fluid, for make   it responsive, then it will be obviously even  visible fully right. So the part of the image will   be just got position we talked already, right.  So you can arrange, you can set it to static   relative. And then if you go decide to to go with  the absolute or relative, you can also specify   like position absolute top 50 Start 50. And this  will set it at the corresponding shadows are we   haven't used it, I believe. So let's just  quickly have a look. So as the shadow large,   so we could see the result easily. And let's  add it to our div here. So this is going to give   nice shadow around the element over here.  And then finally, we talked about sizing like   we said with a width and height, and spacing  margin bindings, text. So this is this is   about for example, rubbing and overflow for the  text right here. Vertical line and visibility   which you can, which can be also adjusted  with the use of visible or invisible class.   Okay, so now let's get back to content  and specifically to the table. So   I've got you two tables here. And we're gonna  make one of one of the stable responsive table   responsive. And also, we're gonna show you  what else we can do with the bootstrap classes,   how we can easily change and adjust it. So first,  let's, let's make it let's make this responsive.   So what I'm going to do, I'm going to add this  table responsive. MD some specifying not only do I   want this table to be responsible, I'm specifying  the break point from which onwards, I want this be   responsive. So as you can see, the upper table  is just getting shrinking, shrinking, shrinking,   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 this is  how you can you can do it and there is much more   which you can actually do with the with the tables  using using Bootstrap. So let's have a look. And   just a few examples because again, obviously as  you can see, there are a lot options here like   you know, we can play with table Footer Header  styling them easily. So I just want to show you   a few examples, which are used most often  here we got the table responses. So yeah, so   it can be always responsive. Or it can be on the  specific breakpoint. So what else we can do with   with the with the table. We can easily and this  is something which bootstrap was working on   very hard when it migrated from Bootstrap  for 205 I mean, dirty so if we do table   dog is gonna change our table to the dark  mode, which is very handy because you know,   we're just single switch, you know that a lot of  pages do have now right? This this night mode,   which programmers do love so much, at least I do.  What else if you want make it bordered simply just   type table bordered, bordered, and this will add  as the borders. And as you seen, this actually   can also specify which borders you want, which  ones you don't want to let's add table hover,   and let's see what's going to happen. So now we  can, when we hover over the given row, it's gonna   highlight. So it's also very, very useful when it  comes to the big tables with large amount of data.   You can also to make it easier for your  users to to read the data you can add,   they will strip which will basically make every  odd cell having a different color. And you can   also change colors, right? Like everything with  Bootstrap. Again, the table, primary, for example,   is going to change the color or info. And you have  a nice overview of all this variance here. Right,   so you have all the colors and options here. Yeah,  so these are the most important utilities, which   you can use with your tables. As you can see,  it's very, very easy. And you can very quickly   change and adjust your existing table because  what you have to do this is just very plain   table HTML table, or do you have to do is just to  add a proper class to it. And it's going to look   mid text to bootstrap. Okay, so now I would  like to talk about the two other components,   which are very useful to make your site more  dynamic. So if you're creating some platform,   or you know, some dashboard admins, very often you  want to throw some kind of notification. So the   two interesting components, which bootstrap offers  you to use, the first one is called alerts. So um,   this is how it looks like. You might be you  know, you familiar with those kinds 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 easy,  like most of the components within a bootstrap.   But what is most important for, except for the  fact that this is a simply simple to use, simple   to create, that you can add icons to it, if you  change color, is there, dismissible. So you know,   whenever you show it, you can also get rid of it  by just clicking this X icon. So that tells it how   to how to build it. And yeah, as you can see, this  is this is very simple, because you just need to   use a proper classes. So the first use alert, and  then a color. So this is the primary one. So we   just use an alert and alert primary. And if you're  going to make a dynamic should also keep in mind   to to use the roll. And now Bootstrap, utilize  the SVG icons. So if you want, you can easily add   your icons to the alerts. So simply  add SVG. And I'm going to show you more   icons soon. And finally, if you use a  bootstrap plugin, and the Alert Plugin all or   the compile the bootstrap JavaScript version,  which we are using here, then simply by adding   this data attribute are actually adding this  button here, right. So this is this is button.   And the one you can see over here, this  is just a button which looks like this.   And by giving them this Class button  close and this data, be as dismiss   attribute, it will work and it will automatically  do the job. So it would just remove. So   just keep in mind that when you dismiss, it's  actually being completely removed from the page   structure. Now let's move to the next  one, which is Toast and toast are   a little bit smaller elements on the page, which  are also dismissible. And they can be also shown   on request. So let's let's, let's check this  one. So I'm going to copy and this example here,   I'm going to create another row for it.  Actually, we don't need row specifically because   by default, it's not visible and we need  to use the we need to use the JavaScript to   create a button which will basically,  which will basically 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 add a space of JavaScript, and we're   gonna go through it. So let's have a button, and  the toast. So basically, the structure is pretty   simple. If you use this code probably doesn't  make sense to, you know, type it all by yourself,   simply copy the example and then adjust whatever  you need. So here you can have an image, right,   this is the image to use. You've got the header,  Bootstrap, and then some some extra information   button close with your you know, from alerts, and  then the body of your message, you can customize   it, you can add images, you can get add content,  it's up to you. And then we need this piece of   Java Script over here. So let's add script tag  here. And let's paste it see if this works.   So here we've got our toast on the left side  this time. So as you can imagine, you can easily   adjust either content or behavior. So whether  you want to whether you want to show this, this,   this toast on the left on the right side, you  can, you can easily customize it, if you want   a few of them, right, so you want to stack them  here, we have just single, single notification   single toast over here, however, maybe you want  to show two or three or four or five or more,   then they will they can also stack one below  each other. So you can you can you can just just   do that. Don't forget to add some spicing to it.  Now maybe let's have a look at this piece of piece   of JavaScript over here. Because what it does,  first, it creates a link to the into the button,   right so to the button you can see over here. So  we assign it to those trigger. And then we are   getting this toast live example, which is here.  Life toast right, so you, you get your toast by   my ID, and then you whenever this is clicked,  you simply use the Show option. There should be   the other example here. And the rest of us tried.  So if you have multiple tools you can also use   you can initialize them this way. So simply  just search for all the elements with the class   toast, and then you end up with the list of the  array of the Altos you have, and then you can,   you know, you have five different dose, you can  basically trigger all of them or just provide you   know, like number 123 or five. Very often you also  want to, you know, dynamically create them so that   it's also possible, let's see what what else you  can do. So for the placement, you can, you can,   you can place them using different CSS options.  So, to middle center, let's have a look.   Let's check this classes over here.  So here you have this div class at   container and then you have position absolute  top 50 stocks 50. So this will be the center.   Bottom, so you can play with it and  see how to place them in, in the in the   in the place you actually wanted to be placed of  your badge. So well yeah, I mean, that's, that's   really, really cool. And let's go to metals which  are available. So you can obviously we can show we   can we can hide. We can dispose if you didn't  want to get this get instance as well. Yeah,   this allows us to screw up the, the our toast  and then we can dynamically change the content of   it. So technically, you could also have just one  dose and keep on changing the content you want to   display to to do so. Yeah, I mean, really put your  hands on it because it's a thing you're gonna use   it a lot. Sooner or later. You will need this  kind of certification in your project if you're   building something more advanced. So this is a  very, very handy tool. To show us a notification   like the Facebook notification or messenger  or something, you are seeing this everywhere.   Okay, now it's time to talk about the nav bar.  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   navbar is that it's responsive by design by  default. So as soon as you shrink your screen   to the, you know, tablet to the mobile size, it's  gonna automatically collapse. And then you can   use the circled hamburger, to basically show or  hide the content, which is there, which saves a   lot space, especially when it comes to mobile  devices. So let's have a look on how does it   work with Bootstrap. As always, bootstrap 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 of this classes,   because that's not the point to you know, to learn  it, and know it by heart each and every line.   And that's not the point is we have a ducks for.  And so simply, you can start by just grabbing   the basic navbar and then do some adjustments  to it. So that's what I did. Here, I've got   the, I've got the basic example what I changed  here, because I wanted this to be dark. So   actually, you know what, let me let me do this  from scratch again. So let's get rid of this nav   bar and just use the basic one. So this is the  basic and bar. And now we want to work on death.   So personally, you could or might want to change  is whether you want to have the full width 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 to the center.   So as you can see, this is going like  here. And then if you get a container,   it's more to the center, you can see  it clearly on the on the bigger screen.   So this is fluid. And this is 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 this one I'm going to stick   to now, let's say you want to have  I want to have a logo in here.   Very simple. This is this is called this is part  which is called brand. And you can see this over   here. And here is navbar brand, right. So this is  what we what we've got here, we want to change it,   just scroll 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 not bar and I want to have an image here.   And let's grab some 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, let's change the color the size actually   make it a little bit slightly bigger. Okay, I  think it looks better now maybe even slightly.   Bigger, right? That could be nice. And now I like  the dark one. So I wanted to do the dark one. So   simply scroll down until you find a proper section  here we have the color scheme. So probably this   what we are looking for right and have different  color scheme. And then again, you can see you can   notice this pattern here. So like with the all the  other components, you just have to use the proper   class, the color class. So you could use like a  primary, if you want to have a primary color, I   will go with the navbar dark and background dark.  So if I go with the background dark only, let's   change the light to dark, you will notice that  I've got the navbar However, my links the text   over here, it's not really readable, right? So  that's why we need also this nav bar dark. So we   change this nav bar light nav bar dark, and that's  gonna change also the font color. Okay, now,   secondly, now, if you don't want something in  your nav bar, simply just search for it in here.   I didn't want to get this disabled here. And by  the way, if you are not familiar, and it might be   a little bit confusing right at the beginning,  because there are many elements over here.   I strongly encourage you to just open the 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 find Simple, press Delete,  and see whether you have the result you want,   right? If something if you if you do something  wrong, let's say you remove the wrong element   accidentally, then nothing easier, just refresh  the page, and you're gonna 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 cap based. And I got two drop downs now,   right? So now you can play have a kind of  sandbox, which you're going to work on. So yeah,   let's see, let me let me get rid of this disabled  one, because obviously, I want all my links   to be active, working in my nav bar. So this  cool, obviously, I would add some more links   here if I be doing the real page. But that's up  to the use case you want to you want to achieve,   right, you're going to find many examples with the  cold. Here container. So that's what we talk about   the placement. All right, so we have option for  the default one. So the default will basically   if I'm going to scroll down, it's gonna disappear.  Let's see, actually, let me add, let me add   something at the bottom here. Let's do and if.  And let's do some nasty thing that's gonna add.   Right, so it disappears. And then  if we do a fixed up door knock bar,   so we have enough glass mixed up, it will  just stick to the top. So regardless of your   scrolling or not, it will be always there. Now,  because it's because 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 always keep this margin   from the top for each and every element because  otherwise, nobody will simply it will ignore the   the margins, which are there, you can also do  the fixed bottom if you have it on the bottom   and stick it up 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 started scrolling, it will just stick,   go here and then stick at this at this height,  just to the top like the sticky one. Um, yeah,   a lot of different options here. And Yang  also wanted to show you two more things.   So one is this external content option.  So if you for some reason want to use this   function with the outside the nav bar itself,  you can do it in Bootstrap give you this example.   Very simple, right, so we have just nav  bar, a very simple one, as you can see,   not many, not many classes, and Toggler  over here. And 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   combining this, this this this button, this  hamburger, 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 the new component introducing disrupt  five off Canvas. So the menu on the right the   side menu which you can also use same way as  you do with the navbar. So simply use the base   example and then just start playing with this  around and changing adjusting to your needs. So   this mostly about the navbar probably sooner or  later you're gonna need that you're gonna use it   for for the big with the building or even the  application, right, a lot of the application   use it like I know Instagram and so on.  So take time to play with it. Because   because you will be using this for sure. And  now let's move to knifes nuts and dumps. So   another category of components which you can find  which I'm finding very useful and you can I hope   you will also gonna like so the base  nav is you know used for the navigation.   If you want to have this just the links right  if you can call it just the menu on certain   page so it's not so strictly like a nav bar is  not always stick. It's something like you have   Now let's see on some pages amazin.com, for  example. So as you can see this navigation and   looking at background, the basic navigation, which  is below the nav bar over here, so the base nav.   So this is exactly the same, what you've  got here, by the way, we've been talking   about different components, look how the Amazon  page is built navbar. So we just discussed this   nav over here, slider or carousel, so gold  cards, we've been covering a few minutes back,   and yeah, and then footer and some links here.  So this is the basic setup, which you use and   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. It's again, very, very simple,   right? You just have a basic structure. And then  we just use as many links as you want. However,   what is even more interesting are so called taps.  So what the dumps are tabs allows you to change   the content. So this are our tabs here, let me  show you. And then they look in an inspector.   So this is the entire so this, this is these are  tabs, and this is the content tab content, right?   It's very small here, obviously, it could be much,  much bigger, 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,   while changing to different tab. This is very  handy. You can see this a lot when you work with,   for example, the admin panels, right? So imagine  this is the settings page. And you want to say I   don't know, like here, right? So the some  settings, some general settings, profile,   adjustments, and whatever, right. And the same  with the vertical one. So imagine this is some   kind of you know, application, and you can  edit your profile. So he will be your personal   information, here will be some work related info  and so on. So this is very useful. And you can see   that this is very dynamic, right? So you don't  have to reload the page, you're gonna have all   of that on the single page. And then again, if you  go to dues and scroll to the appropriate section,   you will get this taps, right home  profile contact, very simple usage,   right. So we have two sections here, we have  pills, which are here 123. And then we have this   kind of placeholders. So we have three  of them as well. And now what do we   have to do? So this is the content going here?  What do you need to do, you need to just make sure   that you have the corresponding corresponding  IDs over here. So look, this is the Home tab,   right. So this is this is called home.  So we have this aria labeled by home.   And Id is pills home. And this and let me actually  show you this in a source code is going to be much   better visible. So let's go to our tabs. So this  is the example. Alright, so this is pills home.   And this pills home corresponds  with this button here. So   it has to match this data BS target. So it this  target, and this has to be the same. So if you're   just adding a new one, let's add something  new here. So Contacts Tab, let's add a new   one. And let's call it to own either No, maybe  just other. So we'll just change this to other.   Also this one. Right, and now we  need to have the new nav item here.   So I'm gonna 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 go and correspond.  This is the other and this is obviously other   and that's how we get the new tab in in our  Bactrim. 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 talk a little bit  about something which is not specifically a   bootstrap component, because it's separate. The  project, however, is created by the same team. And   I'm thinking about the icon. So if you go to the  extent and icons, you're going to see this page,   where you're going to see a list of alternative  options. So if you're familiar with font also,   or this, aka the icons, or whatever, I can see  we've been using, there are some options here. So   you know, feel free to use them. However,  Bootstrap, recently came up with their own   set of icons, and I really liked it, I feel  like they're really really good looking icons.   And what's most important, there are like 1500s  already. So it's a lot. And I'm pretty sure that   most of the icons you might be looking for to use  within your project inside your project, you're   gonna find it here. So how to use it, it's very  simple. You have all icons, we start here. So if   you're looking for something, 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 three  options. First, you're going to have examples,   we're going to see that you're going to have a  preview how it looks like and how you can use   it with the sample examples of like, you know how  it's going to look in the button or in the input.   Now what you can do now, to use it, you can  either download this, like SVG, so simply hit   and save, and that's going to save you the image.  And then you just loaded as you do with any kind   of an image you use on the page. Other option,  which we're going to cover later is to use it as   icon, but then you need to include the font, the  CSS for that, I wanted to show you this before we   move to to the icon font. So this is simply the  HTML is SVG. So this is like a row code of this   icon. So this path is basically different, you  know, the SVG consists of this lines paths. And   this is just you know, these are the points. So  the browser now know how to 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 our icons,  right? You can change the size   to something bigger, let's say 50, using this  width and height properties, or you can also do   it like you would do with any other HTML element.  So we can just create some class, let's say icon   and create some custom style for it. So I'm  going to call it icon and define a width.   Have 200 pixel. And that's gonna 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. As you can see, there are 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.   So let's just paste it in our head doc. And  now coming back to icon, let's grab something,   we can simply just copy this icon found this I tag  and pasted here down below, or next to our icon.   It's small, obviously. So again, how to change the  size, 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 50 pixels per second, or 200.   You can also change font color, obviously, you  just work with it like you will be doing with the   any other font. And as I said, I mean,  you know, I think you have pretty much   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 I really like this. And I really   like having those icons and everything  within the same ecosystem of Bootstrap.   Okay, so now let's talk about so important  components that bootstrap finally decide   to provide a separate section for it within  the docs. And because recently in the visual   for, they didn't have it and we have like the  separate category for forms. So bootstrap as,   like with the other components, it's making our  life easier by supplying us with the certain   classes, which makes our inputs and other form  controls simply look better. And let's, let's   see what we have here. And what we're going to do  is we're going to build some Some contact form.   So, we're not going to go into each and every  control because that would take like, you know,   probably a few hours just to just to cover all  of that. But we're going to build like the very   common contact form. And then I'm going to show  a couple more examples of what you can do also,   with the form. So yeah, let's jump into it. Let's  open this in live server. And now what we're gonna   do, we're gonna start with some text, let's  say, so let's have text center, and inside it,   I want to have h2 Get in Dodge. So that's, that's  gonna be our heading. And then let's have P, lead.   Something about questions. Do  not hesitate to contact us.   Okay, now, let's add some row. And we're  going to also add just the FY content center.   So it will be always centered. And let's also add  some margins here. And we're going to add some   for to before we're going to add forms, let's  add, also some column. So there's going to be   large, there's going to be six on the large  screens, and on the smaller one, is going to just   take the full width, and inside it, let's  start creating our form. So I'm going to form   I'm going to leave that action empty for now  because we are not adding any logic to it,   we will just creating the front end part  for it. And let's start with the label. So   if we do simple label for email, because we know  that that's what we're gonna start with, it kind   of looks like this. And let's add input type  email. Okay, and then let's give ID email. And   we can also have, we can have placeholder,  obviously, something like my email.com. So this is   how it looks like, just by using the normal forms  and loading Bootstrap 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's gonna happen. And yeah, let me let  me add, show you a few more examples. And then   we're gonna also talk about variation you can have  with with Bootstrap, forms and inputs. So let's   add another one. And let me just copy paste this  one, because we will have it for name, and name,   and name. And then that's our example.  Okay, we not gonna bother with the   spacing cue, we're gonna, we're gonna fix  it later. So we have two inputs. Now, let's   add some select. So we can add, again, label. And  there's going to be four subject of our email. And   we're going to add again, class form, label.  And then we're going to hold the subject. Okay,   and now we have subject, so just normal select,  except for the fact that we're gonna add   should we don't need this name, but  I'll just keep it class form, select.   And then we're going to add some options here.  So option, and it's going to be let's say pricing   should be pricing. And it's my copy of it,  what else we could have here possibly 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 option, and  it's gonna work like a charm. And finally,   let's add some text area. So the user could  write us some, some message. So again, label   and that's going to be our  query. So right message.   And then we're going to have a text  story on. And obviously, whoops, text   are real. It's gonna be query query calls  rows, we're going to set it to default, and   then we're going to add class form control.   Okay, so this is it maybe a little bit smaller.  Groups are meant to be smaller, not bigger.   And then finally, let's add maybe some div   with tech center, and we're going  to add some button here. So button,   its type is going to be submit. And class is  going to be btn BTN. Primary. Let's use primary   send. Okay. Thanks. And if I can  spell it properly. Yeah, so that's,   that's it. It's, it's, yeah, it could be working  for him. However, let's tune it a little bit.   With bootstrap five, we can easily  create pretty nice, pretty nice effect   on called something called floating labels.  So I'm gonna show you that in a second.   Just one more thing here is that we  could also have a placeholder, I believe.   Right, something? Yeah, this is it, and it's  gonna disappear when we start typing in the   school. However, if we want to use this floating,  then I'm going to get rid of it, I'm going to show   you a nice trick, I believe, which you're going to  use when working with Bootstrap form. So let's do   form floating. And then let's do some spacing,  EMI five. And now what we're going to do here,   we're going to just put it this inside the roof.  And what happens now is that we don't need this.   We don't need this Asha, we don't even have this.   We even have this classroom. So we were missing  this class form label, which should be there.   However, when you work with floating, we don't  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. says, let's   do let's do this, like that style. And height of  200 pixel. Okay, and a little bit smaller and 115.   And then we have form floating text  area. And in doesn't work curse,   we are actually missing this placeholder, I  believe. Yeah, it can be empty, for some reason.   Yeah, so now we can see you have this nice  floating label over here. And we can actually   do pretty much the same with our inputs. So  let's do this. Now. Let's use it for name. 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 fine. So, you can  also achieve this very interesting effect   on your inputs simply by using this this  div with the form of floating class.   Yeah, so this is it, this is how you actually  work with it. Obviously, the there are more   inputs here you have a range option. You have a  steppers and have input groups. I think this is   also interesting where you can combine input  with other elements. So I prepared for you   some examples over here. So you can examine  that by yourself and play with it. So if you   want to play with some checkboxes, you have  a really nice option like this intermediate   checkbox right so we have like checked unchecked  and this one is intermediate step available,   some ranch some file upload and and few more  examples also of the validation that's also   interesting because you can easily add the  validation messages to the to your input.   And then that's also a fairly simple where  the with the bootstrap because as you can see,   bootstrap comes with predefined labels, you  just find that this invalid check, right for   the input. And then you say what you want to  what do you want to write? So you have this   invalid feedback, right? So this will  you must agree before submitting.   And you also have this positive  feedback. So here are valid feedback,   which you use, together with along with the  input. And this, this obviously gives the user   a nice positive feedback, you know  that the message is that everything   was fine. And it did I know, for example,  the password he provided was strong enough.   Okay, so we covered a lot of different  components, which bootstrap offers us,   let's see what we haven't covered yet. And  which we're not going to do in this video,   because it will take definitely too much time.  But these components are not that common,   but they still can be useful for you. So for  example, the accordion right, so the kind of   collapse the difference between columns and the  coordinates that accordion by default works like   this, which means that you can have only one  active item, right? So we I cannot expand two   at the same time, I just have to use the one. And  then again, this is pretty much simple. I mean,   there is a lot of code over here.  But obviously, I think you can easily   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 you  change the heading. And then the content. What   else we have here, we talked about others, badges,  you also we often use them however, again, nothing   fancy, nothing, nothing complex here is just the  span of the class badge. And the to kind of give   you this look, you will see this being used,  for example, in the notification, like here,   or like this. So pretty, pretty straightforward.  Breadcrumbs. Again, if you want to show user,   where are you now, what are you doing? I mean,  if you are going farther into for example,   documentation, like here, you could show it, that  we are the components and then a breadcrumbs.   Maybe with two levels, it doesn't make much sense.  But for example, here, if you go to variables,   maybe that would make more sense for that. We  were talking about the buttons, you can obviously   use button groups as well, if you want to work  with them. So if you won't have to multiple   buttons combined into each other, we talked about  the carousel drop downs, we didn't talk about this   specifically. But they were pretty much the same  as you've seen in the nav bar. So that allows you   to show you know more info on demand, right, so  you can have some info in the nav bar. And then   if you want to have more links, you can just add  more and more dropdowns lists groups pretty much   straight forward. Similar to cards and panels  we've seen, so the panels, but they're just,   they're just just either using lists. And  that's how you that's how they look like.   Models. This is also very, very interesting and  important components. So let's have a look at this   a little bit closer. So again, mechanic  is pretty, pretty much the same. So first,   you just copy the model into your  page. So let's add it here to our body.   So this is this is this model and it's  going to be visible until we actually   fire this off. So we would have to add the  this 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, I copied. I copied this model and this  is different example. The IDs are different,   but it's triggered by our Data, target database  targets so that you need to make sure that this   matches. So you have this example model here  and they have example model here over there.   So then again, for the model itself, you have  header, you have body, and you have footer.   So, pretty much like we 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.  So if you want, you can, you can do it from   JavaScript. And you're gonna find more information  how to do it here and change the configuration,   whether you want to have a beggar applied like  this shadow in the back this this gray, which kind   of makes your eye focusing on the model. So all of  that can be controlled from, from the JavaScript.   And as always, there are like different options,  because you can have like full screen models, you   can have large models, small models extra large,  so you can you can decide and work on different   sizing. And also, also when you want to display,  whether it's on the center, or maybe to the right,   and so on, you can embed different different  things like that, for example, the YouTube videos,   so a whole lot of possibilities to choose from.  And finally, number three, obviously, when you   have models, you can also use different methods  to show toggle, right, also change it from show   to hidden, hidden to show show, hide, and dispose  and so on. So we talked about NASA nerf bars off   Canvas we also covered. So, yeah, popovers is  also interesting. That's also why we actually   used when we actually used Popper, in the first  place, the popovers are pretty similar to the   tooltips. Right, so let's see tooltips first.  So the tooltips, you know, when you hover over   a certain element you're gonna get you can show  the user a certain tooltip with extra information,   which will make this easier for them to, 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   right. So if you click on it, it's going to appear  and stays there. And if you want to hide it,   you need to unclick it. And you can decide whether  you want to whether you want to use or actually   to specifically unclick on the button, or you  want him to unclick anywhere. Finally, spinners   and scrolls by so let's start with spinners. This  is what you use when you want to load something,   right. So you just use it. And then usually  what we do, in such case we are actually   it doesn't work because I put it probably inside  Yeah, inside model. So let me get it out of oil.   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, buttons, right so now when a user   clicks on something and waiting for the feedback,  you're just giving him more information that he's   actually waiting for something and the page is  doing some logic in and behind. And then once it's   done, you simply just use your js to change it  to hide this element or to replace with something   else progress. So the progress bars pretty  straightforward here. So, depending on the value,   you set is in this attribute value now, it will  basically fill up the progress bar to show the   current status you can add labels like percentage,  you can change colors and are obviously different   the color version of of this as well as the  multiple bars. So if you want to show like you   know for example, that certain amount consists  of three different values and then you can   use different colors to show it and finally as  close by so, this is this is also very useful.   Which you can also see very often on the pages for  example, we are using this at our MD bootstrap.com   If you go and check and in kind of navigation,  we are using the scrolls by over here. So this   gives user you know the nice feeling where he she  exactly is Now, while using this documentation.   So this is also handy. It's not that common,  it's, it's a little bit more complex. But   sometimes you might want to use it. Like here  you have a navigation. However, you don't   know where exactly you are, obviously, I mean,  you can imagine here, but this visual hint, it's   always useful. And you can see, especially when  it comes to, you know, technical documentation.   Okay, so we cover a lot of components. Obviously,  there are some more to go through, how are   we going to do it in this video, but let's wrap  it up, and actually use whatever we learned   in this course, to build a proper website.  So I'm going to start with this, this this   template where we have the Bootstrap,  CSS, and J is loaded. And let's start   building our page. So I want to start with  the header. And inside this header, I would   like to have some nav bar. So let's find it out.  Let's go to components and then check for Neph.   Bar. And I'm going to grab the basic example.  And we'll start to avert, it's gonna be good   for the starting point. And I want to get rid  of this disabled. And I want to let's see what   else I want to I want to make it dark actually.  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 no more dark and bar.   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 let's now do something which is called  jumbotron, it's not there in in Bootstrap five.   However, it was for for bootstrap used to had  something like this in the past, so just like a   catchy element, which we can use to, you know,  to catch someone's attention. And I would like to   use it here on the bench. So let's go and do some,  let's do some grid. So I'm gonna do the main part.   So I'm gonna just do the semantically  correct. And then let's do a container.   And inside this container, let's have a  row. And let's have a row. And then inside,   I would like to have Call MD seven, and then  call nd five. So I didn't want to have them to be   equal, I want them. However, I still want  them to sum up up to 12. So the left side,   I would like to have some image with  obviously, the image fluid class.   And let's grab something from big sum, which you  already know. Oops. Put it here. So we have it   here on Oh, we already see that we are missing  some spacing. So let's added class, M, why five?   Okay, so here we have image. If we change ID,  we're gonna get some other image. So we can   play with it, and search for something which  will suit you most. And as far as the right   part is concerned, I would stick it to some  some catchy tagline. So let's have an h1. And   then that's our tagline. Okay, and within this  tagline, and that's also add, for example, some   paragraph and to get it a little bit down, and  let's add some Lorem. I know 13. Will that be   sufficient? Yeah, I think that's, that's  okay. It can be too long. Obviously,   normally, we would use some catchy text over here.  It can be too long, because he's learning to read   quite fast. And then let's add some button.  So we're going to have a button. So the type   is baton, and the class is BTN. And then btn  primary, and then margin, top would say five   And then that's a call to action. We want user to  do something cure. Yeah, maybe there's too much.   How about three? Yeah, I guess this better.  And I would still do it. Either. Let's do this   class, Mt. Five. Yeah, I think now it looks cool.  So this blue color response with the image. So   I really liked. Now, let's, let's  add some call to action here now. So   I'm going to show you how to create actually, the   component, which is not during  Bootstrap, like we did with jumbotron,   just to show you that Bootstrap is not only  about the components, it's also about the   utilities and classes, which you can use to  create and to design your own ideas. So let's   add another row over here. And now within this  row, just add the full call to be semantically   correct. And then let's do something like  that. I want to have BG secondary color.   BG secondary. Okay, and add some text. Here,  Lauren 10. Okay, it doesn't look good yet,   but we will make it beautiful soon. So we've got  the kind of dark background, so probably it will   be wise to change the text to white or something  lighter. Okay, and now see what I'm gonna do. I'm   actually on a also wrap it up as Card button.  So I'm using the bootstrap component here. And   I'm gonna do some spacing Q. So am I five, as  well as be while for? And let's also add the card.   Okay, and I want this everything to be text  centered. And yeah, I think I think that's okay.   Perhaps even smaller. Yeah, something  like this would do. Yeah, maybe even.   offered that looks cool. No, no, let's add some  cards here to 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 either we're going to use three cards with  an image, so we can copy the basic example or,   or we would go with this card group. So I don't  know which I like more. I think we haven't done   card group yet. So let's do a card group. In  here, however, would like to. Now we don't have   the one the button. So let's do we're going  to add this manually. So let's do this here.   I have a call. And now let's, let's place it  like this. And now let's add some images. So   I'm just gonna replace this one where it  soars with number 200 201 and then 202.   So this guy, give me an S images, and let's  just add a button. So I can type everything   yourself or you can just copy paste an existing  sample. And let's, I know should we put it above?   Or should we put it below so that's right  below. So I will do no multicar sir. So   I'm just gonna click here, here and there  with my Alt pressed and now I can type in   in a few in a few places at the same time, so  I'm going to add text center and inside this I'm   going to put our our button I'm gonna change  it to read more. And actually, you know what,   I just To the letter A. Because we need this to  be a hyperlink, and then No, our 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  I should do the other way around. So I should   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. Three  minutes, because it's a blog post,   maybe if we were doing the magazine, that would  be 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 to the basics. Okay, that's cool.  And now finally, I'm gonna do, I'm gonna do   some shortcut here, I'm gonna get the form. So  let's have this form here from here. And that's,   actually I want to have this container. And  so yeah, we'll need this row. Or I can see.   Up here it collapse. And now let's, let's cut  this one. And let's change to the landing.   Who want you to find my role now. So this is main,  this is number roll number one, row number two,   row number three. And is it yes, 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. But let's just, let's  just have something like sticky folder. Okay.   So this is footer, I'm gonna get this  footer. And I'm gonna go and add it here   as a footer. And obviously, I'm gonna  change it to dark. And light. Let's see.   Yeah, so this is our sticky footer at the bottom.  And then we will do something like copyright,   HTTPS and the bootstrap.com. And the boot, strap  that calm. Cool. So yeah, maybe this is not the   most complex site you've ever seen. But I think  we've created this like in what it was 10 minutes,   perhaps, man, I think it's even less. So I hope  that I just gave you this idea how quickly you   can really prototype your pages with the use of  the bootstrap components. And you can really,   really nicely just organize everything and  because obviously, you could write all of   that by yourself. But it would take much,  much longer be mean, you would be actually   reinventing the wheel. So you will be  fighting with you know, making this   making this responsive. And this obviously,  by default, is responsive. So it will adjust   the screen it will look perfectly on each and  every screen. 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 millions of users. So there is no point  doing this. So I hope you enjoyed this tutorial.   Okay, so finally, I wanted to show you the last  thing is how you can easily publish your page. So   what do you have to do to publish your page  you simply open the command line I have the   one which is building in Visual Studio code, but  you could also use a command line from a Windows   or terminal from Mac OS whichever you're using.  Navigate to the folder of your choice and then I'm   gonna go to CD landing, because this is where the,  the page we we just created and the Free Code Camp   is just a generic folder with all the sub  folder there is no index html file. So   I will need this index html file actually lending  to be there. And actually, you know what, let's,   let's also rename it into index html. So as you  know, then the browser will know that this is,   this is the entry file. And then what you have to  do is just simply type MDB publish, and it's gonna   ask you whether you want to use NPM, or yarn,  I'm going to stick with the NPM. It's gonna ask   about the neck. So let's do the Free Code Camp.  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 gonna be updated within just a second  and you're gonna see the URL over here, when you   click it, boom patch has been just deployed  to the server. And this is, this is their,   this is secured with SSL and it's absolutely free.  If you don't have it, yet, simply navigate to MTB   go TOCOM. And there's where you can find the  installation procedure. So, you have to install   this MDB tool so you'll be able to do NDB in your  command line, so npm install manager MTB CLI,   and just create the free account so you'll be able  to do MDB publish on your account with your your

Channel: freeCodeCamp.org

Views: 75,468

Keywords:

Id: -qfEOE4vtxE

Length: 166min 22sec (9982 seconds)

Published: Tue Dec 07 2021