Build Your Website Using Bootstrap

1. Introduction: Hello and welcome. I'm had units and this is create your website using Bootstrap. So first of all, what is Bootstrap? Basically, bootstrap is a website that allows us to take the already implemented and built-in classes and use them in our own website. So we can take the classes that are available for us in bootstrap and use them in our HTML files to modify and make our website look nicer. So this is the general idea about bootstrap. And in this class, we are going to check the different classes. Bootstrap, then learn how to use them. And of course, um, and our websites. Then we're going to use what we have learned so far and build our own website. And keep in mind, this website will be urllib built using Bootstrap. And of course, we'll end our class with creating the project. And this project session is for you to build and create on your own and of course post them and the project section so I can give you a review and some suggestions. And of course, in order for you to complete this class, you should be able to understand the basic elements or the basic tasks that you are going to use an HTML. So without further ado, let's get started. 2. What is Bootstrap: Hello and welcome. So today we are going to talk about Bootstrap. And bootstrap is a free and open-source CSS framework. And it basically contains CSS and JavaScript based design templates or forms, buttons, navigation, and other interface components. And if you're not familiar with HTML and CSS, I strongly encourage you to start with those before they can go back to my previous class and watch these topics, then come back here and start with Bootstrap. And for this class we are going to use the Visual Studio code. And you can go to Google and right, download Visual Studio code and press download. And you'll get the latest version. So this is it for Visual Studio code. And now let's divide our task into simpler ones. So first of all, bootstrapped is, as we said, a free and open-source CSS framework. So what does that mean? It means that whenever we are going to write our HTML and CSS file, we can always use the help of bootstrap. So instead of writing the heading and specifying its width, its color, its design, where I wanted it to be. I can simply use Bootstrap to do the work for me. And it's easier and always better to use these types of framework. So first of all, we are going to look at different interface components and how to use them using a bootstrap. Then we are going to create several components and several forms. After that, we are going to end our class with creating a full website using HTML, CSS, and Bootstrap. So this is it. Let's start with our first video. 3. Elements : So first thing to use Bootstrap is to go to bootstrap.com. And this is the homepage. So click on get started. This is the introduction, Quickstart, CSS JavaScript. And we can ignore all of these and go all the way down to our starter template. So this is the started template of bootstrap. As you can see, it includes the length for CSS, Bootstrap document that CSS and also the link for the JavaScript. So now let's copy this and go back to our Visual Studio code. I already created a file and I named it Bootstrap. Here are some images that we are going to use later, of course. And first thing we are going to do is to create the HTML file. So we can simply write index.html. This is our HTML file. We simply based all of our Bootstrap started template here. And let me just save this. And of course, if we want to check this file, we can always click, right-click on our file and open and default browser. As we can see, this is our HTML5. It says Hello World. This is the heading one that we created, or it's basically that the default in Bootstrap. So we can always remove it. And of course, if we go back here, refresh, it will no longer be available. However, this Hello World is from the title. And let me just change it and underwrite Bootstrap. So let me just create a heading. Welcome to our bootstrap website. And if I go back here and refresh, this will appear. So as we can see here, this is a heading one and this is the biggest heading. We have headings that goes from one all the way to itself. And they are all available in Bootstrap. Now, whenever we create this adding gonorrhea, whenever we write a tag one and the closing tag H2, we never really used Bootstrap here, we simply specify that this is a heading in HTML. So if I write, for example, at x2 and this is going to go back here, refresh. This is heading one and this is adding two. Now in bootstrap, we have the H1, H2, or all of these are classes and Bootstrap. So we can specify here and this H2 last, and let's specify the class H1. If I go back here, if trash, as we can see. This heading took the attributes and it looks like it is a Heading one, even though we created this heading as Heading two. However, as we can see, it is the same and these are classes in Bootstrap. Let me just adjust this and class H1 and then see it clearly before let me create a heading says sex, had him go back, refresh. As you can see, this is heading sex and it looks very small. However, if I give it a class, each one, it will look like this heading one. And this isn't basically for the headings. We can create adding 123456. Now, we also can customize the heading. So for example, if I want to write Welcome to our bootstrap website, however, I want to write this bootstrap as faded. So I can simply let me delete it. And I will drag it in small. And the class will be muted. And I'd write Bootstrap here. And that's checked as we can see. And this way we customized our heading with a very simple step and it looks a little bit better. Now. And let's go back to our code and let's learn about displaying our headings. So here we created our heading one. And for example, if I want to display it, I can use the class display one. And you'll see the difference in a minute. So display one and save go back. And as you can see, this display one will make our heading not Becker. However, it will be the size of the letters are a bit smaller. And this is it basically for the display. And of course we can display any class, for example, is if I write here the SpaceX. And it will look like the heading sex. Even though if I write edge six and write this as adding six and give it a class, display. Sx, go back, refresh. They will look exactly the same. And of course, if I give it a class is play one to be bigger than this display. Now, we also have the class lead, and it basically just make any paragraph stand out by adding it. So for example, let me delete these headings and let's create a paragraph with some learners learn aid. And let me go back here and let's see the paragraph. So this is our paragraph. Let's go back and give it a class of lead. Now, go back here. And as you can see, this is our paragraph after modification that will look. Like this. And you can agree that this is a better looking paragraph than the one before simply by adding this class lead. Now and HTML, we have the styling for elements, we have the inline next element. Let me just demonstrate some of the examples. So for example, if I want to highlight a word, I can simply use the tag MAC. So if I have, this, is the MAC tied to high light. And in this case I want to highlight this word. So if I type Mark here and those detailed highlight, Go back. And as you can see, this is the mark to highlight texts and the word highlight is actually highlighted. Of course, we also have another in-line text element. And in this case it will be the d, l or delete tag. So if I have Lorem, Let me just by lowering pipe and as we can see, we have our Lord and I will simply add the delete tag. Lauren five. Go back, refresh, and we are going to get our login paragraph, but with a straight line in the middle. And of course we also have the line that is underneath and we can use it using the Uta x2, y2 and a lower him five, go back, refresh. And this is our tag. And we have so many other things we are not going to get into so much detail. However, we can always use Bootstrap for these types of things. We don't really need to write the tag here or here. So for example, let me just delete this. And instead of using the masterclass, I can simply use the DOD mark glass using Bootstrap. So I have a paragraph, we have eight, and I can simply use the class here. Mark, go back, refresh, and as you can see, it will be highlighted. Now of course, if you want to highlight a specific elements, for example. Thus, we can always create, expand, and write the word inside and then add the class mark to it. Let me delete this. And the, the class mark from here, go back and refresh. And as we can see, we got the same exact result as before. Now let's go back to our code and delete this paragraph. We also have abbreviations, so let's create a paragraph here. And inside this paragraph we have an abbreviation for a certain word. And the title will be, for example. And this is, for example, CSS. If I go back and refresh my page, as we can see, we have this abbreviation and for a slightly smaller font size, we can add the class initialism. And let me just create another abbreviation just to see the difference. So here we also have CSS. However, we only, we also have the class. Any shell doesn't. If we go back to our browser, and as you can see, is a slightly smaller font size. And this is it for the abbreviation. And finally, the last element we are going to cover in this video as the block codes. And in this case, whenever we are going to create a block code, we need to open the block code tags and we have some learn here. So this is volume nine. Go back, refresh, and this is our code. However, we can add the glass here and it will be also blackout. As you can see, most of the classes had the same name as the tag. Just to simplify things for you guys and just to make it a little bit easier and as you can see, it is a little bit bigger and it looks nicer. Now we also have the source. Whenever we write a code, we most probably you want to add our source. So this is our cold. I can add here a figure, Doug. And let me just replace here. And this is our figure. Inside our figure, we have our code, and of course, we have our, for example, our fig caption or caption. And in this case, I will simply write Loudon seven. And here I can add the class luck code and put it to indicate that this is the caption or the footer of our block code. Go back and as you can see, this is our caption and this is our block code. So this is it basically for this video. In the next video we are going to talk about less. So see you then. 4. Lists and Colors: Moving on to less. And unless we have an unstyled list and we have something that is called inline list. So let's start with the unstyled. And this is basically as the name indicates, it is an unsorted list. And this will only apply to immediate children of the list items. So for example, let me just delete the figure. And in this case, to create a list, as we know, we can create an unordered list. Inside this unordered list. Let me just get a list item five and copy this a couple of times. So 12345. And in this case, this is the first list item. And if I go back here and refresh, and as we can see, we have an unordered list with some bullet points. However, if we don't want these points, points to appeal, we can simply use the list and styled class from bootstrap. So in our unordered list, or I can type class and use the list and style. Your back, refresh. And as you can see, the bullet points will disappear. And we also said that these characteristics will not apply on the children of the children. So let's suppose I have an our unordered list, another unordered list. In this case, it will consist of lorem ten. And if I go back here, refresh, as you can see, this bullet point will still be appearing sense this child is not the child as the first unordered list. So this is basically for the unstyled list. Let's move on to something that is called inline. And in this case, we can remove the bullet and apply some light margin with a combination of two classes. We have the list deadline and the list and line item. And we are going to explore them right now. So first thing we are going to do is to remove all of these elements. So this is our unordered list. However, we don't want it to be unstyled. We want it to be less than line. And this is basically used in navbars. Whenever we want to create an ABA, we can use this type of classes. And of course we have our first item. So let me just create home, welcome. And status. And of course, we need to add here a class called list and list and line item. And we need to add the same class here and here. And this is a shortcut if you want to use it. Whenever you want to add something in more than one place, you can click on here, for example. And click add on your keyboard and then click on the other position. Then these are, you can ride on these positions at the same time. So if I press space here, you can see that we can write here glass and list and line item. Now let's go back and refresh. And as we can see, our items are now listed on the same line, home, welcome and status. And this is basically for the inline lest. We also have so many descriptions and so many elements that you can go and check out on the Bootstrap website. There is so many elements and so many classes that you can use to make your website look better. But these are the basics that we should know before creating any website using Bootstrap. Now since we have some items, we can, let's create some others and we can talk about colors and Bootstrap using these items. So list and line item. And in this case, I'll name it. Contact Us. And in this case, if I go back to our browser and refresh our Contact Us item. So first of all, we have in Bootstrap so many colors. Let's go back to our bootstrap. And here we have the economists. So first of all, we have the primary, secondary success info, warning, danger, light, and dark. And you also have so many adjustments for these and you can go ahead and try them by yourself. However, we are going to try some of the original one and use the scholars. We can simply go to our list item and here we have our home item. We can use the text info to indicate that this is an information. And as you can see, it will turn out to blue. And for example, we have the success. So taxed success. Let's change this to danger, red text, danger. And this will be the axe dark. Now, let's go back, refresh. And as we can see, we have now home welcome status. Contact us. All of these items are different colors and we simply created the scholars or use these colors, prompt Bootstrap without using any CSS at all from our side. I hope that by now you completely understand what is Bootstrap and why we use it. So we can simply create these CSS status or characteristic in our file here. But we choose not to tense. They are already created and available for us whenever we want to use them. Now, since we talked about colors, let's talk about background color. And to use this, we can simply right B, G and dash dot for example. Let's go back here. And as we can see, this item debugger on, this item turns out dark. Now let's use VG danger, BG, success, and they are basically the same classes. But as the text, however, we write Vg to indicate that these are background. So VGS, for example, anthem. Now go back, refresh. And I know they don't match, but this is just a simple indication of how to use them. And this is it basically for the colors. We have so many cars in bootstrap. And you can go ahead and check them out from the original website. And there are super easy and nice to use and learn. And I encourage you to go and check them by yourself. So this is it for this video. And the next video we are going to discover some other components in Bootstrap. We have so many components and we're going to go through most of them. And with that being said, this is the end of this video. See you the next one. 5. Images : Hello and welcome back. And in this video we are going to start with images. So first of all, to create an image, we can simply use the geo tag. And here we need to write our source and then followed by the alternative. So this alternative is use to just indicate that this picture is, for example, let's say I have kid one kid took a theory, let's use the first image. Good one. And in this case, the image did not open for any reason whatsoever. The alternative will be this as E first. And if I go ahead and open this, we can simply use that. See that this is the first scared since we did not add the solar cycle number. Now to add the source, we can simply go to our images file. We have these images and we're going to use the good one. Picture, go back, refresh. And as we can see, this is the first picture. And you can clearly see that this picture is very large and we need to adjust it. So let's do that using Bootstrap. So first of all, this is our source. This is the alternative. Let's add here our glasses. So the first, thus we are going to add is the image fluid. Now go back, refresh. And to adjust our image, we need to add it into a specific division or a specific form. And in this case, to do that, we can simply add our division here, write def, move all of this, and add it to the division. Inside our division, I'll add the class container and now go back. And let's refresh. And this is our image now adjusted. And this is just using the division that again, our HTML file. And of course, the container class from Bootstrap. Now let's suppose I want to add some images here. So for example, I want three images. The first one here, second, third. And in this case, I need to create a row. So this is the first row. And then I need to create some columns. So this is the first column, second column, and the third column. Now, usually our browser is divided into 12 items or 12 elements. And in this case, we can divide this 1223 equal elements by using for each. So the first column will take foil, the second we'll take foil, and the third will also, they define it for it. To do that, let me just delete this. And let's create the rho. And we can create the role with either creating the deaths and then writing the class Grove, or by simply writing the dot rho and then pressing Enter. And this will automatically create a division of last row. Now we need to create the column, and in this case, let's create the column. And the first column will be four. And then we also have another column, I'm sorry me to write d dot column forward. And finally the last one would be that component also. And here we can add our pictures. So the first image, the first image will be from images and get b1. The second image will be also from images, get to. And the last image will be images. And let's go back and refresh. And as we can see, we got our images, however, they are not as we want. So I'll hit the class image fluid and the fluid here also. And finally added to this class image fluid and go back, refresh. And as we can see, we got our images here. So these are our images and they are divided into three equal sides. And of course, if we want them on the browser as a foil, we need two year fluid. Since we used the image fluid class, we can use the container fluid also. So go back, refresh. And as we can see, these are our three images. Now, let's suppose we don't want these squared edges. We can always adjust these images using the classes in Bootstrap. So inside our class here, I can see that I want this image to be rounded if I go back here. And as you can notice, that this image is a little bit rounded compared to the others. And this is basically for creating images and placing them on our website using Bootstrap. Of course, we have so many elements or so many characteristics that you can use. But we are going to explore them later while creating our websites. For now, I think that this is enough for images. Now, let's move on to another component that is able, and we'll discuss it in the next video. So see you then. 6. Tables: Hello and welcome back. In this video we are going to create some tables. So first of all, as usual, wherever we need to create any component in HTML, we simply write it down, then hit enter. So this is our table. Inside our table, as we know, we have the head and the body. So first of all, let's create the head. So this is the d-hat table head. And inside our table head, we need some headings. So let's suppose that I want to create a table that consists of a firstName, lastName, and email. And to do that, we simply need to add the heading, the first heading, that will be the first name. And then the second one, last name, finally, email address. And of course, after finishing, let just go back. This is our firstName, lastName email address, and they look too small. But for now we'll work with it. So this is the head. Let's go ahead and create our buddy. Inside our body. We need to create our first row. And inside I will grow. This will be and the first data, the firstname will be My name Heidi, and then Uranus, and then my email address, for example, 1-2-3 at gmail.com. Now, this is our first row. Then we can create another row. Inside the second row. The first name will be mark, and then the last name will be, let's suppose fountain. And then of course, the email would be one to two at email.com. Now if we go back to our browser refresh, we can see that we just created a whole table consisting of a head and body. And inside our body we have our data. So we have had units, Mark Thornton, and if we go back here, we believe that we need some adjustments on the stable since it doesn't look quite nice. So the first thing we are going to do is to give this table the attribute or the class table from bootstrap. So class table, go back, refresh. And as you can see, there is a huge difference between our first table and this table. This table is on all the page and a better looking table, and we have these lines. So the first line is more appealing than the others, since these are light maybe, and this is the heading. And of course, our first elements are on bolt and comparing them to the data. So this is just a simple word that changed that much. Now, of course, if we're not happy with the stable, we can always change and add some classes here. So for example, if I want this row to be dark. Second row to be light, I can simply add these on our table class. So for example, let's suppose I want all of the rows to be info. So I can add table and go back, refresh. As we can see, the table turned blue. Now, we don't want that. We just want the first row, for example, the first data row to be like this. So we can add here in class and we can detect or background color, I'm sorry, colored NFO, go back, refresh and disease background color. And it consists of a row that colors in which the color is blue. Now, let's move this and let's make it dark, for example. And as we can see, if we make it dark, we are not going to see the text here. So one way to deal with that is to give the text to be more appealing or more white. We have the text slide and we can use it here. And this is usually used with the background dark, and it gives a better looking Taemin. Now, we can also create here the second table or the second row, will be a background color light, and the text will be dark. And this is the opposite of the first row. And it will look nicer. And this is basically for the colors. We also have the strip grow. And to do that, we can simply use the table-striped class here. So instead of adding these classes and our, inside our rows, I can simply add here table. Go back, refresh. And as we can see, our table is now stripped. So we have the first one like this, The second one, I guess let me just add the third row. Third data row just to see the difference. And this is it. And this is how we can create a script rho, we also have the table dark or table-striped. And while it's dark, we simply add the table dark here. So dark. And of course, if I go back now, refresh as we said, it is. And at the same time, while detects as white. Now less, let's move on to the hover double rows. And in this case, just, we need to add something here. And that is the over. Go back and refresh. You can see that it is not very special. I thought however, whenever you move on the data, that will just give this effect. And it is a nice effect. And we can actually do the same thing with the dark version. Go back. And as you can see, we have this nice effect whenever we hover over any data inside our table. So this is it for the horrible rows. And now we have something that is called an active role. And this is usually used whenever we need to precise that this straw. For example, the first row is the active one and we need to move the second. Then we just switch or toggle between the active inside the first second row. However, here we just learning the basics and there's actually a class that we can use. For example, in this row when we can specify that this is an active row. Now if we go back, refresh, let me just put it as table, just table and refresh. Let's go back to see the problem. I'm sorry, to add the table active inside our class. And if we go back, refresh, and this is an active row inside our table, is very common and very used. And usually whenever you open any website, for example here, this is an active button. So whenever I press on this form, this will disappear. And this form would be active now. And we also have the hover effect here. As you can see, pretty much, where whenever you press there is a hover effect. And these are very essential and very powerful tools that you can use inside your website. Now let's move on to the table without borders. And to do that, we can simply let's just remove the active from here. And we can use the table borderless. And this will give us a table without borders. So if we go back here, refresh, as you can see, we have no boilers and it's not that good. However, it is used in some websites. And of course, if we wanted it to be darker, we can simply add the table dark. And I think that this will look a little bit nicer. Now we also have the small tables. And to do that, we can simply add the table here. And let's just remove this. Save, refresh. And this is our table. And it simply cut all the padding in half. So just to make sure that you understood the difference. This is the table as usual. And if we write tables and go back, refresh, that, we'll get a little bit smaller since the padding will be cut in half. Now, let's move on to the head now. So now this is our head. We can do the exact same thing as we did for the data. For example, we can add the year or had a class to indicate that this is the table and will be light. Of course, let's move this table small. And as you can see now we have our heading. And it's like now we can also do it as dark, of course, by simply adding here dark. And I'm not going to do that since it's the same. Now let's move on to the footer. And actually, the footer is another element that is not that commonly used. However it exists and we can simply use it after the body. So whenever we finish the for the body, we can simply add the table foot. And inside this table food, let's try some. So hello, or let's just try it footer. So did the footer and the footer. And now if we go back and refresh, we are going to get Footer, Footer, and footer. Now, finally, we also have the captions. So whenever we create a table, most probably we are going to need a caption. And to do that, we can simply add this caption right before the head. So we can append Etag that is called Caption and all users. So this is the table of all users. And it will appear bright done. Now, I think that this is enough for tables. This is the basics that you need to know whenever we want to create a table and HTML using Bootstrap. And with that being said, this is the end of this video. See you in the next one. 7. Forms: Hello and welcome back. And in this video we are going to discuss form controls. So let me go ahead and delete this. So to start, we are going to start with an input and a text area where the user can type something. So for example, if we are going to create an input, it makes sense to start with a division. So once we create our division, we can create our input and it will be of type II made, for example. And we are going to give it a class of form control. And then let's just put the placeholder is enter your email here. And then after that, let me just open this here. And as we can see, this is our input. Now, we don't really want our input to be on the top of the page. Maybe we want a little bit of space. So to do that, we can simply use one of the classes that is related to padding and in Bootstrap. So we have several. Once, for example, if we want a padding on the margin, I'm sorry, a margin on the top. We can simply use the MD and specify the the length. For example, here, I wanted to be five pixels. If I wanted to be three, again, simply type three. This is four margin, top, margin, bottom MB. And then we have an axe for X axis and of course y for y axis. So X axis means that it will give us a margin from last and dried. And y axis means that it will give us the margin from top button. And we can also specify, for example, that all of the margin should be three. And if I go back now, refresh, we can see that we have three from here and three from here, and also three from here. And if we insert anything after this input, we are going to get here another padding. And this is basically for the input, will modify it later, but for now, let me just create the other division. And then this division, we are going to have a margin, also three. And of course we need to create a text area. So the name of this text area will be an example. I don't want an ID for now. Column scroll we, okay, and now let's check what do we have. So this is our attacks till now. We can try something here. For example, P is right, and if we save it, we can see that we have bees right here. However, whenever we want to write something, we can either add to it or simply deleted and right from the beginning. And of course, it's not good-looking, so we need to modify it a little bit. Now, let's go back here. And let's see what can we do? First thing we are going to do is to add here a class from bootstrap, and it's the same as before, which would be a form control. Since we are going, we are using a form, as it makes sense to use default controller class. If I go back here and we can see that we have a text area all the way on all the browser. And the same thing for the input area. Now, we can see that the user might not understand what we are trying to say. So we can simply add, for example, here a label for the email and of course another label for the text area. So one way to do that is to simply add a label before the input. And this label will be having the foil, this specific. And let me just add an ID here. And it will be equal to input. And this is for the input. And of course, the class will be also for label. Then we are going to write something here, for example, email address. And of course, after finishing from here, I can simply remove this. Or we can type 1-2-3 at example.com. And this would make the user better understand what's going on here. So first of all, we had the email address and we also have the example here. Now let's go back. And as we can see, we need to adjust detects area. So one way to do that is to also add the label. This label will be for text area. And of course, the class will be a foreign labeled as before. And this is text area. And of course, after finishing from here, simply delete this and refresh. And as you can see, we got our email address and text area. Now, if for example, we are finding that we have so many spaces here, we can simply modify our margin. For example, here we are saying that we want to be having email address and then followed by this. And of course, followed by the text area with the text area box. Now for example, we might adjust the margin-bottom here, I'm sorry, the margin to margin-bottom. So if I do something like this and we go back refresh, we can see that we have the email address on the top of the page. And of course, the email where we can insert our email. And of course whenever we press Enter here, nothing will happen since we did not add anything or any action that might result of entering or submitting our data. For now, this is our email address and the text area. Now we also have the sizing. So we have the sizing from classes such as. Form control and then specifies a specified decide. So for example, this size, let me just change it here. I can go to our input and inside our input and inside our class, we can add form control. And then followed by LG. And this means sludge. Go back, refresh. We can see that decides got a little bit bigger. And we have three classes, the LG and the default, and the small SM. Now we can also add the disabled attribute, and this is a boolean attribute. So for example, if we have something that we are not going to show for the user since he might not be logged in. And we can do that using the disabled button. So for example, I can go back to our input. And inside our input I just simply add the disabled here. Go back, refresh. And sorry, let me just and of course we did not add it here, so let me add it. So we have disabled. And of course go back, refresh. As we can see, we got this gray email address. We can type init or even delete anything from here. Over here, we can simply add. All right, now let's go back to our code and let's talk about password and confirmation of identity. So first of all, we have our division. Let me just delete all of this and create our form. And in this form, we are going with no action, of course, since we did not learn it. And now we have our class. And then we have inside our class. Let's use the row and of course g three. And then let's create our deficient and this is column, let me give it the attribute of auto. Then we are going to create our labor. So this label will be used for email. Email, and then of course, our input type, we can specify it may be email or text, doesn't matter. And then after the type, we can add the class, forum control and of course, plain text. The placeholder will be emailed at example.com. This is deferred. First division. The second division will also have the glass island auto and we have the label for this label, it will be for the password, so I'll simply write pass, and then the class will be visually hidden. So this is the class we use whenever we want to create a password. And we'll see what we'll do in a moment. So this is the labeled input. I, of course, password to hide the input. And then the class will be for control, followed by the ID, which will be the past that we gave the label before. And of course the placeholder will be password. And then here we just need to type ID Email. So this is our second division. And in the last division we are going to create our button to just give these data to our server. So how do we do that? We simply create our, of course, the class will be auto as before. And inside this division we are simply going to create the button. The button will be conformation of identity and the type will be Submit. And then the class, we are going to give it some classes. But for now, let me just refresh this. And as you can see, we have here the email, email at example.com. Then we have the password confirmation of identity. And as we can see here, this affirmation of an identity does not look an ice. We are going to modify it, but with using Bootstrap. Now, this is email at example.com. Let me just read. This. Actually doesn't look good. So let me just decent or we can use the visually hidden here also. So we can simply add visually and then go back. And let's see. We have visually had done. And as we can see, it's not here anymore. Now, if we go back to our code, we can see that we need to adjust this button. So we have several classes here. One of the most important classes is DBT, and that indicates that this has a button. I go back now, let's see the difference. And it looks very, very different from before we had these borders and the current was not nice. And now as you can see, it looks modern and a lot nicer. So this is the first example or the first class that we are going to use. Of course, we can choose the a background, so the button will be primary for now. And of course, margin, bottom three, go back, refresh. Thus we can see we have now our button. And of course if we want to adjust this, we can simply add to our form here the margined three and go back, refresh. And we have our margin now. So this is it for the password and confirmation of identity button. You can always change anything you want if you don't like the color or if you want to change the size, anything you can go to bootstrap.com and check every element and you'll see a detailed description of each and every element in there. And of course, for example, let me just end it with this. We can change this button to be dark. And I think it looks better now with white and dark as colors. And this is it for this video. And the next video, we'll continue our discussion about forums. And we are going to introduce some new forms that we can use and they are commonly used among websites. So see you then. 8. Forms 2: Now let's talk about file input. Whenever you see something or aligned, for example, and inside this line we have the choose file attribute. This is usually a file input. Now let's create one of them just to demonstrate the use of these file inputs. So for example, the first thing we are going to do is to create our division. Inside this division, I'll give it a class from goods shrub. And this class would be the margin, of course, just to give it some margin from all angles, then we have our labor and so the label would be from file. The class will be formed labeled as usual. And then we also have the label here we can add, for example, file. But after the label, we can add our input. So the input will be of type file. The glass would be foreign control, followed by the ID just to make it for the label. And this is from file as well. Now let's go back and refresh. And as we can see, this is our label and this is our Choose file. Whenever I press on this, I can go to my desktop, Documents, Downloads, and so on. Choose any file from here and uploaded. Now, let's see the difference between this and the label without this HTML at this Bootstrap. As we can see, it doesn't look fancy, it's not that modern. However, when we added this class form control, I think that we can agree that it looks much better. Now, this isn't for the file input. We have also some other attributes we can add, for example, the multiple inputs. We can add multiple files at once. And we also have the disabled, the small, small and large file input. We can either this is the default size, we can make it smaller or larger. I'm not going to go over all of these since we numbered them before. However, you can always go to bootstrap and check for them. Something here, somewhere here. And I think that this is the basics. And we just need the basics to make our websites if you want, if you want to get dig deeper into them, you can always go to Bootstrap. But for now, this is our file input. And let's go to another topic, and this is the color picker. And here we have something that is called the color picker actually. And in this case, let's create a deliberate will be the corner for the colors, for example, for column. And class will be as usual for labor and a color. And then followed by the actual input. And in this case, we have the input of type. Hello, class for control. And let me just deleted and let's see what's going on. So if I delete the class, go back, refresh. This is our color picker FE, and press on it. It will give us all the corners available for us. This is the RGB. We can choose from here, change the numbers, or choose from here. And from the screen. However, it doesn't look nice. So one way to adjust this is to add the form controlled class, followed by the foreign control color. Go back, refresh. And as we can see, we got this nicer looking, looks better. And it will do the same job as before. However, maybe we don't want this color black as a default. So how can we modify this? So one way to do that is to go back to the input. And inside the input we have something, let me just add the idea for gut rather. And then we have something that's called a value. And inside this value, we can choose any number or any color to be the default color. So how do you choose the kind of we can go back to the color and Bootstrap the idea of any color we want. So let suppose I want this color. I can simply copy it, go back, right, hashtag, this colour, and then go back to our website, refresh. And there we go. We have our blue default color. So this is basically for the color. Now, let's go ahead and talk about the data lists. So in this case, data lists allow us to create a group of options that can be accessed and auto completed from within an input. So actually they are similar to the select elements, but come with more menu styling, limitations and difference, and we'll explore them right now. So the first thing we need to do to create this type of list as to create the label and the label will be as usual. So d4 is, will be the data list, then the class for label. And of course, this is a data list. And then followed by the actual input of type. We can actually ignore the type. And we are going to create the class for control. Then followed by the ID to be data list, then the placeholder type to surge. And of course, to create this idea, we need to have the list, data, list options. And in this case, whenever we do something like that, if we go and refresh, this is our data list. And here we can search for any, anything we want. Now, the options will be after the input. We can create our data list. And inside this data list, data list. Let me just create like this. And the idea would be data list options, as we said before. And then let's open. So the first option will be of value. Let's say divide you Lebanon than Egypt. Let's write United States. And finally, India. Now let's go back, refresh. And I think we have problem here. So this is data lists option, data list options. Let's just move clicks here, save, go back, refresh, press here. And we have our options here, Lebanon, Egypt, United States. And we can choose from them. Or we can type our own, for example, Dubai. And it will work properly, but these are some options. You might want to make them the only options, it's completely up to you. And this will come later on. Whenever we use JavaScript or whenever we're done with our website. And this isn't basically for the data list, very simple topic, but also it's very powerful and it gives us a little bit, or it makes the website a little bit nicer since the user can actually see it that he has some options or he can choose from something. And it's not just that he can only write if. And this is it basically for this video. But that being said, See you in the next one. 9. Checks And Radios: Now let's talk about the select. And this is a customized select that can be used in HTML. However, we have some classes that we can modify or net we can add to our selected. So the first thing we are going to do is to go back to our code, delete all of this, and then start from scratch. So the first thing is to create the select and with no name or ID. And I can simply say that the class should be foreign control. And let's start with our options. So the first option will be, as usual, option number one would be one, and here we can dry it. Lebanon, option to buy you two United States. Then followed by value three, Egypt. And then these are our values that just pushed them. And of course, we can add here the area LeBron, and it will be the default select examples. So this is the default select example. And of course, if I go back right here up in this, and we have DS3 choices. Now, for example, we don't want to Lebanon to be appearing in the first one. We might add the option and it will be selected. And the value will be without anybody, we don't give any value here. And of course, the option would be open this to select from Refresh. So open this to select from arpanet. We have all of these available for us. I can choose United States, Egypt, and Lebanon. However, here it's different than before. We can try anything in here. So these are the only options available for us, and we need to choose one of them. So this is basically for the default. Now we can also choose the sizing by simply adding the size here. So we have the form select, can add form select lunch. And if I go back, refresh, as we can see, this selection got bigger. And it looks clear. Now we can also choose the and this Abel. And this is the attribute that we added before, and it's a Boolean, so we can simply add it here. So this abled go back, refresh and we can choose from it. And it's very used and common websites, especially if you are not logged in and you can't choose or modify anything. And this disabled button, disabled attribute will allow the website or the creator to make sure that you're logged in to do this, or you can do it. So this is basically for the select. Now let's talk about checks and radios. So let's go ahead and delete this and create our check. So to do that, we can simply create our division and will be for shock inside our division, we are going to create our input. So the type of this input will be a checkbox. And of course, the class will be for Jack and put. And then the idea, let's say that this is a check followed by the labeled the class. So here we need to add the check and then the class will be before check labeled. So this is our first division by go. And refresh this page. We can see that we have this division here. However, we have nothing inside are labeled. So let me just add here. Check me, refresh. We have checked me. I can check or uncheck it and it will work just fine. Now, sometimes we don't want this default unchecked button here. We needed to be. So one way to do that is to make a check or say for the browser that this button is checked. So let me just copy this and paste it here. How do you do that? We can simply go to our input and add the word checked, refresh. So we have one button that is not checked and the other checkbox is checked. And you can always toggle or choose between them or check both of them since they are checkbox. Now, we have also something that is called intermediate, and it comes as the horizontal line. So let me go back here. And we cannot create it from HTML or bootstrap. It must be created using JavaScript and it's not available in HTML attributes. Now, lastly, we can create our disabled button or disabled check for example, here, instead of checked, I can simply write disabled, go back, refresh. And as you can see, I can't check this button. I singly, I think, can check the swan. This is disabled. Now, let's go and move on to radius. And in this case, let me just delete this, start again. So the form will be four. Check. The input will be of type radio. The class will be for shack input. And then followed by some idea. For example, this is a radio. And then the name will be in radio. And then after the input, we need to create our label. So for radio, and then the class will be formed. Check and label. Of course, inside our label, we can create or type anything. So for now I'll type radio, and as we can see, we have this radio input. Now we can also type it or do it as Jack simply by adding the checked here. Go back, refresh, and it's already checked. We also can use it as a default or as a disabled. But I'm not going to do that. You can simply change this word with disabled and to work just fine. Now, we have something that is very popular and very used in websites. And this is called a switch. So I switched has remarkable custom checkbox, but uses the form switched class two blender or a toggle switch. So to do that, we are going to stay and this deaf. But let me just adjust this we had before. And we also have deformed switch. So now we have the two forms. Let me delete and saw the gunk from D. And the input will be the type, will be a check box. Then we have the class for check. And then followed by the idea or not, let me just feed our label inside our label. We're going to type. Let me just did this for. And the class will be equal to four check label followed by the actual text here. So this is switch, checkbox and put. And if I go back here, refresh, We have this checkbox and switch between on and off. And we can actually do the same thing with this as we did before. We can disable it, we can make a checked as default or we can disable it while it is checked. So this isn't basically for these patterns and I think that this is enough for now. Let me just add one thing that is the enlightened checkboxes. So if for example, I don't want them to be on the horizontal or on the same column. I want them to be on the same row. For example, let me add here some checkboxes. So the first one will be the division of four, check for, check enlightened. And this enlightened will make the checkboxes on the same line. So the input will be of type checkbox. The class will be for control input. And then followed by the value, that name and option one. And of course the label will be of class. This class will be four check labeled. And of course, this is the option one. And let me just copy and paste this two more times 12. So this is option two. And the value here will be also two and here three and also three. And if I go back now, refresh, as we can see, they are all in the same line since we use the form control or foreign check in line. And I can check box any of these inputs. Now, let's move on to the checkbox toggle buttons. And in this case, let me just delete this. And let's create our checkbox button. So the first thing we are going to do is to create the checkbox and put the class will be btn check. Let's give it the same idea and then autocomplete TLB off. After that, we can simply go back on the next line and create our label. The class will be as usual, btn, BTN primary for the first time. Then go back and let's name it. Check button. Go back, refresh. And as we can see, we've got this button and it is a primary one. Now, if I wanted it to be checked, I can simply use the checked attribute here. So as you can see here, I can go back, refresh and is now checked. If I click on it, nothing will happen since we did not end add anything to now. And this is basically for the buttons. We can always abled them, all, checked them as we want. So we can, we can remove this, that disabled here and go back refresh. Thus we can see this is a disabled button. And lastly, we have the outline style. And this is usually used to simplify things. So for example, if this is the button and we're not happy with the style of this button. We're not happy with the background color. We might want to remove it. We can simply use this outline. And in this case for the label, I can simply use the BTM outline primary. Now let's go back and refresh. And as we can see, it might look nicer on some special cases. So this is it for the checks and radius. That being said, this is the end of this video. See you in the next one. 10. Range And Input: Now let's talk about range. And first of all, let me just delete this and create our labored. So this cable will be looking for the range. The class would be as usual for labeled. And this is a range. Of course, we need to create the input of type veins. We also have the class for range. And let me give it the idea of range also. Let's go back here and refresh the as we can see, we have now our range so we can move it back and forth as we can see and set it wherever we want. And we have this strange. Now, we can always modify it. We can either create some rows, so this is the row and divide the page in two different columns and make their inch smaller, for example. Or create a division in the middle of the worksite and put this page inside this division and in order for it to look better and smarter. Because this is not a very good-looking range. However, it has all the characteristics that we need. Now we can always add the disabled attribute. We can add a minimum and the maximum. And I encourage you to try them by yourself. And of course, they are all available on the Bootstrap website. Now, let's move on to another very important form that is the input group. And to do that, let me just delete this and create our division. And inside our division, we'll give it the class. This class would be the input group, and I'll add the margin on all sides. Inside this class, we are going to have our expand element inside this band. I'll simply write the ad to indicate that this is a username. And of course the class would be input text. And as we can see now, if I go back and refresh our page, we're going to get this at symbol and and the spokes. And as we can see, this is our division. We created the span. Now, we need to create our input where the user can type has uttered. In this case, we are going to create the input of type text. Declares will be as usual for control, and the placeholder will be in the username. And of course you can add anything you want after that, but we'll just use this for now. And as we can see, this is our ad username. We can write whatever we want here. And of course we can add a button or something like that just to indicate that we want to submit. Or maybe we have a form. So if we have several elements, we need to just filled them all and then click on submit to submit our information all at once. So this is it for the username. For example, if we want to add this email, we can use the span, for example, at the bottom here. And of course, I can add example.com to indicate that this is the end. And if I try that one more time, we have username here and example.com. And you might just want to decrease the width or the length of this. Since its very long, it's on all the picture on the website. You can just create a division and maybe just half of the page or in the middle of the page or so on. So this is basically for the email. Now, let's suppose that we are not sure about the example.com. In this case, we can add another input after this span and we can indicate it as before. So let me just move this and copy paste. And of course we can change the place holder to add example.com, go back and refresh. And as we can see, we've got now our new division or our new input. In this case, we can write our username here at, and of course, the example.com, we need to change it to anything that we have. Now, one more thing to add, for example, if we want to make this and put looked better, we can always use the input-group small or input to Group large food, a larger input. So input groups small. Now go back, refresh, and as you can see, it got smaller. And of course the LG will be bigger. And as we can see, this is our input now. Now we can also add the checkboxes and radios inside our options. So for example, instead of specifying the type of the input as text, we can specify it as it checkbox. Now, of course we need to change this and we give it the class bug shack. And this is the input. Go back, refresh. Does we can see we got this little checkbox here. And when we can modify it, we can also add it instead of the add here. And we can do anything we want in this division. Now we can also add multiple add-ons. So for example, instead of specifying this or maybe it just delete this. And before this, let me just get back to our default. And instead of this, I'll add another span element with a class of input. Group text. And here I'm going to add the example.com and go back refresh. And as you can see, we have to span elements and these indicate multiple add ons. Now we can also add the button add ons. So instead of creating a span, we can create an actual button. In this case, let me just delete the second one, or maybe the third. And let's create a button of class BTN, PT and outline secondary. And of course, let's try something. So this is a button and go back refresh. And as we can see, we got our button here. We can hover over it and it gives us a nice effect. Now, we also have something that is called buttons, drop-downs. And in this case, we can create our button and we can add some elements to this button. So whenever we press on it, these elements appear and we can choose from them. So to do that, let's delete this and I'll keep the division and the classes inside the division. So the first thing we are going to do is to create the class, the button and the classes will be the end btn, outline and secondary as usual. And now we are going to add another class for the dropdown, and it's called a drop-down toggled. And in this case, the type will be a button. And of course, whenever we need to use the dropdown, we need to update the data. So data ps will be equal to the drop-down. And in this case, we set, can add our button. So inside this button we have, let's create an unordered list. So the unordered list will be of a class that is called a drop-down menu. So this is our class and the list items. Inside the last item we are going to create a link. And this is the hyperlink. And whenever you want to create a link without any reference, you can simply write the hashtag year and then work as usual. So the class would be a dropdown item. Remember that all of these classes are boosts the Bootstrap classes, and we're not responsible for writing them. We can simply use them right now. And of course inside this, we can create, for example, let's say homepage. Let me copy this and paste it several times, and just make them on separate lines. And here, let's say mission. Let's say contact us. And let's say feedback. Sounds good. And this is our unordered list. We have the drop-down menu class inside our unordered list than inside each list item, we have a link and this link is Avid glass dropdown item. Now we only have to create our input here. So this is our input and here, this should not be here. We can simply move it to here and create the button. So let me just try it, maybe button. And this is it. Just make it on the same line. And now, good. So the type will be text, maybe. So we'll leave it as a text. And let's write some classes. So the class will be as usual for control. And we also adjust this. And now I think we good, let's go back and refresh. And as you can see, we got our button. And whenever we press on it, we have our home Michigan Contact Us and feedback. Now remember whenever we rest on something, nothing will happen since we did not add any action to our atlas. So this is basically for the button with dropdowns. We can always change the location of the button. For example, here I created it on the left, you get created on the bride or maybe both. So this is up to you. And this is it basically, we can just modify something here. So for example, let's suppose I have the home Michelle Contact Us and feedback on one side. And I need a separate line to separate these from another thing that might, that we might want to add. So to do that, we can simply add and our unordered list, the list item. And this list item will basically be the item and the class will be a drop-down divider. And this is how we do it. So now we have a divider, whatever we're tried another thing here, let's suppose we wrote goodbye and go back to fresh and press one more time. We can see that the Goodbye is different and separated from the others. And I think here I made a mistake. So this drop-down refresh and it's good now. So these are our, our first side and this is the second side separated by this line. So this is basically for the buttons. So we talked about several input groups and how to create them. We also talked about ranges. And I think that these are enough for now. And with that being said, this is the end of this video. See you in the next one. 11. Layout: Hello and welcome back. And in this video we are going to discuss layout. So let's go back. And basically what we are going to do is to create several pages or several forms of a website. And of course we need to modify them and make them look like a modern website. So first of all, let me just delete this and go here. We can start with creating our division. And we are going to start with the my gym margin bottom utility. And this is basically, as we can say, m3. So let me just write it B5. So instead of specifying that, instead of saying that we indeed all of the edges to be at least three pixels. We can specify that we only need the bottom. And of course, after getting out the division, we can start with creating our label. So delivered will be, let me just delete the for. The class will be equal to four labeled. And then we have the example here. Now let's move on to our input side. The input will be typed text. Then the class will be form control as usual. And of course, let me just create the placeholder here. And the placeholder will be username maybe. And now if I go back right here, refresh, this is what we are going to get. Now, let's suppose I need the first name and last name, or the email or password and password. So for example, in this case I can create another division. And in this case, if I refresh now, I am going to get these two separate divisions on separate lines. Maybe we don't want that. Maybe we just want the username to be, to be taken half of the page and the, for example, the firstname half and the last name, the second half. So let me just adjust the placeholder to be first name and last name. Now go back. And this is firstName, lastName. Now one way to do that is to create our new division. And inside this division, place those two divisions. So first of all, our division should be of a class row to indicate that this is our dough. And of course, you need the explicit here. And these are glasses column. So these are our two columns inside our drone about refresh. And as we can see, we've got our two divisions and they are separated in the middle. So now let's continue. Our page, so we have now our firstName, lastName. So I'll simply delete this and write email and password until it this also. So the placeholder here, just deleted and then delete the last name. Here we have the email and password. As usual, whenever we use password, the type of the input will be also password. Now, after creating these two columns inside our drove, we can create another row. And in this case, you can just create another row here. Inside this row, we are going to divide our columns and two, maybe three separate. Or let me just add the address first of all and then create this. So this is our drone and we only have one column. And this column will be consisting of an input and the type will be taxed. The class will be for control. And of course the placeholder will be address. Now if I go back here, refresh, we also have our address, but as you can see, we have no space between them. So maybe just add a little bit of a margin top here. So inside our glass, we can, inside this class of row margin top, maybe three. That's enough refresh. And as we can see, we got a little bit of space between the two inputs. Now, going back here, this is our first address. Now where we have a second address, let me copy it and paste it. So here we have added this to go back, refresh. And as we can see, we have address one and address two, but maybe just modified them. So instead of just one, we can simply write an example of an address. So Main Street, this is the placeholder. And here we can simply add the building and the flow. And since we did not specify addresses, we need to create our own labels. So inside the scholar, the label will be of type. So for April and then followed by the actual labor, that is the address. And of course, let me just copy this basis here and changed just to address, to go back and refresh. And as we can see, we got our addresses. Now, let's add the city, state, and zip code. And in this case, we need to create them in one division and they will take up all this website. However, we need to divide our website. And as we said, we have 12. This website. So we can divide this 12. For example, maybe the city can take up to eight, and the other 24, maybe five. So let's figure that out. Now. Let's go back to our code. And inside our joe Now we need to create our columns. So the first column will be, let's say sex. I think sex is good. And inside this, we are going to create our set M. So the label will be of glass for L1. So this is for labeled. And then the label would be the city. Then the input. So taxed as usual class for control and then followed by the other, the state. And let me just refresh and see what's going on. So this is our city. It took to half the page. We still have the other half. And in this case, I can simply copy and pasted back. However, we don't want the state to take up all of the rest of the page we needed to take up to four. Now go back, refresh. We have our state here, and then finally followed by our zip code. So I can simply copy this, again, based change, this, refresh, and now we have our city, state and zip code. So let me just modify this. So this is the code. So this is it basically we can also modify some of the elements here. So for example, if we know the exact number of the states and the exact names, we can simply add the option here. And then whenever the user just press on this option, all of the options appear and he can choose from them. And he can always write something here. However, as we said, whenever we write something, nothing will happen. And since we did not add any action for this form, and I think that this is enough. We can always add a simple button here, for example, to submit our form. And I think that this is it for this website. Let's create another one by simply modifying some of the elements here. So for example, maybe we need the email and password, and then we need to check some of the options. So let me just delete all of this. And inside our draw we have email password and I think we don't need all of this. This is version. This is the second division. This is deep down. And now we can create another, go inside the straw. We are going to have the first column and it will take up to two inside this, let's try something so span, as usual are maybe let's create a label. Thing gets better. And the class would be for label. Then followed by shack. And I think this is enough for now. We have here our check, let me just adjusted. So inside our column, I'm sorry, inside our row, I'll add maybe MD5. And as we can see, we have this five. Let me make it from all the sides. Now we have our check here. And of course, let's create the other column. And it will take up to all the rest of the page. And inside this column we can create some options. So let's create our chat box. And we can simply type input, type checkbox. And of course, we have several classes to add. One of them is for check input and this is the most important one. Go back to fresh, we have our chat box now. So this is our class and this is our input. We can always add it to a division and a class for shack. And then just this is our division. And if we want to write something, for example, home. And as you can see, this is our first input. Can always add several inputs here. So to check them. And then finally add the button here, for example, sign up or something like that. And I think that this is enough for now. You can always play with these elements. For example, you can put them all on the same line, or using the inline forms. Or you can put them, each element and a line. And this depends on you, how you want your website to look like, and different types of pages. With that being said, this is the end of this video. See you in the next one. 12. Components: Hello and welcome back. And in this video, we are going to discuss some components in Bootstrap. The first one will be the accordion. So let me just create one so you better understand what an accordion. So first of all, to create it, as usual, we need to create a division. Inside this division, the glass will be guardian. And let me give it an ID. So this is accordion. Also inside this division, we are going to create an accordion item. So that accordion item, this is another division. Inside this division, we can create our accordion. So this is the accordion item. It consists of a header and a button. So to create the headless, create an H2 header. The class will be accordion Hadoop. And we can simply type something here. So this is item one, then followed by the button and the class, and this button will be accordion button. The type as usual will be button. And then of course, since we are going to use the accordion, let's just say something here. For example, this is a cold yen item one. And let me just place it here. Of course, delete this item one since we just added it to our button. Now if I go back and refresh, so this is our accordion. Now, whenever we add something to this accordion and press on it, it will appear here. So let's create, after creating the heading, we are going to add the division. This is the second division inside the item. And then this division, we are going to give it a class of accordion labs. And then of course, let me just create the buddy. So here division will be of a class accordion. But inside this division, let's create the paragraph. Lauren. Maybe. Go back, refresh. And this is our paragraph. Now, let's start adding some ideas, since we can't use it to now we can just make this paragraph disappear. So to do that, we need to add two things here. So data, BS toggle to collapse and the VS target. And I gave it the collapse one just to add it inside the second division. Now. So here, inside our second division, let's create our ID collapse. One, of course. And let's just modify this. Here. We have the Division ID collapse one class and we need also to write data BS, parent. And in this case, it will be the accordion, that is this one before. So this band will be equal to. Now. If I press on this, it will disappear. And if I press on it one more time, it will appeal. And we can do the same thing for several accordions. So we can just copy this two more times and then play pays it. Pays it. So let me just copy it. And I think we'll go go back, refresh. As we can see, we have our three accordions and we can toggle between them. However, they are related now, since we have the same ID and the same ideas actually for several items in China inside these accordion. So we need to change ideas just to make sure that they are completely independent. So as you can see, if I press on this, those two will change and we don't want actually that to happen, so we can simply change these ideas. So for example here I can name it according to, according to, and then we're good. And I think this is it for the accordion. Let's move on to alerts. So what are alerts? Actually, alerts are something that provide us with a feedback message for a typical user. Any action that we perform. And we won the user to get this message. We can actually provide them with this message using the alert class available for us and bootstrap. And they are actually a JavaScript plugin. Then Nazi SS, they use JavaScript. So to do that, let me just delete this and start from scratch. So let suppose I want to create an alert. We can simply create our division. Inside this division, the class who'd be alert and other primary. Inside this division. We can try it. Lauren. And we can actually specified the role to be the limit. Now, let's move on and it will appear as an alert. Now, we can also create another alert for dismissing something. So for example, let me just delete this and create our class which will be alert. And inside our division. Let's add a few classes here. So we have the alert, warning and alert dismissible class. We also have the fade and show. Of course, the role will be alert. And then after creating this division, let's create a paragraph. So inside this paragraph, I'm going to write Lorem seven and then followed by the button. And this will be the X button. So type will be button. And then after this button we have the class BTN, clothes and data, BS, dismiss. It will be equal to alert. And of course, we can specify the label to be equal to close. Now if we go back refresh, we're going to get this dismiss alert. And it is JavaScript again, and it's possible to dismiss any alert in line. And so for example, if you press on this, it will disappear. And so we can use this whenever something wrong happened or the user just entered something that should not be added. We can just make this pop out and say, for example, this is wrong, but just try this again or try this method or so on. And the user can press on the X button and it will disappear automatically. So this is for the alert. I encourage you to go ahead and check them out. They're nice and you can use so many of them in different cases. Now, let's move on to badges. So let's suppose that we have a heading. And inside our heading, we want to add that this item is new. So suppose I have an H1 inside this one. We have, for example, Item one, and we want to specify that this item is nu. One way to do that is by gaining the span element and then add to this a glass of batch. And we can change the color so background-color would be secondary. And I can simply add new here. Now if you go back and refresh, we're going to see item one and with this new and decide to indicate that this is a new item. And this is called a batch. Now we can use, we can use it on any item or an, any elements. So this is adding one. You can use it for headings one through six, and of course, paragraphs, buttons and so on. So let me just demonstrate the use of it on a button. So let's suppose I have a button. Inside this button. We have the type here, of course. And then we have the classes. So btn, btn-primary. Now we can create, for example, let's suppose I want to create the notification button. So this is not defeat patients. And then create the class span element. The class will be badge and BG, secondary. And inside dispatch, Let me just add. Specific number, for example, I have nine notifications. So go back, refresh. We have this button modifications. And here we have our badge indicating that we have nine multiplications. Now, we also have some background colors that we might want to change. So here we use the primary, we have also the secondary success, danger, warning, and then for light and dark. So finally, we still have the pill badges and they are usually rounded. So as we can see here, they are EBIT grounded, then not fully squared, but maybe want them as a belt. We can simply use the downloaded pill glass here. So let me idea sounded. Class, go back and refresh. And as we can see, it's now counted. So let me just adjust this just so you can see it clearer. So this is our span class element, I'm sorry, so that the class will be grounded and the background will be primary. Now, let's try something here. So this is primary. And go back refresh. And as you can see, we've got our rounded. But so this is it for the badges. Now, since we are using some buttons here, let's just talk about buttons. It will be more. So. For example, this is a button. So as we said, the type should be button. And then classes we are going to use. The btn is essential and DBD and to choose the colors. So I'm going to choose primary. So this is a button, one, refresh. So this is our first button. As we said, we have several types and several others. So for example, if I wanted to be dug, I can simply add dark here, refresh. I'm getting this dark button. Now. Suppose that I don't want this button to be other background, Doug, I wanted to be transparent. And in this case I can use the outline buttons I already implemented before, but it's better to just say it when we are going, we were discussing the button element. So in this case, we can use the outline began, outlined, primary, and go back refresh. As we can see, the borders of the button are now blue. However, inside it's white. And whenever we hover over it, we can see that this is the effect. It gives us the effect of an ordinary button. And this is for the outer button. We have also sizes. We can choose the size of our butter. So if I go back here and BTN, large, you're back and refresh. We can see that our button got bigger and we also have the small and this able glasses. And I'm not going to use them since they are the same. And I think that this is enough about buttons. We have several elements and several characteristics, several classes that we can use an button. And I advise you to tie them by yourself and get really good at them so you don't need to go to the documentation anymore. You can just simply use them whenever you want. But that being said, this is the end of this video. See you in the next one. 13. Cards: Hello and welcome back. And in this video we are going to talk about cards. So going to customize our own parts using Bootstrap classes. And we have so many characteristics and so many classes that we can use from. So let's go ahead and start with our first one. So the first thing we are going to do is to create our division class. And inside this division, the class will be card since we are creating a guard. And let me just adjust the width of this. Got to be 18 RER. And now we can work with discard. So let us create an image. So the image will be images second pig. And of course I can add an alternative, so second picture. And now if I go back and refresh, you can see that the picture is very long and we need to adjust this. And actually we have a class in Bootstrap that will help us in God. And this is a current image. And now let's go back and refresh there as we can see, regard our picture. And it looks nice. Now we can add some text here. For example, we can add a heading and then followed by a paragraph that describes the picture. And you can do that creating, we can create a division. Inside this division, we have the heading, so one and then paragraph nor him eight. And as we can see now, if we go back and refresh, we have our guide called one Lorem Ipsum, And this is our paragraph. And however, we also have a class in Bootstrap to help us and did kind Bali and this is a card but the class so-called buddy. Now if we go back and refresh, we can notice the difference. We have some padding from left to right and bottom and top. And of course we also have some classes inside the body. And one of them is the title and the other SD card text. So remember that you can ignore them, but if we go back and refresh, you can see that they look better whenever you use this type of classes, so called body car title and contexts. And finally, let me just add maybe a link here. And in this link, the class should be a button, button primary. And of course, let me just try go. If we refresh, we have now our complete current. We have the picture inside. We have the body paragraph heading and the button. So this is S. So this is the first example. And let us go back and create another example just to understand it better. So maybe our card doesn't need an image. So let me delete this. And let's keep the current body. However, if we don't have an image, maybe it's a good choice to create our header. So let me create the code Hadoop division. And inside this, I'm just simply write anything. Let me just read. This is the header. Now if we go back and refresh, we can see that we no longer have our image. However, we have something. And it looks like this, the header of our code. And you can agree that this is a lot nicer than simply writing guideline and then writing our paragraphs, we can now delete our card one. And we have the header here and the paragraph on the body. Now if we go back to our website, we can see that all of the elements from Hadar, title and paragraph and also the button on the left side of our guide. Maybe we want them to be on the right side or so. One way to deal with that is to create inside our title or maybe our division. So here we have our God. We can add the text center. And now if you go back and refresh, we can see that all of the elements are now centered. And if we want them to be at the end, we can simply use the text and class refresh. And now they are on the right side of our cars. Now, this is for the basics. How can we create something that is more complicated or a little bit more complex? For example, if we want to create a navigation inside our current, let me go ahead and delete this and start from scratch. So the first thing we are going to do is to create our current division. And I'm going to add to it the text center plus. And now let's create our cart Hadoop, so-called. Either. Inside our code header, I'm going to create our unordered list. So here we're going to create a small number. However, we are going to discuss it in details in the next videos. But for now we're going to create our unordered list. Inside this list, we have our list item. Inside this list item we have our length. And this list item will have the class nav item. The unordered list will have the class nav and now abs. But either tabs. And all of these are classes in bootstrap. And of course, our length, we need to add some classes. So the class will be nav link and then this is the first list item. So iron make it active. And of course, let me just type something years, so home. And now if you go back and refresh, we can see that we got our guide and it is and the all of the page. And we have our button or our first element list item here and it's active, it's called home. Now let's go back and copy this list item two more times. Here and here. Let me just change this home, maybe Mission and then product. Now let's go back and refresh. And as you can see, we have three items. However, we don't want them to be active. So let me just delete this from here and here. And I think we can go back and refresh. And as you can see, this is the first list element and it is active. However, all of these are not active yet. Now, if we don't want our guard to be taking all of our website, we can add the style and the width will be, will be 18 RAM RAM. Now let's go back and refresh. And this is our guide. Now, we should add some heading or title, year and the body. And of course you can adjust this bird however you want. For example, if you wanted to, for example, on the half of the page, you can adjust the width of the guys from here. And now let's go back and add. So this is our header and it finishes here. We can create another division called body inside the skirt buddy. Let's create our heading. This is the herding of and then some paragraph Lorem six. Now let's add some classes here. So plus current title and paragraph text. Now if you go back refresh, we have our complete code and this text centered, we have home machine product. This is heading up the card and the pie graph that we want. Now, if you notice, if I press on these buttons, nothing will happen since we did not add any JavaScript that can toggle between the atoms of each element. But for now we have this as active and all of these as normal elements. Now, we have something that is called image overlays. And let's go ahead and create one of those just to see the difference between them and our normal current. So the first thing we are going to do is to create our code. And we do that by simply creating our division. And the class would be incurred and the background color will be dark, and then detects will be white. Now, after finishing of division, let's create our image. So the image will be as the image before second peg. And of course, we need to add the cult image class. Then let's create our body. And to do that will simply create a new division. However, we need this body to be on our picture. And to do that we simply add the class, that image overlay. Then go back and try it, whatever we want here. So for example, this is a title. And if I go back and of course, the title class and the paragraph would be taxed plus lowering eight as usual. Now let's go back and refresh. And as we can see, we got our picture. And inside this picture we have our title and paragraph. Now we can always adjust the width of a picture by simply adding the style here. The width to be 18 RAM for now. Now let's go back and refresh. And as we can see, we got our picture and inside this picture we have our title and paragraph, and they are on top of each other. Now, we have so many other elements and characteristics that we can add to our guide and we are going to discover them. And the next video. 14. Cards 2 : Now let's move on to another structure. And it is the horizontal cut. And it is done using a combination of grit and utility classes. So let's go ahead and delete this and start with creating our division class division card. And inside, let me just give it a margin, maybe three. And as usual, we can specify the width over this time. I'll use the max-width property. And this is to indicate that the maximum width allowed is 540 pixels. And now we can start with our guard. So the first thing we are going to do is to create the row inside our job. As usual, we use the column and we are going to need to divide actually our cut into two divisions. So let me go back here. And let's suppose this is our code. We're going to divide it as this area is for our image and this area for our body that includes our heading and paragraph. And to do that, maybe we can choose to divide it as 48 foil for the image and aid for the whole paragraph, title and body in January. So to do that, we can simply use the column foil and add our image here. So images, second picture. And now let's create the second division and it will be eight. And this division will include the heading. This is the update. And then the paragraph. And of course we can add some classes here, such as title. And then here a text. Now, I think we could save, go back. And as we can see, regard this picture. And let's go back. Here. We forgot our class. So the class will be image, god damaged up. And now if we go back, refresh, we got this image and followed by this, but we also forgot to add the division here. A class called body. Looks nicer. And of course, let's add a tear. And now regard, go ahead and refresh. And as we can see now, if I want to just decrease the size, nothing will happen. However, we wanted to be horizontal whenever we. A tangled between the sizes. So here we have a large size screen. However, if we have a medium or smaller sizes, we needed this picture to be large and the heading and title, title, and paragraph are below it. So one way to do that is to simply specify that whenever we have here medium and above, this will apply. And otherwise, we need our picture to be on top and then followed by the head title and paragraph. Now, as you can see, if the size of the screen, it will become horizontal. And this is it for the horizontal. Let's go ahead and start with our background colors. So for example, we can create our card with a blue background. As we can see. Let's delete this and start designing the alcohol. So the first thing we're going to need is to create the code. The classes will be taxed white. Because I'm going to choose the background primary, which is mainly blue. And of course, let's give it some budget and unbuttoned. And let's choose this tile width of 18. Rem. Now we're good. We can start designing our cards so the cards header and returns simply right, primary. And then inside the card buddy, we can create our heading. And one way to create our hiring and our classes at the same time is to simply dried our heading H5 and then press on that. And then followed by b, a class, which is called Title VI had entered. It will be created automatically. And I can simply write tighten paragraph five. And I forgot to add here the class test. Now if I go back and refresh, we got our card, which is blue at the primary, and this is the title and the paragraph. And we can also always changes this. So we have so many colors as you know, we have used most of them. And this is the dark. And we have, as we said, success, danger, warning, NFO, secondary and light. Now we might also want to make only the border discovered the dark color. And we don't want the background to be duckweed just needed to be transparent. So one way to do that is to simply and modify this so we don't want the background, we just need the avoided to be dark. Go back to fresh. As we can see, we got our border diet. However, our text is white and we can see it now. So let me just delete this. And refresh. And this is our cart now. So this is it basically for the colors. Let's move on to another topic, and that is the Grid cards. So for example, let's suppose I want to place so many cards on my website. I can choose to place either 123 cards at the same level and then followed by three cards or maybe four cards and then four. So this is up to us. Let's go back and delete and start creating our lives. Let's suppose I want my website to have forecasts. So 1234. And let's start with this by creating our probe. So the first thing we're going to do it is to create the row. And then inside this class I'm going to give it the row one and row two, and we're going to discuss them intermittent. So these are the classes and the first-class inside out rho is d column. And we have our code. So this is the division of the card. We can add our image here as an added vastly. Then inside our code, we can add our guard Buddy. I simply add the simple heading. So I think, and I think good, good to now in this code, let me just go back, refresh. As we can see, we got this and let me just adjusted by using the image top. Go back, refresh. And this is our current till now. Let's add another one. And by simply copying this this whole row, column, I'm sorry. And if I go back now, I have two cards. Let's change the picture. So this will be the first picture. And as we can see, sorry, let's choose another picture. So maybe third one. And I think we're good now. We go back and refresh. We have both pictures. Now if we want to add some other pictures, for example, I can copy and paste ds. If I refresh. To get these pictures, however, let me just go back. Let's see. So for the column and this, OK, So this is the problem. We added one division by mistake here. And here. And I think now we're gonna classical bad. I'm sorry. Let's just delete this also. Yeah. Alright, so now we're good. Refresh. And this is it. We have our four cards at 1234. And this is all for the great cards. You can always add some elements to the skirts of, for example, here I just added the heading. You can add the paragraph and the same thing goes for all of the rest of the cards. And this is basically the, actually the last thing I'm going to cover is the footer. So for example, if I have a current and I want to add a footer, I can simply add the glass and add anything I want. Let me either in small. So the class should be taxed muted. And this is footer. And I just added in the last picture, so I am not going to see it in any of those roots here. This is the footer and it looks like an actual footer. And this is it basically for the card. With that being said, this is the end of this video. See you in the next one. 15. Carousel: Hello and welcome back. In this video, we are going to talk about carousel. And these are the slides that you can, that you see. Usually when you have a website, for example, a shopping website. And there are so many products, they usually use carousel. And this is the picture. And that can be changed. And you can go either right or left. And it changes automatically also. And to create this, let me just delete this and start. So the first thing we are going to do is to create our division. And it will be in our classes carousel and types of terrorism and slide. And this is a, let's create inside our carousel, the carousel. So there's energy. This is it. And before forgetting, we need to add the data BS, right? And this is to indicate that this is a parasol. And of course, inside our carousel, we need to create the items. So the first item will be of class carousel item. And I'll give it the type of active. Since this is the first one and it will be mainly an image to be from images. I'll choose kids this time. So the first one would be good. And of course, Let's add some classes here. The first class will be the luck, and the second will be four width 100, just to make it look nice. And then let's copy this and paste it a couple of times. And maybe you just three times missing pieces enough. Now, let's change this from active to normal. And this from kids want to get 32. And now I think we should go back refresh. And this is our carousel. And as we can see, if we wait a bit, it will change dramatically. And as we can see, it changed to the second picture. And if we wait longer, we are going to get the third ten. Go back to the first picture. For now, let's go back to our code and see how can we modify this. So we actually have the controls. And these are the arrows that comes and the right and the left. And we can add them to our carousel. And to do that, we can simply add inside our division. So after finishing from our enter, we can add the link. And this link will be. Glasses, carousel control. Next. And of course, the roll will be a button and data BS slide. And this slide will be of type previous, so d equal to previous. So here we have our link. And in this case, let's create some span. So the first one would be carousel controlled Rebus icon. This is the icon for the previous. And of course, let me just say that the area hidden will be equal to true. And then after creating the span that create the second one, in this case will be the Previous button. However, I make it visually hidden, so it is here, but we can see it now. So visually. And then now, in order for us to make these arrows appear, we need to link them with our carousel. And to do that, we simply need to create an ID here. So let me name it parasol and maybe carousel controls. And of course, we need to link this to carousel and pros as well. And I think we could. However, here we added a previous icon and here we specified it to an X. So let's just adjust this. So this is a previous as well. Now let's go back refresh. And as we can see, we got this button here. If I press on it, I go back and go back one more time. Now we are going to do the same thing for the next. So here we have the carousel controls. And then the classes will be one class actually carousel-control. And next, the role is button and data, BS, slides, and it will be next. And I think now we're good with just need to add our span. The class will be carousel. Control. Next icon. So here we're adding the next item icon. And the area pedal will be true also. And let's create the second span class, which visually had done plus. And this will indicate that this is the next here. Now if we go back refresh, as you can see, we got both. We have the next and the previous. However here, next is made a mistake here, and I will go back, refresh. And now we're good. We have our right and left. And you can toggle between them. We can choose to go right and left or we can wait. And it will toggle itself. And this is it for the carousel. We also have the indicator. And this is something that comes at the end of the screen. And we can choose from, maybe, if we have maybe three pictures, it will have three lines here and we can choose the line that we want. So let's go ahead and implement it. And to do that, we need to go back to our division. Before creating the carousel enter. We actually need to create the ordered list. And inside this, we're going to have the class Darussalam indicators, haters. And I think we're good. And now let's create our list item. The first list item we have the data BS, target. And this will indicate for the carousel, the ID of the carousel. So carousel controls. And then data VS slide. And this will slide to the first one, will be the slide 0, and I'll give it the class of active. And the second one, let me just copy this and paste it here. And one more time. So the first one will indicate to 0, the second one and the third 22. And of course, the first one we'll only have will be the only one that has the class active. Now if I go back and refresh, as you can see, we have these little lines here. If I press on one of them to take me automatically to the picture. So if I press here, I go back to the first picture. And whenever you create a carousel, you only need one of these. So either is controls or the indicators down there. And this is it for the carousel indicators. Now, let's suppose I need to drive something here, maybe a caption. So let's go back to our code. After creating the image, we can add each carousel item, the carousel caption, and that we created using carousel caption. And I'm going to add the class, the none and the medium block. So now if I type something here and low, then Paragraph six, if I go back now and refresh. As you can see, we have something here. However, if I minimize, the picture will disappear. And this is because of this class that I added here. So DMD black. This means that this will apply for anything greater than medium. However, if we get to a point where we have medium, small x small size, screen sizes and 12 disappear automatically. And this is it. We can copy this and pasted on different items and it will work just fine. So now if I go back and refresh, I can see it here. Maybe changed the Kynar each time. So maybe here we can add the text dark. Let's go back and refresh. And as you can see here, we've got our texts in the dark color, and this is it for the caption. And I think this is enough information about carousel since we are going to use it whenever we create a project. And with that being said, this is the end of this video. See you in the next one. 16. Navbar: Hello and welcome back. In this video, we are going to talk about naps and tabs. We already used and implemented some of them in the previous videos. However, in this one we are going to dig deeper and we are going to get into the details of how to create and use. So first of all, let's delete all of this and start. So the first thing we need to do is to create the unordered list. And the class will be. So u l dot. And this is our unordered list. Now we can create some list elements inside so that nav item, so the class would be nav item inside this class, let's give it a link. Inside this lengthy class will be nav item or nav link. And this first one would be active. And we can just add this. So this is current and it will be equal to page. And of course, this is, we need to give it a name and this will be the home page or the home item. Now let's go back here. See what did we create? So we just create this home. Now, let's create some other list items. So at the second one will be mentioned. Then. Brands maybe. Now if we go back and refresh, this is what we will get. So this is it for the link items. We can always add, for example, the disabled class here. And this is to make the list item disabled so we can press on it. And compared to this, I can press on home and mission brands. We can press on this. So let's go back and now let's talk about the horizontal alignment. And one way to deal with this, if you don't want to be on the left side, is to use the justify content centered. And this is a class that is generally used to the unordered list when you create a navbar. So justify content Center. Go back, refresh. And now we got our elements on the center of the page. If you want them to be at the end, I can simply change this to and go back and refresh. And as we can see now they are at the end. We have also the vertical alignment. And in this case, let me just go back here. And let's use the flex collar class. So flags column. Now go back, refresh. And as we can see, now, they are all vertical, so the elements are vertical and we also have the tabs. And this is used. Using the class nav tabs. So nav tabs. And if we go back and refresh, we are going to get the tabs. And this is disabled since we disabled it using the disabled here. And of course we also have the pills. And as the name indicates, we need to use the nav pills. If I go back and refresh, we are going to get the pulse like this. And let me just delete the actor from this one. So we see the difference, refresh. And as you can see, this is active, this is normal, and this is this abled. Now, let's use dropdown in our navbar. And in this case, we have home Mission bands. Lets add here, it dropped down and add some options. So the first thing we're going to do is to copy this basis here. And this should be the drop-down. Drop down. And of course, whenever we create our dropdown, we need to create some options. And to do that, we simply create an unordered list. And the class would be drop-down menu. We already implemented this before, but we are going to increment it one more time. And in this case, we are going to implement it here and the navbar. So we have list item side, this item, we have a class link and this link point to nothing. The class will be dropdown item. And this is item one. So let me copy this. Maybe two or three times 123. So this is item to item three, item for and this is it for the unordered list. And of course, we need to add some classes to our link. To me we have the nav link and the drop-down toggle. So drop down toggle. And finally to the list item as a whole, we need to add the class dropdown. And I think we're good. If I go back and refresh, you're going to get this drop-down is I press on it. I think will happen. Maybe we made a typo. So we have an hourglass now playing dropdowns I could. Okay, So we forgot to add the data. Toggle to UDL. Whatever we press on, this got down. And now we could refresh. And this is it. We have our items, but I will press on drop-down. They appear and one more time they disappeared. Now since we have some info about drop-down and navbar, let's create a full map that we can use in our website. So the first thing we're going to do is to create our division. And it will contain the class navbar and Navbar expand on large screens. So cheap. And I think we're good for now. Inside our class, we're going to create the container fluid and we'll discuss it later. But for now we'll just write it. We have the link. And in this case, the class will be navbar brand. And this is navbar. So let's go back and refresh. And as we can see, we got our first item on our first element inside on rightward, and it's here. Now let's go back to our division. Inside this division, let's create a button. And in this case, the button will be of type button. And the classes would be enough but toggled, toggled. And of course, we have data toggle. And it will be of type collapse. And now after creating this, we still have the data BS and target. And this is it. And this is to target the data. And whenever we press, so let's give it a name such as navbar content. And I think now we're good. If I go back here. And so this is our button. Let's create our spanned. So inside our division, we have this band. This band would be of class navbar, double-edge icon. To now that we've done with our first division or our first button, let's go ahead and create the second division. And this will be the nav bar elements. So let me give it the class of collapse and navbar collapse. And Enter. Of course, we need to add the ID that we used here. So we said that the data is, we should target the navbar content. So we need to add the ID navbar content. And of course inside our division, we need to create our unordered list as before. The class will be navbar, nav. And the auto. Let's give some margin. So MV2 and be large 0. So this is margin-bottom for large screens is equal to 0. And now we can open our list item, the first list item, as usual class nav item. And inside our list item we can create our length. In this case, the area current will be equal to page. And of course, the classes will be nav link and the first one will be active. And this is home. Now let's copy this couple of times. So this is the first 1, second, third, fourth. So home Mission, product and contact us. So let's go back and refresh. Does we can see we got our buttons here. And if we want, we can add the drop-down button. Whenever, as we did before, whenever we press on it something, some options appear. But we're not going to do it for the sake of time. But for now I think that this is good. Now let's go back and add the search. So after we're done with our unordered lists, we can create our phone without any action. And the class will be the lags. Of course, inside our form, we have the input. The input will be of type search in this case. And of course, we need to add some classes as usual. So the first class will be for control and the placeholder. We can add a placeholder to be search via label. Also search. And I think we are good with the input. We can add the button. And this button will be of classes btn, PTEN, success. And the type will be Submit. And of course we need to add the word search. Now if I go back and refresh, as we can see, we got our Search button and we can Social anything from here. However, if we type anything and precedent search, nothing will happen since we did not add any Fontenelle or any action. So this is it for the nav bar. You can use anything we learned so far from maybe words, badges, alerts, cards. You can put anything inside this network. And of course, you can divide them as we did before. And as you can see here, we decided to place this at the end. If we remove the deflects class and went back refresh, we can see that it doesn't look nice. We have some bags here. And this deflects helps us to better manipulate our nav bar. So this is basically for the nav bar. You can go ahead and try it by yourself. You can change maybe the color. Let me just change one time the color. We can decide or choose the color from here. So we'll be between dark. If we go back and refresh. This is our dark nav bar. We can also change the text to be aligned. And we can do that using the navbar dark attribute or glass. So naff, but dark. And thus we can see the navbar home machine turned out white. Since Bootstrap knows that we are using a background dark, it will automatically turn these words into a white mode. Now if we go back and to make it a little bit better, we can remove the btn-success from here, refresh and maybe just choose the btn Light. I think it will be good, fresh and it looks nicer now. We are using the dark and light inside our network. So this is it basically for the nav bar. You can go ahead and modify, change anything you want, and choose your navbar. With that being said, this is the end of this video. See you in the next one. 17. Bootstrap Website: Navbar: Hello and welcome back. In this video, we are going to start building our first bootstrap website. And this website will be completely built using Bootstrap. And at the end we might add some effects and some styled using CSS. But for now we are going to build it using Bootstrap Andi. So before we start, we need to go to Google and search for Font. Awesome. And this is a website that will allow us to use the icons. So you go ahead and sign up for free, create your first get, and then go to your kids from your account and press on this the first one. And then after getting the skills, you simply copy the code and paste it inside your website. And that's all you need to do basically, now, we can work with font-awesome as we want, and we are going to see how we can use these icons inside our website. So the first thing we are going to create is the nav bar. So let me go ahead and create a comment. And this is how we can create a moment using HTML and limit number. And then, and so now we can start. First thing we're going to create is the NADPH. And we can create it using the nav element. And the classes will be navbar, nav bar, expand HAT medium. And maybe we'll use the background dark, so Vg dark. And of course if we are going to use the dark background, we need to have the text slide decks or Navbar light in this case. And now we said we can go ahead and start with our network. The first thing we are going to create is an icon. So to do that, we're going to create the link. And this link would point nothing till now the class will be navbar brand. And inside this link we can create our icon. And here we need to give it some classes. So here we need to use some icons from Font Awesome. If we go back to our and also page and go to icons, we can search for over 7 thousand icons. If we scroll down a bit, we would find some available icons. These are for pro and you need a license to have them. So we'll use the one that available for us. And this looks like, so press on it to take, to take us to this. And as you can see, we can use it. And as a B and a Microsoft. So let's go back to our code and drawn here f a, b, f a. And of course we need the text be warning tense, we are using a dark background. And let's give it some classes. So f a two acts, we needed 2x times. And of course let's give it some margin and max three maybe. So let's go back and refresh our page. As we can see, we've got our icon here at the beginning of our navbar. So this is it for the icon. Now, let's go and continue with our navbar. After creating our link, we can create our button. So this is the button that will be of type button. And we need to give it some glasses. So nav bar, tabular and the background will be light. And we can also add the data-toggle. And it will be of time elapsed. Of course, we don't want to mess the data target. And this will target and something that we are going to create the later, but let me give it the ID nav. Now, after creating the button, we can create our expand. And inside the span. We are going to give it some classes such as navbar, tabular icon, and loaded to visualize the HTML of the website. While driving our code. I'll download this extension and it's a live server. Can go ahead and download it. Then whenever you're done, you can press on Go Live. And the total automatically append the Bootstrap page on our website and it will change and be modified automatically whenever we change anything. So let me just adjust this page and I think now we're good. So for example, if I demoed this icon and save that, it will automatically be removed from here. But for now, let me save it again. Thus we can see we got our I comeback. So let's continue. We are going to our first division and it will be of type enough or the idea, let me just name the ID since we named here inside our data-target nerve. So we are going to target this division. And the idea will be, now we are going to add some classes, but let me appeared here and the glasses will be the first one is collapse. To collapse. And Navbar alerts. We need to also add the justified. Then between and we are seeing, we are going to see what this will do in a minute. But for now let's add it. And of course, whenever we create our nav bar, we need to add the unordered list. The unordered list will be of class navbar nav, and the list elements will be of type nav items. So class nav item. And then we opened up an unordered list, list item inside. We have the length. And this length will be of glasses. Now, length and the text will be light font. Or maybe just let me make them uppercase. So text uppercase. And we're going to add the b X three just to give us some padding. And of course, we need to add something in between. So the first thing we're going to be home by click on Save. And now we cannot see it since we have this. So if I just increase the size, we can see that we got our home here. So let's go back and continue. Let us copy this a couple of times. So home. And I think now with good, if I change this, first thing we're going to add is after Home is the contact us or maybe our mission. And then the final thing we might add SP, contact us. And we can add here our product. And I think we're good. As we can see, we got our home machine products and contact. Let me just decrease the size of this. And also this. And now we're good. We finished the first step of our nav bar. So now we might want to add the search button that comes over here or the search input. And to do that, we need to create a new reform. And without any action, the class will be equal to four. Check in line. And I'm at three. And now, if we go and start, we can create our division and it will be input group. And inside our division, we can create our first input. And the three be of type text. The class will be controlled for or form control as usual. And the placeholder will be simple. Just search for anything. And now if I go back and increase the size, we can see that we've got our search input. Now we can add the button to generate the search. Add it right here after our input. So this is the division, and we can add a new division inside the old one. And D2 will be input group text. So now we can create our button. It type will be button. As usual. The class will be simple, just btn. And inside this button, we can add our search. I can get, we can get from Font. Awesome. So if I go back and search for the search icon, as we can see, this is surge and press enter. We are going to get this search. Let's press on it. And this is the search icon. If we want to use it, we simply write F a S of a search. So inside our button, we need to create the icon. The classes will be an a as a search. And let's give it a color of the text muted. And if we go back, Increase the size, are going to get this search. So this is basically, this is our nav bar, our first element of our website. In the next video, we are going to continue building the next elements, forms, and trying to merge things together to come up with a full bootstrap website. So see you in the next video. 18. Home And Mission: Welcome back. And in this video we are going to start creating our home and mission. So home is the first thing the user is going to see whenever he enters our website. And I'm thinking of something very simple, that is a welcome letter. And let's do that by simply exiting the navbar, creating the home, sort of home and, and home. So inside our home, we need to create an entire new section. Inside the section we have the division container fluid. So container fluid. Inside this division, we have our first row. So the row will be, we are going to add some classes to throw. The first one is to justify Benton Center. That is to simply add all of the content at the center of our website and align items, centers. And this to align the items at the center. And Let's give it a height of a 100. I think it will be good. And now let's start with our division. So the first thing we are going to create is the column ten. And inside this column we are going to create the heading of class display too. And of course, the tax should be capitalized. So I'm going to use the tax capitalize. And inside our heading we have our span. And let me add. Hello and welcome to my website. If i press save, it's going to generate something like this. So as we can see, this is the Welcome to our website. However, we can modify it a little bit. So inside our span, we can actually add the class. And that is the text. Maybe let's try the dark. And this is the dark. So maybe wondering, since we are using the yellow here, maybe use it here. So texts warning, I think it looks nice. Now, after the text warning, we can add the after the heading, we can add the text. So paragraph. Inside this paragraph, let's write some Lauren and some classes here. The first class is going to be text. The text Clyde? No. So I think the dark is good. So thanks. Doug. And I think this is too wide. Maybe add the text slide. And it's the same thing actually, but if you can notice, it will give it a little bit of a darkness. It's more between the white and gray. And this is basically for the welcome by this is very simple. You can go ahead and modify it and work with it. But actually I'm just going to keep it simple so that you can follow up with me. And then whenever you had a chance, just modify and improve. And this. So actually this is a 20 home. Let's go ahead and start creating our mission. So after the home, we have the mission. And then the end of this mission and mission. And now let's start. So first thing we need to do is to create our section. And this section will be a plus Michigan section class mission. And let me start with creating our first division. And that is the container fluid. Let's add the class texts secondary just to see it and visualize it. And let's add some lines here. So BR times ten, refresh. And this is the second. From here. Let me add the, sorry here we need to add the background. So BG secondary. And if I refresh save, I'm going to get this gray here. And this indicates the container fluid or the section of our mission. So let's start here, delete all of this, and start with creating the first row. And this will be our title actually. So let me just simply say that we have here the title and, and title inside our title. We can create the row. And let me just adjust this. Inside our row. We can create the column. And of course inside this column we have the mission. And as we can see, we got our mission here, but we need to adjust it. So inside our class here we have the display. And of course, we need the text to be white. So tax White and text center to be at the center that we can see we gathered here. Now we can either choose the grey color or maybe the dark color. Let's try the dark and then we'll see if we need to switch. So to do that, we simply add here. And instead of secondary. The text dark. And here we go. We have our text now and the background, which is dark. Now finishing with our division. And maybe we can add some padding here or margin. So module three, I think will be good. And after finishing the first division, we can add our second one. And this would be the paragraph. So inside this division, we have the paragraph that is of glass lead and it will be basically Lauren 25. I note this is a lot of Lorin, but I think it will make it look good. And this is it basically for the title, we have our mission and then followed by some information about it. And this is it. If I increase the size, I think it will stay nice. And now let's go ahead and continue with creating the best of our mission. So this is the ending of our title and the start of our mission. So the first thing we are going to create the row, inside this row, we have the column maybe after the medium will be fought and text centered of goals. This, we are going to create our first icon. And, and I'm not going to go back and forth from Font Awesome and to copy the icon, so adjust, prepared them before. So the first one will be FACS a shipping fast. A 5X to make a 105 times bigger, detects will be danger or maybe wanting. Let's see. The margin bottom will be for. Now if we go back and we got this shipping. Now after finishing from this, maybe I'll add some text here. So H one will be of glass. Let me give it some margin that the button, and it will be fast delivery. And some paragraph eight. And if I go back to paragraph, let's add the class text muted. And let's see, does we can see we got our first one. Now, the second one would be the same thing. So let me just copy this and paste it. So 12. And of course we need to change the icons and the headings. So the first item I can hear is MAS, a hand holding USD. So here F a, S, F a and holding USD. And instead of fast delivery, we are going to change it to best prices. And then finally, the last one will be FAR FAA arrow alpha, go up and top quality. So this is basically, and as you can see, this is our mission. If we go ahead and make it bigger, we got our three icons and three paragraphs at the same line. And we have the mission and the paragraph talking about it before them. And as you can see, we're not seeing the fast delivery, best prices and top quality. Maybe we need to do something about them. So go back here and let's see. So this is our H1, maybe make it text white. And this is fast delivery. And we'll do the same thing for the other subtext, White and White. Now go back, make it larger. And as we can see, we got our mission. And these are our three icons. As you can see here, there is little space between the icons and this paragraph. So let's adjusted by simply going to the paragraph that we just created and simply add the BY remaining. And if I go back, I think it's better, but it's good idea to make it larger five. And now I think we're good. And this is basically, we have our mission paragraph, fast delivery, best prices and top quality. So this is it for the mission and the Home page. And with that being said, this is the end of this video. See you in the next one. 19. Products: Now that we're done with our home and mission section, we can go ahead and start with our product section. So first of all, let me go all the way down. And this is the end of our mission. We can start with creating a comment. And the comment will just simply say that this is the product section. And then we'll end it with another government and of product. And now we can start with creating our session. So this is the section with the glass, but padding five. And inside the section, as usual, we start by creating our container, and this is the continuous fluid. And inside this division, we can start by creating our bow. And let's take a look at this website. I want my section to be divided into four columns, and I have four products for example. So this is the first 1, second, third, fourth. So to do that, let's go back. And inside our draw, we can start by creating, first of all, let's start by creating the title and some information, and then we divide it into four columns. So inside the first row we have the pollen. And of course I want my text to be centered, so we'll use the text centered and margin bottom three. So now inside our pattern, let's create our heading. As usual. The class of the heading. Tags may be warning. Let's see now. And that's the spirit too. Right? Products. And now let's go back and see. So this is our products tighten. And as usual, if you want some paragraph, we can always write some load them. Maybe 15. And the class will be lead, text and maybe secondary. Let's take a look. And if we save, as we can see, it looks nice. So now, after creating the first part, which is the title and the paragraph, let's go ahead and create the second part which will contain our actual products. So now this is for the ETO. We can start by creating another row here. And this row will be actually divided into four products. So that is four columns. And in this case, I simply add three. Since we already said that our website consists of 12. And if we want four parts, we can divide 12 by four. We are going to get three. This is why we have this number three here. Inside this, we are going to use the images from images. Let's take first BEC. And the alternative would be project or product one. And these are not pictures of actual products. Products. We already have some pictures here for Getz and some random pictures. So I'm going to use them. But for now, this is for now if you want to create this actual project, you need to change these pictures. So this is as for the picture, let me add some classes. The first class will be in the image thumbnail. And I wanted to be rounded. And now if I start with our paragraph, I can choose the classes. Let's choose the text muted class. And some learn, learn Sx equal. Good. Now, go back and as we can see, we got our picture here with the below it. However, as we can see, this picture looks very small and it looks good when we open the page, when we have a full-page. However, if we are using a device, a mobile device, it will look like this and it looks small. So we need to deal with this. One way to deal with it is to specify that whenever we are using a small screen, we only need two pictures on the same line. And one way to do that is to simply specify that the column three will only be for large screens. And whenever we have a small, we're going to use a column SpaceX. And this indicates that we only want one picture on, on DES. And if I go back to medium, it can fit two pictures. And whenever I go to large, it will fit for pictures. So this is it. Now, let's copy this four times. So this is 1234. Change the pictures. So here we have second, third. And ICANN. Choose the picture as the first one. Again. Thus we can see here we have our four pictures. And if I made the picture or the screen bigger, they we will have two pictures on the same line. And then if I make it a full screen, we will be having default pictures or default guides on the same line. So as we can see, we created full website till now. We have our home Michigan products and contact. This is the homepage, this is the mission. And we have these products. You can change these pictures as you said, to whatever you want. And in the next video we are going to create the Contact Us. And of course we might add a few other things that will help you create a better website. And keep in mind that all of these are pure bootstrap may be at the end, we'll add some modifications and using CSS or JavaScript. So we'll see, but for now, we are going to build our entire website from bootstrap. So basically for this video, see you in the next one. 20. Brands: Hello and welcome back. And in the last video, we finished creating our products section. And I was thinking that since we have some products, why create, why not create the brand part? And in this brand part we are going to create some cards. And let's go ahead and start grading them. So I'll start by writing the comment, which is brand. And of course, and Rand. And now we start with creating our section. And we'll give it some classes. Let's make it dark for the moment. So VGA dark and some padding and the y-axis. Now open it, start with our container fluid. As usual. Inside this division, let's start by creating the title. So this is our title. And this is E and title. And of course inside this title we have a withdrew. And let us, since we made our background dark, let's make our text white. And of course, the title should be centered inside this. Let's create our column and some margin. And of course, this is our heading of glass display for and then some margin at the button. Now we can write anything at that brands than some paragraph. And inside this paragraph, I'll I'll create the division and I'll place this paragraph inside the division. And the division will be having d m before and the underlying classes. The paragraph will be of glass, lead and Sundaram. Now if we go back, as we can see, we've got our brands and some paragraphs that describe what is the brands that we have. And of course, after getting done with the title, we can start with creating our actual cards that will hold our brands. So for now, we're going to create the row and then create the column. And as we said, if we want our columns to be responsive, we need to specify for the large screens, screens what's going to happen. So I was thinking of having three cards when we have large screen. So if we have this large screen, we have 3123. And in total Day will be six cards. In this case we have two columns and each column, sorry, two rows and each row we have three columns. And whenever we have the screen and medium size, we're going to have three rows. And in each row we're going to be having two columns like this. So let's go ahead and start with Harlem. At large, it will be four and at medium and bigger than small to be sex. So MY F5, and I think we got for now inside this division, we are going to create our division will be holding our cards. So cut. I'll add the class current shadow. And of course, I don't want any borders, so the pointer will be 0. So let's go ahead and create. Our first image will be from images adult choose the same image for all of the cards, but you can change it of course. So this is the first image class as usual, image or current dimension. And then whenever we create our image and we want some text on this image, we need to use the overlay class. So our new division will be card image overlay. And then place our paragraph here. So I'm going to use the adding five. The class will be taxed White and text uppercase. And maybe some budding. And I think we're good. So this is the first brand. Maybe I'll simply write first Rand. And of course, if I go here, as we can see, we got our first brand. However, it's not that visual, so we can add the background here. We can add for the heading, a background of secondary. And as we can see, it's now a more clear. And of course, whenever we finish, we can copy this. This is our guide and we need to copy all of our columns. So this is the column 123. Now this is second and this is third. And as we can see, whenever we have a medium size screen, we have a two on the same line. And if I make it larger, going to have three at the same time. And of course, if I have a small size screen, I'm going to have only 11 card. And let's now go ahead and copy this a couple of times. So this is and I think we're good. This is the fourth, fifth, sixth. And now i but full screen, we can see that we have our six cards. And these represents the six brands that we sell or that we have. And of course, you can change the pictures and maybe change the side of the card. The paragraph, how detects secondary, sorry, the background. And you can do lot of things and modify whatever you want in these cards. 21. Customers: Now that we are done with our product, we can start with our customer section and the section we are going to write some customers should view. So let's go ahead and append a new comment here. Customers and, and customers. So inside this comments, inside these comments, we can start by creating our customers section. And again, simply open it as a division. And customers. We also have some padding, so p5. And inside this customer's section, we can start by creating the container load. And as usual, we have our title. And this will be, let me just open a new frontier and title. As usual, we start by getting our row inside the DO, let me make it a text white. And of course, x, center and appended division. Inside this division, let's create the column and some margin. Of course, inside this division, we start by creating the class, but our heading display for margin bottom four. And this is the customers. And maybe add some text. So class and lower them. Maybe 14. I think we're good. If I go back now, as we can see, we've got our customers section, however, it is wide and we can't see anything since we added the text wide. So let me deal with that by simply applying the dark here that we can see that our customer section. Now it doesn't look very nice after this third section, section, since they are both Doug. So maybe we can change the text dark and keep it white if you want. But for now, I'll work with it as dark since this page will only be at the end. And most probably discard page one B at the same page of this. So this is the whole website. You can move some of the elements or some of the sections that we created and to other pages. For example, if I click on the mission or the products, it should take me to the mission, all the products section. But for now, we have all of them at the same page. If you feel that you can create. And each one of them at the different Page and then link them together. That's alright too. So this is it basically for the title. Let's go back here. And now let's create our carousel that will hold our customers review. So the first thing we are going to do is to create the indicators. And of course, let's start really creating the row and column as usual column and these sex. And I wanted at the middle. So I'm using the umax auto. And then let's open. Of course, we need to create the carousel. So first of all, Teresa and I needed to slide. And of course, I need to data, tried to will be equal to character. And we already implemented this before. But it's nice to just remember it. I'll give it an ID of aerosol or customer. There is. And I think we're good. We can start with creating our own list of indicators. So this is, and we're going to give it some classes. And this is the carousel indicators. And of course, the list item will be the target of this. Would be customer carousel. Did that we gave to this. So let me just it real quick. And we gave it cast characters. So we are going to write hashtag. And then we need to data slide two. And this will slide to 0. Whenever we press on it. And I will give it a glass of active. And I think we're good. So let me copy this and paste it a couple of times. So 123. What happened? So let me go back. So we have one, we have the second and the third. And of course I need to change some I need to make some adjustments so he'll see L12 and the second third doesn't need we don't need to make them as active. And I think we're good now. We have our indicators. So let's go back and start with our aerosol enter. So carousel enter. Inside this, we going to create our carousel item and the first item will be as usual active. So carousel item that active and it will be. Thanks center. So this is it. Now we have our item. Inside this item, I'm going to post a simple image and it will be rounded. So I already have some images about some babies. I use them so that the image will be images, it one. And the classes will be imaged fluid. And of course it we rounded circle. And the margin will be five. And I'll add the width to be a 150 pixels. Now, let's go back here and see. As we can see here, we have our customers, the paragraph and the image with the indicators. However, we don't have any next or previous image yet. So let's wait. And of course we need to write the actual interview. And I'll put it in a block code. So the block code would be having the class blog code. And of course in texts will be white up and we have the class and give it a margin, bottom five and some lawyer lamb, loin, 20 maybe. Now I think we have some text and the picture. And now let's go back here and copy this division and pasted a couple of times. So here we have our division. Or maybe before copying it, maybe adding some styles here to make it look better. So to do that, we simply type the name of the person and followed by the dating. So that simply added here, maybe a and H for the class will be texts light. Let's see, X, uppercase since it's the name. And margin-bottom three, it will be, lets say. And now let's create our unordered list. And it will be a class list and line since we need our students to be at the same line. So list in line and some margin. Now will need to create our list item, list, item, list, and line item. And of course, we have our icons here. And the icon for our star is AS a start, and it will be a yellow star. So we're going to use the text warning. And now I think, good, good. So let's wait and we have our name, Hadi and one-star. So let me copy this four times. So this is I'm sorry. Let me just copy and paste it. 1234. Now save, as you can see, we got our 5-stars here, my name, and what did I write? So this isn't basically for our first review. Now we need to copy all of this and pasted two more times. So this is our carousel enter. Let's copy it until let me just check. So this is for the auto, maybe this now go back. This is the division that we need to copy. So I pasted it three times. And this is the one. I get two and get three. And this is, this is now running. And as you can see, five press on desk. It'll automatically take me two days to get to or the customer two. And this is the third customer. And if I keep it on autoplay, it will automatically go on and on until I accept my website. So this is basically for our parasol and the customer section. With that being said, this is the end of this section. See you the next video. 22. Contact Us And Footer: Hello and welcome back. In this video, we are going to continue building our website and we are going to build our contact section. So to do that, let me go ahead and start a new section. And this is the contact. Contact. And, and contact. Of course, we start by creating our section. And inside this section of the class will be padding five and it will be liked. So the background will be mainly light. Of course, we start by creating our container fluid. And as usual, d rho inside the row, we have the column. And we need our text to be centered. So we're going to use the tech center. And so margin at the button. Now, after creating our column, we can start with creating our title. That is contact as. So the class would be taxed. Warning and display would be two. And we'll simply say contact us. Of course we have some paragraph and it will be lead and texts secondary. So we already know most of these classes, so no need to stop on each and every one of them. I'll simply write them as I'm doing right now. And this is our paragraph. Now if we go back here, we have our contact us, we have some paragraph and we are done with the title. We can start a new division now. So this division will be after the column. So this is the column and now, or maybe you can start it after the role also. So this is a new row. And of course, I want the content to be centered so I use it justified contact center. We have a column and it will be for large sex and for medium. The both eight and for small ten. So let me open it and we have the division that will take a text center and at times secondary append. So the headings will be got questions. And then maybe paragraph. For example. Ask us. And now after creating this division, we can start with creating our phone that will include the inputs of the user. So the phone will be of text muted type arpanet. And we have no action now. Now inside our four, we can start with creating the label. And the label will be for our name. Sorry, for the user name. And input will be of type text for control and id name. Now, after creating this, these are our label and input. However, we forgot to add them to a division. So division will be of class for group. And these label and input, I could just copy them and paste them inside this. And now we're good. This is our division for group and we have our name and the input. And of course, we then create another form-group. And this will contain the email, so labeled for email. And it will actually include the email of the user, input, text, form, control, and ID email. Now we got, we still have the last division and as usual for group, and this will be for the message and message. And now we don't need an input, we need a text area. So I'm going to use the text area. It will name, I don't need the name. The ID would be the message. Belgium's throws. I don't really need them. Simply give them and the class would be for control. And here we have our text area. As a financing from this division, we need to add the Submission button so the class will be btn. Btn. The outline of this would be warning and BTN luck. And I think now we still have to make the types of met and submit. Now if I go back here and as you can see, we created our four, we have got questions. Ask us, the user can enter this name and then is email followed by the message. And then this patent that to submit whenever he presses on this button and action should be performed. But since we don't know any JavaScript or back and we are going to stick with the knowledge that we know till now. So this is it basically for the. Contact section, who still have the last section which is the footer. So let's go ahead and do it now. So let's append footer. And and so to create a footer, we have actually the footer tag in HTML. And we need to add some classes from bootstrap so the background should be dug and we have some padding. On the x-axis. We can create our container fluid. And then start with creating our row. And the tax would be actually at light with some padding on the y-axis. Now inside this we can create our column. And this will be for, for large and six for small and above. Inside this going to write our heading. And it will be about or maybe about us. I think it's good. This is the first part of our footer and the text will be small. So small. And some Lauren, Lauren 20. I think we could F Now, if we scroll down, we can see that we have the about us section. And if I make it bigger, it will be here. Now, let's go back. I think we have so many texts here. Let me just make it smaller. And now we'll go to the first part of our division or our footer. Now, since we finished our first column, we can start with the second. And I want this to be to date only two out of 12. This took four. I'll make this tape too large too. And for this small, it will be the same problem as m six. Open it inside. This will be the first one would be heading and the twill say, visit us. And then we have an unordered list. And the class will be list unstyled. Thus to be moved the bullet points. And now we have the list item. Inside the list item will have a link. Points out at mapping. The class will be footer link. And then we have home. We'll copy this. And maybe I'll just simply created one more time. And the class will be footer link. And we have the mission. And finally, let me add one more of those. And it will contain the, maybe the products. So footer link and the products. Now, if I scroll down, I can find Visitor's Home machine products. If I make it bigger, we have it like this. And now we still have like half of the beach since we consumed foil. Here. And two here. So let's go back down. And now we're going to create the help section. And it will take also to set column at large too and at small six open-end H5. And this wouldn't be needed help. So need help. And then we can start with creating our unordered list. The class should be as usual, unstyled list, unstyled. And then we can create our list item as before. We have our reference footer link and detects will be actually uppercase. And this is customer service. And then let's copy this and based it a couple of times. So we have the customer service, we have the support, and we have E conductance. I think now we'd get, if we scroll down, we have all of these. And as you can see, we have the about us visit us, need help. Now let's make a little smaller and go back to the last section. And in this section, we are going to ask the user to enter his email to stay connected. So append a new division. And this would take the last foil. So LNG FOLDOC for small tool saying six arpanet H5. Stay connected. And of course, the small paragraph. Inside this paragraph, we have enter your email to stay connected with us. And then we can create our next phone. And in this form, we are going to be a D input group. So without any action, the class will be the margin bottom three. And of course we have our division, which is an input group. Inside this division. We have the input type text. Then we have the class for control and place holder email. And then we have another division which will contain the plus input group append. And then we have the button. And the type will be button. Classes would be Button BT, danger and detects too would be white. And now we can add inside this button, see you or me or something like that. So see you. And now if I go back, as we can see, we got our button here. And this is basically we have about us with the task need help, stay connected. And the user can enter is email here and press, and he will stay connected with us. We can also add some links or some icons for the Facebook page or the Instagram page, even YouTube. So you can search for them in the icon, Font, Awesome icons, and you can use them. Maybe after the email right here. Maybe add them here, and then you're good. So this is it basically for our project. I hope you like it. And I encourage you to go and check it for yourself and maybe modify or work on it. With that being said, this is the end of this video. See you. 23. Project: Hello and welcome to the project section. And we already implemented so many of the forms and components that are available for us in bootstrap. And your project will be actually to build another projects similar to this one, you can use any Bootstrap component or any bootstrap class that you can find useful and of course, rapid down. In the project section, I'm going to provide you with this. And this will actually be the template, the starter template with some links of goals. However, this link will not be available since each one of you should have his own good. And this is the link for Font Awesome. As we said, you should go sign up for free, then get this, get, use it in your website. So this is that basically you should be able to do most of these on your own. However, if you don't feel, if you feel that you miss something, you can always come back to the video lectures and check them out again. So this is basically, I hope you enjoyed this section. And of course, good luck in your project. And don't forget to added to the project section so I can have a look at it and give you my review. So this is it. I hope you enjoyed the whole class and see you.