‫Hey, there.
‫Welcome back.
‫Now in this lecture, let us discuss about component again, super important topic now had the important
‫Oscars component make things simpler.
‫That means there are several billion items with bootstrap.
‫Well, we can do this with our own C so that we can build components of our own.
‫For example, if you jump here with the first one, which is accordions, and if you scroll down, you
‫will see this is all built in and we can directly copy the code.
‫So if we want to include this in our website, maybe this one, we can do that.
‫All we have to do is just copy this one.
‫And now we also have information about understanding about CFS so we can utilize this custom bootstrap
‫theme, but we can also include our own genius.
‫Maybe I want to utilize different font, or maybe I want to have different color.
‫We can do that.
‫So this basically gave us power of CIUSSS as well as JavaScript because this utilized JavaScript.
‫But we also get the option to customize with the help of common bootstrap theme.
‫Also, with the help of our own CSS knowledge so we can copy this one.
‫And simply, if I try to include a cat after this, Deb and I save this one and I get back here.
‫You can see this is our accordion.
‫And remember, we can keep this inside our container to have a proper sizing that ends on basic stuff.
‫But I hope you got the idea what we are doing.
‫So if I remove this from here and add it inside, container itself.
‫Save this one.
‫So now this is inside container so that it is going to have a proper weight, we can dig this in the
‫form of Arrow.
‫So that means if I just unload this and get back here, maybe I'm going to take this mine, save this
‫one.
‫Get back here.
‫Now, this is calling something similar.
‫So I hope you got the idea for this component.
‫Basically, it's an Bardem's component to rebuild small structure on, I should say, small component
‫that we require in our day to day life on our website.
‫It can be navigation bar, it can be buttons.
‫It can be maybe something like search form or it can be something like a fortnight sidebar anything.
‫So each website can be divided into smaller versions, which is component, and then we can use them.
‫Now here is a quick homework after the decision that is, after this whole component, make sure to
‫take a break and jump on to each an individual component.
‫That means click on the component and then visit each one of them.
‫Now there are two use cases.
‫The first one is you would understand what is this called because you see this type of content on multiple
‫website, but you don't have information.
‫What we call this, we call this accordions.
‫Or maybe if you click on alert, you'll see this type of notification.
‫But what we call this, we call them either.
‫Now, here again, important thing.
‫The other important thing.
‫We have these common names that we discussed earlier.
‫So this apply head on.
‫So if I need to utilize alert, I can say alert, primary alert, danger alert, warning info.
‫So all of them have names, then we have badges to see had this type of content whenever you see these
‫type of things.
‫These are basically badges.
‫The other thing is about these bread crumbs, you see different type of website, maybe blog post or
‫product, you'll see home, then they have categories, then they have grown up name.
‫Then we have buttons of all stop us different type of buttons.
‫And it was scroll down, you will see buttons with different format.
‫And they also have hall in effect.
‫So you have different options that you can utilize if you jump on to our website to utilize the dark
‫button, which is to beat you dark one.
‫And if you jump here, this button dot.
‫So there are tons of options that we can play with.
‫So we have this terrible option and for us state.
‫And if I just jump on to pardon group, you will see when we are combining two or three words together,
‫then we have cards.
‫Important action again, you see different type of blog post that utilize these type of card.
‫So you have image by the then you have some short description about blog post and then go read.
‫So something similar we will use with our projects section.
‫We will utilize a card and we will have live demo button as a less source code.
‫So you jump there, you can scroll down and see different type of cards.
‫Maybe you don't want a button or maybe you want something like list, or maybe you want multiple button
‫start feature something else.
‫So there are tons of option predefined with bootstrap.
‫Now remember, we have this superpower by default.
‫We have power about CSC so we can take these shortcuts and then customize it according to our own and
‫our style, or see if that's fine.
‫Don't forget that we have knowledge about CSC so we can do anything.
‫Now that's all for this lecture, I hope you got the idea, what I was trying to do, I was trying to
‫give you base understanding about all the bootstrap important content.
‫Now, remember to check out all of them, because then our chances do you don't know what this speed
‫ignition is?
‫So basically when you see this type of page number, maybe on Amazon or maybe on any other e-commerce
‫blog or anything, this number thing is known as pagination, which most website utilize.
‫Or maybe if I scroll down if you see any type of pop up.
‫So here, if I take this demo, if I open this one, you see this type of pop up.
‫We call this as more model model, whatever you want to pronounce it, but we call this model.
‫So there are lot of things that you will understand.
‫One of the important thing is toast.
‫So you see this type of pop up, maybe on different website, maybe at the time of registration itself
‫on different website.
‫You see these type of pop up, or you can call as notification on Facebook or any other website.
‫So this is known as Ghost.
‫So I hope you got the basic idea what all these components are.
‫These are pre-defined small parts of our website, and we can use them anywhere we want.
‫And this happens with multiple other websites.
‫Most of the big companies design their own components, so maybe if they want to utilize these, they
‫can directly jump onto their own guide on framework and utilize them.
‫If you remember the Spotify project or if you have watched my Spotify project, you will have an omission
‫that Spotify has its own font or few other things.
‫So that's so other companies also do.
‫They have their own fonts.
‫They also have these small components behind the scene.
‫So that's all for this lecture, we will explore more things at the time of project building.
‫Now the only thing remaining is this one.
‫So form require many options.
‫And if you scroll down, you will see these swarms can be utilized, maybe for registration, maybe
‫for contact form, maybe for logging or a few other things.
‫So I strongly recommend jump on to the form section and then you can utilize different information like
‫form control, Celek checkbox and radios.
‫Just go through them because you already know success, so you have information about what is this important
‫label you know about them.
‫But here's the important thing is this phone check these are the classes that are pre-written, whether
‫bootstrap.
‫And remember, at this point, this whole CSV file that we have included, this is where the whole content
‫is.
‫I really think this audience, everything is inside this see is the spine.
‫Now let me try to open this.
‫Now, if I try to search about this container.
‫Such associate.
‫OK.
‫There are tons of things, but here you can see this whole container thing.
‫And how where does 100 percent then there is something related to padding part in the left and right
‫margin.
‫So everything is defined here.
‫Now one other important thing you can see they have defined different media queries for 768 pixels and
‫720 pixels.
‫Now you can.
‫If you want to read this, you can just copy this whole thesis and then just converted from minified
‫to normal one in minified be removed the extra spacing.
‫So that's all for this lecture, I hope you got the idea about forms as well as component.
‫Now take a break, explore all of them, just understand about them.
‫It's easy for you and all you know about Caesar, so all you have to do is just understand about DNA
‫and what has dismissed.
‫What is this now?
‫What is this popovers?
‫Just go check each one of them.
‫Don't call if you don't want, but at least know about their name.
‫So that's it.
‫We are done without a whole basic introduction with bootstrapping.
‫It's good time for us to jump on to our project, but.
‫And one other remaining thing that we will discuss during Project is icons, so Bootstrap has its own
‫icon.
‫We will utilize them during the project.
‫That's all.
‫And I see you guys in the next one.