Web Development with Bootstrap | Sara Al-Arab | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Web Development with Bootstrap

teacher avatar Sara Al-Arab, Computer Engineer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

23 Lessons (4h 23m)
    • 1. Introduction

      1:01
    • 2. Getting Started

      5:48
    • 3. Typography Part 1

      18:35
    • 4. Typography Part 2

      26:00
    • 5. Colors

      4:31
    • 6. Borders

      12:05
    • 7. Spacing

      15:32
    • 8. Backgrounds

      8:23
    • 9. Text Alignment

      7:47
    • 10. Position

      16:11
    • 11. Sizing

      3:55
    • 12. Display

      4:38
    • 13. Float

      4:00
    • 14. Shadow

      4:15
    • 15. Layouts

      22:04
    • 16. Accordion

      10:51
    • 17. Alert & Badges

      14:00
    • 18. Buttons

      22:50
    • 19. Cards

      11:30
    • 20. Close, Collapse, & Dropdown Buttons

      19:08
    • 21. Navbars

      17:09
    • 22. Modals & Popovers

      9:51
    • 23. Project

      2:31
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

44

Students

--

Projects

About This Class

Welcome to Web Development with Bootsrap! In this course, you'll learn everything you need to know about Bootstrap, it's importance, and how to use it. We'll explore the utilities provided by Bootstrap, how is the layout organized within Bootstrap, and we'll explore many of the components that Bootstrap has provided us with and see how we can alter changes within them. At the end of the course, you'll be able to build a nice looking website using only Bootstrap! So let's get started!

Meet Your Teacher

Teacher Profile Image

Sara Al-Arab

Computer Engineer

Teacher

Hello, I'm Sara. I'm a computer engineering student at LAU. I'm currently working on web develpment and programming and seek to share my information with as many students as possible!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hello everyone and welcome to web development with Bootstrap. So what is Bootstrap? Bootstrap is not a neutral. Bootstrap is one of the most popular web development frameworks out there and is used for developing highly responsive projects in HTML, CSS, and JavaScript. Essentially, what Bootstrap does is reduce the time needed to get a modern website up and running. You get to use design templates for every aspect of a site, from typography to balance or images for image chromosomes. Of course, in order to make your job easier, you need to learn how to use it in the first place. So in this course we'll be learning all about what you need to know to start using Bootstrap starting from the utilities and the, and the components that you can use an or using Bootstrap. So I'm really looking forward with you to go on this journey to explore Bootstrap. So let's get started. 2. Getting Started: So to get started with, Let's talk first, what is Bootstrap? Well, every plant and developers goal is to create a multi-functional, easy to navigate and aesthetically appealing front-end design for websites and web mobile applications. It might seem very basic, but the effort that goes into building such a parent and requires a lot of patients efforts to just writing repetitive, time-consuming coding processes. Fortunately, a team of developers started to build a framework that in the burden on the shoulders of front end developers and they needed bootstrap. So Fame started. Bootstrap became among the front and sorry, became popular among the front end committee in no time since its launch. And the reasons are Penney, according to bulk, with the number of active websites using Bootstrap is over 12 million. So why is there this huge number of people using this premium? Well first, it's time saving when you are bound to an extremely confined timeline to build a website, web app or mobile app, you can take advantage of Bootstrap. And in your project, It's because of the ready-made blocks built ready for you to use them. Clearly, you don't have to start everything from scratch and you can multiply certain elements to make it unique with your inputs. Also Bootstrap unpacks ready-made themes and templates that you can download and install. You can choose from it, or you can also option through the inputs from other sources. But you must be also aware that there are a lot of people would do the same. Tends to look unique from the rest of the websites that have the same theme or template. You need to get a little bit creative and certain things so that it defines your website or application. Mystic. Second goal, it's easy to use no matter whether you are expert or beginner and web technologies, you can swiftly do bootstrapping solution for yourself without any hassle. Set. Though you don't have to be an expert in web technologies like a shingle, CSS, and JavaScript. Having basic knowledge of them won't hurt. And so in order to actually use the bootstrap in our website, we need to add two things. The first thing is the CSS using LA. So which will be putting in the head of our HTML page and the script tags. So we can either use this, All these two script tags together. So in order to implement JavaScript. And so we put that inside of our body at the bottom of our body tag. So throughout this course, we'll see how to use Bootstrap. We'll see all the components, everything you need to know about Bootstrap. And when we do finish that will build a website purely using Bootstrap. So let's continue. So this is the Bootstrap website. We'll be using version 5. And you can see we can either download Bootstrap or we can just and copy the links that we've seen earlier to our HTML page. So to do that, we go to get started and the documentation will guide us through how to or what links to copy to our HTML page. So you can see this is the link for our CSS and JavaScript that will be adding to the bottom of the butt of the body. Now, obviously the first step we need to do is create an HTML page. So go ahead and type in, let's say bootstrap, put struggle HTML. Let's go ahead and just type in the body and move those. So you need to add a link here. So let's go ahead and just copy the CSS. And now let's give it up here. So that's the link. The link is always inside of the head. Let's give it a title of Bootstrap. Now what you need to add the script tags, so you can either use this or this separate. So you can use that. And to the bottom of our body. Now, if you haven't had it before and the terms that we're using like the head and the body. Normally. I'll proceed to go to my first video. We got HTML and CSS, just to make yourself more familiar with these terms. Now, here, let's go ahead and save that. Now what we've done is that by adding those both links, now we're able to use Bootstrap elements inside of our buffer. So by adding those two, now, we can actually use Bootstrap. However, if now I do run by what page? You can see that nothing appears in my webpage. And that's because I haven't used anything yet. My page is blank. I haven't proven anything. The only thing I have is the title, which we can see it right here, Bootstrap. Other than that, we haven't added anything to the body, and thus our pages plan. In the next video, we'll see how really using Bootstrap elements inside of our webpage. 3. Typography Part 1 : So we'll start with typography. So within typography, we'll see how to use bootstrap to insert headings. The headings lead inline texts elements, tax, utilities, abbreviations, and lockups. So basically we'll see how to manipulate the text of our webpage using Bootstrap. So let's go ahead and open Visual Studio Code. And let's begin. So usually whenever we want to write a heading, what we usually do is just type in, for example, each one to have a heading H1. And similarly, let's say I want the heading of H2, I type in H2, H3, and so on, moving to H6. So here's H3, H4. So sorry for that. H5 and H6. So let's say we type in here, Let's say that these are so whatever. So what you can do and which also decode as just click on Control. And just, sorry, not control ALT and just click on these. And you can type whatever you want. So let's say heading and whatever you type is typed for all the places where you clicked on while holding on ALT. And now let's go ahead and type in something and not to repeat ourselves and write the same thing in each line. Let's just click on ALT and then click wherever you want to write. And then let's say I want to write heading. And heading is written on all the places that I've clicked on. So let's say this is heading, and now for each heading, we'll just type in the name of it. So heading one, heading two, and H3, H4, and so on and so forth. Now this is the traditional way of using these headings without bootstrap. So let's go ahead and just see them. Let's go. And so as you can see, these are the headings H1, H2, H3, H4, H5, and H6. Now let's go ahead and try to do the same thing, however, using Bootstrap. So the way we do that is just by typing in a paragraph. And now let's go ahead and give it a class name of each one. So the main idea of Bootstrap that it only works on classes. So everything is going to change based on the name, the class, this element or this tag refers to. So here this paragraph has a className, each one. So let's go ahead and add the same thing. However, let's go ahead and add the front pages. So here is H2, and let's go ahead and just copy that and add H3, H4, H5, and H6. So 3, 4, 5, and 6. And let's go ahead and now let's go ahead and type in Bootstrap heading. Just to differentiate. Between them. So Bootstrap heading and let's give them H and now 1, 2, 3, 4, 5, and 6. Now let's go ahead and run that. And so now as you can see, although we have a p tag or paragraph tag, however, now our text sizes has changed according to the class name. So here, bootstrap heading one had a class name called H1, which are heading to have a className, cool H2 and so on and so forth until we reach H6. So that's how we'll be using Bootstrap, really using Bootstrap, using classes. Now, that's the way for headings. So we have something else called display headings. So let's go ahead and see what step. So let's say we have an H1 tag, and let's go ahead and create multiple H1 tags. So you can do that by a shortcut, typing in each one times six, and you'll get automatically 6 H1 tags. And now let's go ahead and click on ALT in order to not repeat ourselves and type in class. And then we'll name that class something called display. Let's say one. And display ranges from one to six. So similar to on headings, that display has sizes. And we'll see how that is different actually from the headings. So let's go ahead and type in here that these are bootstrap Display. And let's go ahead and save that and check our output. So again, just go ahead and refresh that. And so you can see that now. Actually I'll just bring bootstrap actually wrong, so it's just fix that. So like Bootstrap. So let's go ahead and now refresh it. Okay, so you can see that it's actually quite similar to the other headings, just in the way of the size. So it's actually decreasing in size as we go from one till 6. However, you can see that it's not actually bold and it has a larger scale with regards to the size. So although this is big and this is smaller than eight and spin one and so on. However, this play is insides greater than the heading and it has its own font as you can see. So that's how to use displays. Now you could know, you might notice that you might have to memorize the names of the classes. Now don't worry, that's not going to be an issue because within practice, you actually get to memorize all these class names. And they're actually just, they're not easy to forget how, I mean, if you want an h3 heading, you can just write each three is not a complicated mean. So that's for display. So you've seen headings and display. Now let's go ahead and see what is lead. So let's say we have. A paragraph and represent this meaningful Parker. Now, since we'll be using many examples and within our course, we did some kind of dummy text. And so in order for me not to just type in anything like Cerberus, we could actually write some generous that is written within and you code. And so the way to do that is to just type in lorem. And so you might be familiar with Lorem Ipsum, which is a website that gives you access to paragraphs that are humorous, that have no meaning. But you could use them just to fill out your website, just to put it to make it good-looking. So the way it works in Visual city clue is you type in lorem and then you specify the number of words that you'd like to be created. So let's say I want a paragraph of 20 characters. And so the way I do that is just type in lorem and then 20. And I click on Enter. And you can see that now some gibberish words have for me inside of that paper. Now let's say this paragraph is some is written at the bottom of the page somewhere. That is maybe at the bottom of a photo that's explaining this photo. And so we wanted to have a special phone. And so let's go ahead and add a class name and call it lead and see what would that look like. So let's go ahead and actually let's just remove that for now just to see the difference. Let's go ahead and save and refresh our page. And just, and you can see that we have this paragraph that have some Jewish virgin. Now let's go ahead and add that class called lead and save it. And now let's go ahead and refresh. And so now you can see that our paragraph is kind of lighter. So that's the kind of font that you'd like to see in me. Maybe below a, an image or maybe just we're at the bottom of the page explaining something or maybe a contact info or something like that. So that's for you. So in order to use, let me just add the class name. Now let's see how we can use inline texts elements using Bootstrap. So let's say we want to highlight the word in a sentence, or we want to underline a word in a sentence. Or let's say we want to make a sentence bold or italic. So we can do that using HTML language. However, we can easily also use it using Bootstrap. So first we will see how we can highlight words, underlined words, or using HTML. And then we'll see how to do that using Bootstrap and see the difference. So let's say I want to highlight a word. So let's say we have first a paragraph. So here's P. And let's see. I have a sentence of 10 words. And let's say I want to highlight this word. Now the way to do that using HTML is by adding a tag called Mark. And let's say I want to add a word. Let's see Sarah. Okay, So I want to add this work which is highlighted in my settings. Now, if I go ahead and save that, and we get to the page, you can see here that I've added this word, which is high. Now that's using regular HTML. Let's go ahead and see the other things and then we'll implement all of these examples using Bootstrap. So the second example is, let's say I want to add a word that is crossed. So, or maybe a sentence. So what I mean by that is, let's say, sorry. Let's add a paragraph here. So let's say I have a paragraph and I want this sentence or paragraph to be crossed up. Now, the way to do that is to use a tag which is called del, which stands for delete. So here it says, if I'm saying that this word is no longer true, maybe I want to cross it out. So let's go ahead and refresh our page and just see how that works. So you can see that we have the sentence that is cross-tab. So what we did is we used this del to cross out that sentence. Now, let's say I want to, I'm not delete a word but underlying it and just mentioned, we can also use another, another tag which is similar to the Delete, which is called S. So what we'll do is just, it's kind of changes the meaning of the sentence. So del is like I'm deleting the sentence. However, AES is like, this is no longer true. It, I'm not deleting it, but this is no longer true. So it's actually the same format. You can say. Let's just go ahead and try it out. So here we'll add the stack and just in order to see that you can implement something in several ways. So here, if I go ahead and refresh the page, we'll see that here. We have a similar format. So what's also crossed out over? This is meant to say that until either get. And this is not to say that this is no longer true. Now, we also have the line, so the underlined. So in order to do that in using HTML is let's say I want to go ahead and add another paragraph here. And I want to add this line. So sorry, the sentence. And so the way to add the sentence underlined is by using the new tag. And let's go ahead and say 55 characters. And let's go ahead and see that. So it's under lines. We can also have the text to be bold. So let's go ahead and say, I want this to be bold and with a way to do that is just by adding the Beta. So here we add B and let's say long tent. And save that. You'll see that you have this Lorem centers. Now. What also we might have, well, we also have the small word, sentence, word. So let's say I want this sentence to be of small characters or small size. So I'll just add small. And let's go ahead and say learn by MC. Brush. You can see that this sentence is smaller than the others. So if added this small tag in order to make our sentences smaller. And there are much, much more texts, so here are just a portion, most of them actually. Now what's the IDE and see how we can do all of these, however, using Bootstrap. So as I said earlier, in order to do anything using Bootstrap, what we'll first use is the class because the class is going to help us do everything. So let's go ahead and add p. If Lauren, say 10. And now let's say I want and to have this paragraph to be let's say highlighted. So I want all this paragraph should be highlighted. Or let's say let's say we want one were to highlight this to show you that we can do that not only to the whole paragraph, but only also to something inside. So the way to do that is by adding a class mark. So I've just added the smart, which is similar to that tag and end tag mark that you've used, which is here. And you might say, I mean, why would I do that? Why would I add a span class, sorry, spanned two, I can then add class anymore instead of just adding mark. Now, this might be true, but you see that here, using the paragraph side, this would be more beneficial. Using Bootstrap would be more beneficial. Here using marked might be more beneficial than actually creating the span tag and then adding a class to it. So let's say I want my paragraph to be small. However, I also want it to be, let's say, underlined. And I want to let's say, could it lead? So I want this paragraph to be the lead. So the way I would do that using HTML is by having these multiple tags nested within each other. So in order to avoid nesting tags within each other, what I can do is just add classes together. So here I want it to be smooth space, lead space. I want the text decoration to be underlined. So here what I do is text-decoration underline. So I can add as many class names as I want. The main important thing is to have space between them. The space will indicate that this is a new class name. So here is a className, quote smoke. He was a class name called leap, and then here is a class name called text decoration underline. So I wanted to be underlined. I wanted to have a lifestyle and I want it to be small. And here, as I said, we've created the span tag and just get added. So he added a class of mark to highlight shirt. I might as well have just added that. But in order to show you how to use Bootstrap, we're going to do do it this way. So now if I go ahead and refresh my page, you can see that I have this sentence that has this thing, Sarah highlighted, and the whole sentence is underlined. And I have it in small. So on July and we have it also in lead. So you can see that here we had also will lead. Here. It's also need. Now maybe small is not as effective because it's of type leads. So PFAD is not as small as brief expected. So this is how we use the text inline elements using Bootstrap. 4. Typography Part 2: Now let's go ahead and see how we can use texts utilities using Bootstrap. And these might include, and we'll include text positioning like when we position something at the store, middle, and maybe on the fonts, the lower, uppercase capitalizations, the fonts retelling goal. So we've seen some of these in the previous parts, however, when the more deep into them in this section. So let's get started. So let's go ahead and create a new file. Let's call it typography to dot HTML. And let's just change the name of that one that we've been working on. Let's change it to typography, one that is shimmer. So here let's go ahead and, and the head and the body of our page. And let's get started. So the first thing we'll see is how we could position a sentence at the start of our line, at the middle and at the end. So let's say we have a paragraph which Loren Ipsum something. And we'd like to position it at the start of our line. So the way to do that is by adding a class name called the next step. So we want our text to start at the beginning. And I've seen her no paragraph that we'd like to position at the middle of the line. And so the way to do that is by adding a class name. Let's call it text center. Now one thing I have, you might notice, you might have noticed in the previous section and this section that the class names are not names that I'm choosing. It's not like I wanted to have this need. We have to write the exact name that Bootstrap provides an order to understand that we want a sentence to be at the middle of the page. So that's a really important point. Now, another point you might see, you might have noticed that I've been writing P, then writing a sentence, and then adding the className, which could be tedious. So what you could do is just add the tag name followed by the class name. So P is the tag name, which stands for paragraph. And I'd like to position it at the end. So to do that, I just say p dot dot text and I click on Enter. And you can see that automatically I have a p tag with a class name called Text n. And now all I have to do is just fill in the blanks and just writing some sentence. Now there's no head and see how our page looks like. And before we do that, we need to complete our firm by doing one step, which is actually the most important step. Writing a file just as blind as this means nothing. Well, when adding this class names, and that's because we need, as I said, the first step is to add the heading, the heading, the link. Of goods shop and the script tag. So we'll go ahead and just add it here. So this is the link announced. Go ahead and add a script tag which is at the bottom of our body page. So let's add it here. And now, Richard, continue. So that's the most important step. If you don't do this, then nothing is going to change in your page because sorry, so the assemble code won't understand. What do you mean by tech startup adjustment? Understand that this is a testing, a unique class name that you gave. So it won't understand that this is a Bootstrap class name. So there's no Adnan. Now see our page. And so as you can see, we have first paragraph at the start of our line. The second paragraph at the middle of our lines are at the center. And the last paragraph at the end of our line at or at the right. So that's for positioning. And so we might, some firms want our text to be centered 12 pages. This big. However, let's say I'm updating the page on a phone. I would like it to change to be at the center. You won't. So at the start. So maybe when you see something through the phone and having other Sandra would look totally wrong. And you'd like to just put it at the right. And so the way to do that is say, Hey, I'd like to keep this text at the center. However, when it reaches medium or let's say small, that case small because on the phones usually have a small size. So when it reaches small, changed, I don't want you to be centered anymore. And so the way to do that is between texts and center will add something called HSL, which stands for small. So the way, that way this is working is that this paragraph is going to be centered at the middle. However, when we reach small, then this won't work. So we were making our paragraph to be, oh sorry, our webpage to be responsive. And so let's go ahead and see that. And let's try to make our page smaller. So you can see that as long as our page is not yet small, the middle, sorry, that second line is still in the middle. Now, as I make my windows smaller, you can notice that when I reach certain width, which is here, you can see that now my, my second line is at the start and not at the middle. So in that way I'm making my window more responsive. Now you might say that this is not, you might not notice this. Let's just change it to medium and see if you recognize it. So go ahead and save that. So up until, so here, we haven't reached the medium, the end of our medium, we're still at the medium. And so when we reach the threshold, and which is here, so here my medium ends. So now I'm in a smaller zone which is not median. So what I'm saying is that if my window is mean, you omega, put it at the center. And so here my window is medium and bigger, so it's still at the center. And whenever it smaller, just put it at the store. So that's how we could make our webpages responsive in a way. Now, that's for the positioning. So you can add this wherever you want, get added here. It's not necessary for the center. And now let's go ahead and see something else. Let's see how we can meet our sentence. Uppercase or lowercase, or maybe capitalize only the first letter of our word or sentence. So the way to do that is just by adding text. Let's say I wanted to be lowercase text box. And I can add it in text, sorry, as long as I have space. But that doesn't mean if I have this text, sorry that I cannot add anything else. No, I could add as many class names as I want. So now I want this to be text lowercase. Let's say I want this to be uppercase. Here, uppercase. And I want this to be, let's see, capitalized. So it only will capitalize, capitalize the first letter of my work. So here text capitalize. And let's just remove this in order to see the difference. Now for you, go ahead and refresh my page. You can see that my first sentence is all lowercase. My second sentence is all uppercase, and my third sentence is all capitalize, the first word. So you can see that L here is capitalised, is capitalized, D, so on and so forth. Now let's move on to something else. Let's move on to the font size. So we've seen how we could change the font size using headings. So H1, H2, H3, and so on. However, these are more like four titles, so titles can be more huge size. So we use this one issue and similarly for it displays. However, maybe we want our paragraph is a normal paragraph to just be a little bit larger in size. So would you do that is by adding font size one or two or three, ranging 26. However, the way we write that is by just adding fs dash one for font-size one. Let's say I, when I went to my second line to be of size, let's say three. And my third would be of size six. Now let's go ahead and save that and see how does that work. Let's go ahead. And so you can see that fs one has the largest size. Nf2 has a kind of large size, however, the first one is larger. You can see that it's bolder, and the third is the smallest, and you can see how small it is. So this is F6 and this is Fx1. Of course we have also 2345. So it's fairly self-explanatory, just AD FS and choose the size that you want scaling from one, so six. And of course on, we've seen that in the previous section, how you could make words Bolding, using HTML over using it in Bootstrap is just as simple as typing in FW bowl. So let's just remove Fx1 and type in FW boo. Let's see. Let's add them actually in a new line just to review the differences. So let's add here three paragraphs. So P times 3. Let's also using all the same characters. So learn a ton. And here Let's 3 class names. And let's give the first one a font weight. So this is a font rate of W stands for font-weight, bold. The second that say italic, you can meet your phone, treat italic. And maybe the third one could be light. So light. And let's go ahead and see that and see. And so you can see that this has gold font weight. This is italic. This is, I'm sorry, this is not italic. Let's go ahead and fix that. So in order to use font-weight, sorry, the font should be italic. You just have to change up w to f as t. So F and C. Now, if you go ahead and see if you can see that it's not I tell. So for italic you just need to add es. So FST stands for is for italic and normal actually hover, normal. Like a normal paragraph. You don't have to add the word normal. So it's not that much of use. It's more used for italic. And so these are for the font weights. So you can also make it bolder just at Boulder instead of bull. So here, just add folder and refresh. You can see that now it's already bought. Sometimes if your text is much bigger, if you add folder, you'll see the difference, however here that x is small, so it's not much difference. And so that's for the font-weight. We also have something which is the line-height. So sometimes, maybe I don't know if you've seen that, but when you will need to write a report. Your line-height has to have a spacing of two. So maybe you want your website to me. Let's say you're building oxide for report and you'll want to make a line height of two. And so the way to do that is just by adding a class named allege, study for line-height and just specify what you want your factory. It could be a number like one. So you want the spacing to be one. Maybe you want it to be small. And maybe you wanted to any base. And maybe you want it to be large. So let's go ahead and try all these. So one, and let's go ahead and sorry, copy that had added here. So let's go ahead and add this to be small. Let's add this to me. Sorry. Let's just paste that. And let's add this base. And finally, let's add this to the large. Now here in order to just obviously difference does go ahead and add more works. So instead of adding just these 10 characters, which is the icon, all of these, sorry for that. Okay, so now, okay, actually that's not worth. So let's just save it and see if that would be okay. Okay, So that's working. So here you can see that the height is actually large. Here the height is based, so it's the normal height. Here the height is small and here the height is one. So you could change that to, let's see what happens. Save and go out. And you can see that now the line-height, so the spacing between the lines is actually 2. So we're actually manipulating many things of the text. So the positions, the height, the line-height, the font-weight, font size, so on so forth. You can also change the color of the text. So maybe I'm not sure. I want my text to text muted. So maybe let's try this text muted. And let's see what does that mean. So you can see that now my text is a little bit more gray, and that's a really common color for paragraphs. So you might see a website, a program that is gray and that color. And so that's one of many popular colors that is used. Two paragraphs, maybe lengthy paragraphs. Lastly, I think we've seen that on the text. Sorry, how to underline. So let's just repeat that. So if you want to underline a word, just add text decoration. So here, text deco ration. So maybe you want to be on line through. So line through. And let's say ten. Sorry. Maybe you want to your paragraph to be text decoration. Sorry. And maybe you want it to be underlined. So you just say under line. And maybe sometimes let's say you're adding an attribute and you know that attributes have by default and underlying. And so you could remove that attributes. Let's say that I think 10. And let's say I have the word hello. So let's just see a homepage. So you have here the line through the underlying and here the hello. Now let's say you don't tend to attribute to have this underlying below it. So you can remove it by just saying adding a class and just seeing text decoration and then dashed none. So you don't want any decoration for your text fresh. And so now you can see that the line under your He's gone. So text-decoration, none means that. Now let's move on and see what our abbreviations. So the way abbreviations work is that you might have a bird that is an abbreviation for another world. And so in order to know what this other word is, we'll just put our mouse on that word. And this would show us the completion of this word that you're pointing out. So let's say maybe I have this bar graph that has an up radiation, which is and so the title is the exact name of the world and the instep thing inside of it. So here the thing We will be right inside of the tag is the actual application. So here, let's say I have as Shamele and in the title I'll write the complete name of that Chaebol, which is Hyper Text Markup Language. So here I'm writing down. Now, this is, does, this actually has nothing to do with HTML, sorry, with Bootstrap. And actually we're bootstrap comes is what the size of this aggregation. So let's just go ahead and copy that just to see the difference. And here we'll be adding a class that goes, that stands for something used in Bootstrap, which is called initial realism. So sorry. And we'll see what the statue. So let's go ahead and see this through two words that are aggregations. So if I click on that, you can see that I now have this HyperText Markup Language, which shows whenever I'm pointing to this aberration. Now if I go here, you can see that my font is slightly bigger. So here comes just this part of Bootstrap. And if you don't want to use initialism, that's not a big deal. Harbor aeration is really an interesting turkey you could use using your websites. So I thought this would be. A chance to just show you the start, because not many people actually use it. So now that we've done abbreviations, Let's go ahead and see what our block codes. So basically, a block code consists of the block code itself and a block footer. So maybe I have a figure. So let's say I have a figure tag and inside of that trigger, I have a block. So here you can see that they have that name logo. And let's give it a class of luck. Now, you might be wondering, why would I give it a class of block code if it's already a mock-up. So the thing is, Bootstrap actually implements its own styles to this block of elements. So by just adding that class block code, I'm giving this local tag some special styles, even by Bootstrap to make it nicer to display. So inside of that low code, we write a code, let's say from someone famous, let's see. I love you. 3000. And so this is my coat. And I'd like to see who actually route that solely set that to 0. And would you do that is by adding a fig caption. So and the thick caption, I'll give it a class name of blockquote. So here, block, quote, and then dash footer. And you might notice that there actually isn't a tag called blockquote footer in HTML. So this is an bootstrap class that we'll use to indicate that this is the footer of our block group. So bootstrapping, understand that this is where we'll be writing our footer or niche, say, the source of that code. So who said that quote? And in that case, I'll be writing, Let's see, Tony Stark. So I don't know if you watched and game if you've watched any of the Marvel movies. So this is a famous line of Tony Stark. So now if I go ahead and save that, and let's see what actually is happening. So you can see that I did not add this dash. So if I go back here, there's no place where I've added the dash. However, whenever the moment I wrote the classic law code, I'm a shovel or bootstrap. Understood that this is where I want to write the source of my code. And it added for me a dash automatically. And here is my coat. Now, just, I might have done something wrong so that lacO is just four here. Um, I forgot to fix that. So let's just see that again. So now you can see that footer is much smoother. So you have to pay attention where you close your block codes. You see how just changing the position of block code from here to here changed many things. So the size became smaller. So make sure that everything is aligned properly. And so that's basically for block codes. So when able to write this footer using Bootstrap and by adding that class name, we've been able to give it a nicer display. Now, one thing you could do, maybe Tony Stark is not as fancy as it works. So what you can do with just by adding something called site. So let's just so site. And then inside of it, I'll just give it a title of some other title and give it a name, sorry. Tony Stark. And now let's go ahead and save that. And now you can see that it's much more better. It's a little bit italic. And that's how usually sources are written. So I guess that's it for the text utilities. So one last thing you could do is just from, let's say I want to make this block quote in the middle of the page so I can add something like text center to my figure. And let's see what happens. So if tech center and refresh and I see that my figure as Adam, middle of page or at the middle of a line actually. Because we use tech center as the class name for my figure. So that's it for typography. And we'll be seeing in the upcoming videos many things that we'll be using from bootstrap to make a website more playable for the user. 5. Colors: Now let's go ahead and see how we can use colors in Bootstrap. So let's go ahead and first create our prime. Let's call it colors, the HTML. And the first thing we need to do is add the link and of course, the script tags of Bootstrap. So here's the script that's going to add it at the bottom of our body. And we have the link which is here. So now let's go ahead and start. So let's say I have this paragraph which I wanted to be a font color to me, let's say blue. So actually in bootstrap, we have a limited number of colors. So we have primary, which stands for actually somehow blue. So let's go ahead and see that. So primary, so in order to do that, we add text primary. And you actually will be more familiar with these names as we move forward in the course. It see how many times when we're using these names. So don't worry if you're not memorizing them now, you will get the hang of it. As we reach the middle of the course, or maybe at the end of the course. So let's just give it a name of texts primary to know that this is the color that you see. So now you can see that my text color as primary, which stands for blue. Now of course we have other colors. Let's go ahead and discover them. So we have also something called texts can vary. And so let's look and see what that stands for. So that's secondary. And you can see that x secondary is actually great. We have also the green color. And so whenever you think of, when you might think of success, so just type in text. Sup says, and does it give it text success? We have also, whenever we think of red, maybe read the first two danger. So if you had an ad text, danger. So class text, so think of danger as red. So that is the color of red. Sometimes whenever you're at a stop sign before it, you have that yellow side, which is more like of a warning. So warnings stand for yellow. So P dot txt warning. To display that yellow color. We have first we have, we have info. So I actually forgot what does that virtue, so we'll discover that in a second. So that is probably that's blue, white, so light blue. But we'll see that. So in case you that I sometimes don't memorize everything. Let's go ahead and see that. So yeah, it's light blue. And so you can see that success is green. So always green refers to success, red prefers to danger, and yellow refers to warning. In full first two, light blue and primary is dark blue and secondary is gray. So these are the only colors that you see in Bootstrap. So these are the primary colors that are provided by Bootstrap. You, of course, you could use your own colors. So you don't have to use these colors. They're just provided by Bootstrap if you'd like to use them. Now, in the second part of the video and the next board will see how we could add colors on borders and how we can manipulate porters. So see you in the next video. 6. Borders: As we reach this part of the course, we'll be seeing how we be using orders, using Bootstrap. And specifically, we'll be seeing border, the additive subtractive, watercolor, border width, border-radius, and sizes. So let's go ahead and see what each of these terms mean. And we'll start by the border itself. So mourners could be additive or subtractive. So let's go ahead and see what each of additive and subtractive me. So let's go ahead first and add a new font. Let's call it portrait of HTML. And CSS copy the contents of the color, style and two dots. Now, let's say I want a word that, or paragraph that has a border on sites. So maybe I want this to have a border. So the way I do that is just by adding a border that saving that. And let's just see what does that give us. So as you can see, There's this line over here and there's actually aligned here, but it's not that visible, which is the border of our page. Now, let's go ahead and just try to add that border on a middle elements just to make it more clearer. And let's go ahead and refresh. So now you can see that here is the border. There's actually also a border at the right and the left. But because it's at the end of the wonder you can't see it. So the way additive borders work is that maybe I want only to have B border top. So instead of just adding water, I'll add border top. So I'm adding to that order term. And so on. I can see that Texts says only has that top border. And we can do the same thing for the middle. So maybe here I want my border to be order n. So n is the right. Maybe here, I want border on that top, bottom. So these are most common names that we'll be using in bootstrap. Don't worry, if you, this is actually the first time you've seen these terms, but you'll get used to it. So part of always refers to the bottom of a border or bottom of any element in our page. Top, the top of any element. So quarter. Start. So here you have top and bottom and start. Now let's go ahead and see. So you can see, however now you won't actually see those and start, but don't worry, we'll fix that later when we learn more about our window, how to make things smaller in which maybe, don't worry, we'll get to that. So this is for additive borders. Now, what is subtractive borders? So maybe I want my border to have all the elements Holober excluding one. So I want to subtract, sorry, subtract one border side of my window. So maybe I want. So let's go ahead and just add a span element just for you to see that end. And the right spam plus I know Sarah, and let's give it a border. And let's remove this border. You'll be able to clearly see the borders, the right, left, or let's say start and top-bottom. Now, let's say I want to remove only one border. So among all these borders except one. So I want to subtract so that we could do that is just by saying water. Let's say I want to subtract the top border. So the way to do that is just by saying border top 0. So I'm just subtracting the top water. And now, now actually what happened here is that this element originally didn't have any border. So what happened is that I taught this. I told my web page, if this element has a border, bottom border of, sorry, at a top border of 0 as a type of border, just remove that top border by adding a top border 0. So that's why we cannot see the other borders of our elements because they already don't exist. Now, maybe I want to add only a bottom border. So the way to do that is just by removing that 0 and putting that to passion. And you can see that now my word only has a bottom border here. So that's four subtractive and additive. We could also do one thing which is actually interesting. So maybe I want my on this paragraph to have a border which is, let's see, this one which has a color. So the way to do that is first specify that I want the border, and next specify the color that border. Say maybe I wanted to be the same color of my text, which is secondary to border second jury. And now, if I go ahead to my page, you can see that now my border is also secondary. Maybe I wanted to have, sorry, a primary color. So now you can see that my border has a blue color. So we can change the color of our borders. So color is lunches for a text, it can be also for my borders. So now one thing also reproduce borders to as the width. So maybe I want this to be a little bit more thicker. So we do that is just by adding water. And the number. Ratio that I'd like it to be. So maybe I wanted to be a ratio of three. This scale from one to 55 is the thickest, one is the finished. So now we go ahead and refresh. So actually now you could see the start at the end of five order and you can see how thick it is. So maybe also I want this to have a border. Actually, no, let's just add it to something that is already used. So here a border button, and I want that border bottom to help and we'd love to. So now for your head and fresh. So sorry for that. So you see how because I wrote order to wrong nothing happened because Bootstrap did not understand what I mean. So here you can see that the width of my border has been more thicker now and now it's being mostly. So one thing, maybe I don't want this border to be straight and the edges. Okay, so let's just actually tried for Sarah to make it more clear. So does either border and the border width of maybe three. And now let's go ahead and say that I want my adjusted to be rounded. So all I need to do is just click on that. Now if I refresh it, you see that now my edges around it, it has a thick of thickness of three and its secondary color, which is great. Also wanting you can do is that maybe I wanted to be rounded as a circle. So the way I do that is just by adding that circle. Now if I go ahead and refresh, you can see that now my border is actually a circle. Maybe I want this to have older. That is actually like a pill shape. So there's actually that too. Now and refresh. So now this actually won't work because we've specified a border button. So just remove that. Now, refresh. So it's actually not noticeable here, but it is. Let's just add it to the ceremony. So here, this little dab, and here I'm actually it is anymore because I wrote border. So it has to be rounded. Sorry for that. Let's see if it actually is noticeable. Yes, it does. So you can see that now it's like a pill. We have also round bottom. So let's say I had rounded button and see what does that do? So now, as you can see on the bottom is actually rounded, but the edge is not. Let's actually do it for Sarah just to visualize it. So here, and let's just give it a font size of 44. You see happening here. The bottom as rounded harbor at the, sorry, the top is not it's here, it's pointed and, and edges it's pointed. So we also have on, so here we actually used the bottom. So we could also use the end, the top, and you start, so you can use it for all sites. Let's just try out the start. And you can see that here I have the border is rounded and here pointed. So I guess that's it for the circles to show the border-radius. You could use, call it water reuse, what we have. So, so you could also specify the size. So you could say rounded 0. So say I wanted to be rounded 0. And let's see what the statue. So now you can see that it's not that edge. Let's say I give it three and fresh. So now it's more edge. So the bigger the scale, the more at this rounded. And this is actually how we specify the size of our rounds. So that's all for borders. And the upcoming courses, we'll see how we could actually remove all that space. So obviously I don't want a border that teacup many space in my page. And obviously I don't want it to be stick to the start of the page. That would be really not good looking at all. So let's see how we could fix these problems in the upcoming videos. So that's it for that video. 7. Spacing: Now let's go ahead and see how we could use pacing in Bootstrap. So Bootstrap includes a wide range of shorthand responsive margin, padding and Gabby Trinity classes to modify elements appearance. So when you talk about spacing, we will be talking about margin and padding, rotation. Some examples, horizontal centering and gap. So let's go ahead and see each one of these and how we could use it using Bootstrap. So first let's go ahead and create a new file. Let's call it spacing the HTML. And let's go ahead. Let's just fix that. So here P. And let's go ahead and just copy the borders far that we've been working on. So copy that frontier. Now, if you recall, let's go ahead and just run that. So here is the borders for the pre-filled working on in the previous video. And so we said that we might want our border to be some away from the text. And maybe I want the text to be away from the window. So here is how we do that using margin and padding. So before we start, we need to know the limitations. So let's start first with the margin. So let's say I want to create some space between this element, so with the border and the element above it. So I want to have some specific tree in Texts primary and the stack second. So the way to do that is that first we need to use annotation. And so we'll be using M. So M stands for margin. Now sex secondary. As we said, we wanted to have some margin between text secondary and the element above it. And so in order to have this space between this element and the element above it, we'll specify that we need a margin top. And today, the way to do that is by adding t. So margin. Instead, I'm so sorry, M stands for margin and T stands for top. And then we have to specify the scale that we want to apply. So maybe I want this margin top to be at a maximum, or maybe 11 from the maximum, and so on. And so schemes from 0 to five, I can specify, let's say a margin top of three. Now if you go ahead and save that and we refresh our page, we can see that we have now the space between texts, Kanri and experiment. Let's say we change it to five. So here and a scale of five, which is actually the maximum and refresh scenario. You could see that we have this maximum margin space between the secondary and Texts primary. Now let's say I want to have the space to be maximum equally from both sides, the top and the bottom. And so the way to do that is just by specifying not top but y. So y is going to specify that I need a margin of the maximum. Because fat is a maximum on the y-axis. So from the top, from the bottom. So now if I save that and go and fresh. So now you can see that I have this maximum space from the top and from the bottom. Now, evidently if I want to have it only from the bottom, I just hadn't set of Y, b. So top, bottom B and both sides y. So now if I go ahead and save that and refresh my page, you can see that now I only have the spacing from the body. So now that's for the top, bottom and both sides. Now let's see how we could this margin from the right and the left and both sides. So first, in order to have a margin from the left, so from this side I need to add an notation, S. So S stands for left. So now if I go ahead and save that and refresh my page, you can see that now I'll have the space from the left. Now if I wanted to have it from the right eye and nothing else but e. So here we'll add e. Now go ahead and refresh. So now you see that I have this maximum space from the right, which is stated by E. Now, evidently if I want it from both sides, I will add not E and not S, but x. So x standing for the x axis. So now if I go ahead and save that, refresh. So now you can see that I have this margin from the right and from the left. So as stands for left, right and X4, both sides. So now that's for the margin. So now we still have the palate. So now margin is the space between the element and the elements around it. However, padding is the space between the element itself and the border around it. So maybe I want to have some padding between this element and the border. And so the way to do that, and before I continue, just if you want to have a margin on all sides, not just the left or the right, or the top or the bottom. You just add em without anything else. So just m file. So here you'll see that we have this margin of five, right at the left at the top, and the public. So now let's go ahead and try the party. Sorry for that. Okay, So now for the padding, I need to add a p. So then invitation for padding is P and everything else is similar to that of the margin. So if I want a padding top, I just add T. And let's say I wanted to have a scale three. So P padding to the top. Now. I didn't see you can see that I now I have a padding from the top and from the text secondary, as I wanted from both sides. So the way to do that is just by adding y. Now see that fresh. So now I have from both sides and from the vertical sides add x. So PS3. Now, fresh, see that now I have padding. Now you can see it that much from here because there's already space. So it added that padding, but I can see, but you can see it from the left. And finally, I could add p for both sides. So P 3 first, see that now I have the spelling of scale three from all the sites. So we've talked about margins, paddings, and annotations for each one of them. And we've given examples. So now let's see horizontal centering. So maybe I want one of my elements to be centered at the middle. And so the way to do that is to use specific mutation that we'll see. But just before we do that, we've seen how we could use text center to move something to the middle. However, there's a difference between, between tech center and what will be seen now adults. And I'll show you the difference after we do that. So first, an order to add an element and add it to the middle of the eight, sorry, to move an element to the middle of the page. What I'll be doing is adding MUX 0, 2. So let's think about it. Stands for margin x for horizontal. And auto is actually saying that I want this element to be centered at the middle of this x axis. So now if I go ahead and save and refresh my page, you can see that now my element is still the same. Let's see why. In order to see why we need to add a border for that, just in order to explain it clearly. So I'll add and add a border and I'll give it a color of maybe secondary or let's say warning. So yellow. So don't forget the colors. Let's go ahead and see that. So now you can see that this has a width of the whole page. So aren't saying if this element, which has this whole space and Mexico too soon to put it at the center of the page. So you might think, why didn't give me that text info at the center of the page? Well, because we're not seeing gives me the text at the center of the page. I'm telling you, I want the element, the whole element to be at the center of the page. And it turns out that now this element is actually at the center of the page. Now, if we go ahead and add text center, this is saying I want the text of that element to be centered. So you can see that now the text is centered and now the element is already centered at p at the middle of the page. Now let's say we have this element. So now let's just, let's take them for a moment. And let's give this be a width. So let's see with style. So we'll give it a width momentum using style. We'll see how to do that later using Bootstrap. So let's give it a width of, let's see, 200 pixels. And save that. And let's remove the x center. And let's save that and refresh. Wait a minute. So monster, sorry for that. So here, border, border warning, okay. Okay, so now you can see that my element has been reduced. So my element has been, was at first like all the other elements, taking the whole page and now it has a width of 200 pixels. So first let's go ahead and put the elements. So the elements, the text of this element at the center of the, of the element itself, not at the center of the page. So we add to that text center. So remember, Tech Center puts our taxed at the center of the element. So now you can see that tech center gives us texting for at the center of this element. Now let's try to move this element at that center of the page. And the way to do that is by adding a max auto refresh. And now you can see that my element is at the center of the page. So this is horizontal centering. So we're centering and element at the center of the page. And I hold the example I gave, made it clearer. What's the difference between text center xx 0, 0, 0. So we still have something called Gulp. So let's go ahead and see what slot. Okay, so let's say we have a div and the star stands for division. If you don't know that. And let's give it a class of gap. So we'll see what does that mean in a moment. And let's give it a gap of three media. And also we give it something called the grid. So gap always comes with the grids. So let's give it the DeGroot first and then we'll do that. So using that is the D grids. So degrade stands for display grid. So using the display grid, we can make use of gap utilities on this, on the parent container. So the parent container div, which is the sacred and we'll add some items. So this can save on having to add margin utilities to individual grid items. So the items that we'll be adding here in a moment. So instead of adding margin to each one of these items to have some spacing whenever we add display grid and just gap with whatever we want. Upscale when we are actually saving ourselves from many margin utilities. Utilities are responsive by default, are generated via, of course, the APIs that we add, the link and the script. So let's go ahead and add some items. So in order to add some items, will add a div inside of that container, which is the grid. And we'll give it, let's say a border just to see it. And let's say grid item, item. And let's copy that. Maybe four times. So let's have four items. Item one. Here is item two, item 34. So now if you go ahead and refresh our page, you can see that we have now those grids that are spaced from each other. Maybe we'd like to have some padding between the grid and the border. So let's do that. Maybe add. So in order to write on all of these, just click on ALT. So here, here and here. And let's give it P to know and see how this goes. So you can see that now we have these four grids with the spacings between them, so on and so forth. So here is just how to display these grid items using the grid band gap. And so here we've reached the end of our spacing section. We'll move on to another topic in the next videos. 8. Backgrounds: Now we'll be moving on to see how we could use backgrounds in woodshop. And specifically, we'll be seeing a background color and the background gradient. So let's go ahead and start with the background color. Now, as usual, first is go ahead and create a new file. Let's call it background, that HTML. And let's copy the contents of spacing to that of our background. And let's go ahead and just see how that look. So here we had these items and these grid items and so on. So let's say I want this text and flew to have just stay inside of a box that's yellow. So I want not only the border to be yellow, but everything surrounding that text input to be yellow. So how can we do that? Well, using Bootstrap, we use something called BG, which is a notation that stands for background, should be G. And then followed by any of the names that we've discussed in that colors section. So these names are primary, which stands for blue, secondary, which stands for gray, success, which stands for green. Danger, which stands for red, warning, which stands for yellow info, which stands for blue. Light blue. And we have light and dark, which are really one of the most commonly used colors. And that's because they give this color, which is not that bright, but not that, doesn't have that contrast which is used in many websites. So let's see what do we mean by that. Let's first try and go ahead and give that text and for a background of yellow warning in that case. And save that and refresh. So now you can see that this element has a background color of yellow. Now, let's try and give these colors as sorry, items, a nice background color. Well, if we try to first give them a primary background color. So let's say here, sorry if without the move that space and click on aunt. And let's give them all, let's say a primary background. And let's see how that turns out. So you can see that the color is too bright and you don't often see that color on item grids and well-known site. Let's try another color, maybe success. And remember, success stands for green. And let's refresh. And you can also see that it's not that used in. You don't often see that. That's what I mean. So let's try something else which is Vg light. So background color light, and see how that turns out. And so now you can see that these elements look good looking. So the background color is not that to grind. It's actually close to that white color, but it has some gray or let's say shade in it. So it, it looks actually did bluffing. Now we also have the BG dark. And let's try to give maybe this Texts primary a BET dark and see how that turns out. So PEG dark. Let's go ahead and save that. And now you can see that, um, let's go ahead and just add some padding. Just see it. Good. So P, that's fine. Just OK. So you see that the color is not totally black, but it's dark. And that's one of the most common colors used in websites. So light and dark on one of the most commonly used colors, and especially in nav bars. So whenever you see a number, it might be having a color of dark or light. And of course, you could change the color of this thing over here to any thing you want. It doesn't have to be primary. So maybe if we say text, white, suit here and refresh. Now, this looks better than having a primary color here. And of course we'd like to change that to text right here and refresh. Now that's for the background color, and now comes the background gradient. So maybe I don't want my this element to be solid white. So maybe I want to add some effects to it. So maybe I wanted to start with light yellow and, and with contrast flea contrasts the ALU. So it becomes more contrast. And so the way to do that is by adding. So you could do that using CSS. But if you've actually worked with CSS, you know that this takes a couple of slides. Well, using Bootstrap, this only needs or takes one word. And so let's go ahead and try it on the warning, or maybe let's try it on something else. Let's give it. Let's actually give this a background color with a padding. So text warning, Let's give it a background color of danger. And let's give it a padding 5 and save, refresh. So you can see that now we have this red. Now however I want to, I want this thread to start, as I said, to change the color from light to dark. So in order to do that, so I wanted to be graded and outwards. So the way to do that is instead of saying BG, dark, sorry, danger. And so what I'll add beside into danger, something called VG gradient. And now if we go ahead and refresh the page, you'll see that now my element has this light red color at the top of the element. And as we go down and becomes more contrast. And so this is what's the greeting. Does. The gradients starts with a semi-transparent white. As you can see, which fades as we go to the bottom of the page. Now of course we can do that too. Anything that's just tried to do it to the dark color, switch my colors showing up. Okay. So here we will add with Nietzsche gradient and see how that goes. So you can see that it starts with white and then end with this white color fades. And the bottom. I mean, I guess that's it for the background colors. Will you will see one more how we'll be using these background colors and other components of Bootstrap. But for now, it's enough to know how to use the background color and the background gradient. 9. Text Alignment: Now we move on to vertical aligned. And you're using vertical line will be able to change the alignment of elements with the vertical alignment utilities. So let's go ahead and see how to use that in Bootstrap. So let's go ahead and create a file. Sorry, let's call it v alone. So vertical line dot HTML. Let's copy those of background to be. Now, let's go ahead and add a paragraph and let's give it a C Lauren. And save that and CRP H. So here's the page and we have a sentence. Now, actually let's just remove B and ad spends instead. That would be better. So file, let's say five spans and multiply it by five from that system venture. And here, now inside of the spans, let's give a class to each one. Let's just Clicking. And plus. Let's start with a line. And we'll see many, not many, but several alignment techniques. And we'll start with the baseline. So that's the baseline. And in order to implement it, we'll add here slash baseline. Now, we also have the top. Now I'll be running all of the types in order to visualize the distance. So maybe if you saw only one, you won't see the difference between it and other types until you see them all at once. So that's why we have also the middle. So as I had another model, in order to implemented slash, dash middle. So baseline top middle, we have also the bottom. Here. Bottom. We still have the text and the text bottom. So let's go ahead and add here text and text bottom. So it's going to copy that Next button. Text. Now, if you go ahead and refresh. You'll see that here is the baseline. Here is the top. Here is the middle. Ear is the bottom. Here is the tab stop, and here is the text button. So let's just fix that. Here we need to add a dash. And here as well, promised to flush. Now that expert. Okay, so as you can see, the top is actually quiet at a higher level than the baseline, and the middle is at lower level than the top. The bottom. You might not see difference here, but it's actually below them. And then we have the text and the text top. Now, this text alignments might not be that obvious. So in order to actually see them in a clearer way, we will do something else. So let's go ahead and create a table beneath that. And then some of that table. Let's give it first at t body and then a table row. And now if you don't understand these terms, It's okay. I just think that just to show you the difference, so this is a table D. And let's copy, or let's actually just multiply that by six. And then actually I don't know if that works here, that's fine. So here we have six. And let's go ahead and just copy those. So I'm guessing if we copy those and Poole Sophie, copy paste. Inside of it. Please. Space. Okay. So we have a baseline. We have on the top, middle, bottom. And you have a tech stop at a textbook of course. So truck stop and texts, bottom symptoms. And then we go ahead and add those top, middle, bottom. Then we have text and then text model. So here text bottom. Let's go ahead and see if that works. Now I think we forgot something. So we need to specify the height of the table or else we won't be able to see those at different heights. So let's give it a height of 100 pixels. And now let's go ahead and refresh. Okay. So here you can see that the baseline is actually aligned with tech stop and texts bottom. We have the middle, which is at the middle. We have a top which is at the top, and we have the bottom which is at the bottom. So what I did here is, is just that I've added those and arrow. And it's a row is like this rho k. I've given this row a height. And so, and that way I've been able to see how much this element is going to go down. So here when I give, I give it a class of align middle, it came to the middle of that row and the bottom came to the bottom of that. I can see that text bottom and Text tab and tab and baseline, or actually somehow similar. But they do differ in some cases where we're actually doing some style to the pitch. And so that's it for the text alignment section. 10. Position: Now we'll be moving on to positions. And in particular, we'll be discussing position values, arrange elements and central elements. So let's go ahead and get started. So let's go ahead and first create a file as usual, position dot HTML. And then go ahead coffee. Let's say on particular alone, the last one It's been working on in that position. And let's start from here. Four maybe. Okay, so let's start to feel the T. So we actually have five positions. We have a static position, relative position, and absolute position, a fixed position, and a sticky position. So let's say we have five divisions. And let's say I type in each one of them. Click on that. And that's just write anything tool for now. And then let's add the classes. And let's give ten position. So that's how you'll be writing them. And dash. We have other set status. We have relative, absolute and fixed and stick. Now you might not notice the difference between those positions and that kind of example we'll be seeing. In fact, some examples we'll be using these positions. But first let me explain, or let me just state what are the positions and what are arrange elements and central elements. And after that, we'll give examples on what I've explained. So just in order to show you what happens. So here's the four elements. So as you can see, we have an element that's actually, let's just give each one a name just to know that it's the one to static, fix, absolute or relative. And of course started. So, sorry for the last one is actually not started. It's sticky. I don't know why I wrote static. And here, sticky. Now, if we go ahead and fresh. So first you can see that we have as if two overlapping sentences. And so the reason for that is that we have and absolute position. So the absolute is light. It doesn't consider any elements and just sticks wherever we told it to go. So it's absolutely, It's as if. I'm seeing transparent or something like that. We have the fixed. So the fixed, it's just fixed at the bottom, so it does not move. You can see it's always fixed. Wherever I scroll, it's always at the bottom. We also have the static, the related, and sticky, but you can see sticky here exceed now. However, you won't notice the difference between those three. I'll give. As I said, I'll be giving an example, maybe that would be new to you. So anyways, that's how you actually use these positions using Bootstrap. Now in order to arrange elements we could use. So let's give an example of that. Let's say we have a div. And that has a class which is position relative. So I'll be using position relative. And maybe that will give you a clear idea about the relative position. And then inside of position relative, we'll be having, let's say six deaths. So div 6. And let's give each class, each one across and click on those. And now plus. And let's give them an absolute position. So as I said, an absolute items could overlap on each other. And now to arrange elements, we could start using terms like top. So top four vertical, top position, start for horizontal, left, bottom for bottom position, and end for the right to start. And for left and right, top and bottom are for actually talking about. And so let's go ahead and just draw it and you'll understand from there. So let's say we have here, let's see, we want this to have a top of 0. So I wanted to be at the top and start with 0. So here, when I'm saying top 0 starts you, it says if I'm saying, so time 0 means at the edge of the top and starts 0 means at the edge of the star. So let's just say we have this box just to draw it for you to understand. And here. And one more circuit that can store here and one more. So. Let's say I want to add something. Let's say this is a box and I want to add something here. So in order to add something here, I'll first give this element and absolute position, and then I'll give it a start 00. So I wanted to start from here. So let's give it a name of a. So this is as if this is a. Now, let's say also we want another element to be also a top 0. However, I wanted to be at NCI, so I wanted to be at the edge of the ends. So let's fix those. Top. And, and so as F on saying, I want my element to be at the right edge. So top 00, and let's give it a name of B. Now, we also have this parliament criteria. Let's give it a top of 50. And I start with 50. And that actually means that I wanted to be 50 percent from the top. So maybe at the middle and start 50. So also from the middle, from this point. So here this is C. And yes, I would say that actually at the middle, or is it maybe just considered government. Okay? And here is c. Now we also have bottom 0 and starts you. So that is the S or the bottom edge of the star. So this is actually here. So let's give it a name of t k. And we also have fallen 0. And so don't actually this. So here, bottom 0. And so bottom 00, which is here. So that's B. And let's give any movie. And let's go ahead and six. So that's for arranging elements. Now, loader example is 4. Let's say we need to say we want to move that to the middle. And so the way to do that is just by saying translate metal. Now, I'm just explaining them right now. I'm not running anything because we will be asking an actual example in a moment. But to translate, you just say translate middle. That's it, globes and translates to the middle of whatever we have. So that's it for centering elements. So if talks about arranging elements and this is central elements. So translate with this. So we'll center the elements with this transform utility class. So it applies the translation with respect to x and y, not only on x. So let's say this is a and move it 50 percent on tax and 50 percent on y. So a becomes here actually. So yes, sorry, I guess that is right here. Okay. Now, let's go ahead and take an actual example. So let's just move those. Let's comment this out. And let's write an actual example. Now we haven't talked yet about buttons, but try things. We could do that. All right, it's not that hard. So, so we have a button and let's give it a type button, K. And inside of that button, Let's give it a name of meals maybe. And now let's have a span which is, let's say has this 13. And let's give it a class for this spot. Now I want it to be positioned absolute. I wanted to have a top 0. So I want to be at Azure the top. And I wanted to be at start 100 or 1000. So at the edge of the end. And let's say I want translate metal. And let's just add this to be 0. We'll see if that changes. Let's give it a background color of secondary, and let's give our button a background color. So he was given a class of bg primary. And let's give it a position. So yes, let's also command out. Okay. And let's just fix that. So now if we go ahead and refresh our page, you can see that now we have this middle button and this 13 as an application. Now this is not that nice. We'll see in the upcoming lectures how to make our buttons much nicer. And in fact, we could actually make this dirty bit more. So maybe we could use that rounded pill to make it a little bit rounded as we've seen. So it is rounded and under 13. So from I guess that's it. Now, if this hasn't wasn't sorry, a position absolute and this would have worked. Let's try moving that and just refresh our page. If you say that now, my element is here. So why is it here? Because I said that I wanted to be at top 0 and 100. So start 100 means that I wanted to be at the end 0 actually, and subzero is a dash. Now you can see it right here because it's, There's actually, it's in the middle of this button. There's no edge, so there's no much space. But we can see that it's not here at the edge, so it's inside at the bottom. And that's because the position is not absolute. So if we return position absolute and, um, I forgot to say maybe save and refresh now the males, but it has become smaller to fit only meals that this element is the absolute and it's not an element anymore inside of my jokes, but on the position that we've stated for I guess that spirit and the Translate help us to put it at the middle. Yes. Let's see What happened to be to remove translate middle fresh. So if we did not do that translate middle, this is stocked 100, this is top 0. So it's here shown order to put it, the model to move with x and y at the same time, we need to translate middle. So let's go ahead and see that. Save that. And now let's just try to start 100 and add. And you see if there's any difference. And you can see that yes, there is. Let's move middle, ProSlate mental and save that. So you can see that if we had not translated middle, which would have come here, because it's empty row, it's at the edge of this. And so that's why we wrote start 100. So 100 start a 100, puts it here, and then we move it to the middle at here, sorry, so here to here, and it's plus here it goes, it's true here. So that's it for the positions. And the next videos we will be seeing other utilities that we can use. Bootstrap. 11. Sizing: Now we're moving on to sizing. We'll see how you could size elements in a website using Bootstrap. So first let's go ahead and create sourcing got HTML file. And let's copy Tom. Say those of the realign policy, the background into that of our sizing, but it's Shimon. And let's try to size some of the elements that we've created. So let's, let's visit first page. So here is the page that you've been working on. Now, let's try and let's say we want to size these grids so we don't want them to expand all the way to, the way, sorry, to the width of the window. So how we could do that? Can we do that using Bootstrap? So familiar way that you might consider doing if you don't know, Bootstrap is just right like we did here, star equal to width, equal width to 100 pixels. Now, we could make this a little bit easier using Bootstrap. And we'll say here. So let's say, let's say we want the width to be about 50 percent of our original size or original width. And so it's as easy as saying with 50. So we have with 25 saying that we want it to be 25 percent, 50 percent. 50 sorry, for 50 percent, 75 percent. So 75 for 75 percent and 100, 400 percent. And of course there is auto. So by default, it just gets us the palm default with. So let's try to give this a width of 25. Let's give this a width of 50. And let's give this a width of 75. So here and this pondering. And thus create another div for auto, so-called fight the number five. And with photo. And let's see, what do we get if we refresh our page. So you can see that 25 25 percent of the original width, 50 gave us half the height. Sorry, I have the width. That is 75 percent. 75 percent of the width and that's 100 percent. And auto just give us the 100 percent by default. So that's how we could manipulate widths. Of course, we can also manipulate the height. So go ahead and do that. It's actually the same procedure. So let's say we wanted should be of high 25, two. And this seems to be of high 50. So 50 percent of the original height, height 75, 100. So 100 percent. And last the height 0, 2. Let's save that and see what we get. So we see that here we have 25 percent of the original height. Here we'll have 50 percent of the original height, 35 percent of the original height. And here is a 100 percent of the original height. And here is high by default. So auto, so by default it is the original height. 12. Display: In Bootstrap, we have several types of display. And the most known, or the most used, or the display inline and the display block. And it actually seems somehow some of these when we were writing several of the other Bootstrap goats. So let's go ahead and see the DMD line and the d block. So here is a file called financial file called Display. And let's go ahead and dry and have, write an inline-block. So, sorry, an inline display. So and the way we do that is let's say we have a div and let's give it a class of D and line. So that way when we are saying that I want to give this element at the display in line. And let's click on click. And let's give it a name of the line just for you to see what do I mean by that? And actually in order to see what is the M line, we need to have actually more than one element because it is an inline element. So in order to know that it is in line with other elements, you have to have other elements. So here we have 2D inline elements. Let's give each one some characteristics. May be a background color, dark, and here, a background color of C and f2. Let's also give them a text, white. So both of them are actually using some of the things that we've learned previously. Text white. And let's have some padding between them. So P plus two. Now let's go ahead and see what we get. So you could say that I have two elements that are beside each other. Now, if you know HTML, you know that if I have two elements that are below each other, each element takes one width or some kind of width of the page. So it occupies a space at the page and below each other. So if I haven't added these classes, the students should be below each other. But because I've added this dn line, I'm telling my website that I want these two elements to be in-line with each other. So if we go ahead to the webpage, you see that the two elements are in line, so they aren't the same level. But let's go ahead and see another top of display, which as the d-block and split. So say we have two spans that have it split block and it's given a text, right? And maybe a padding of two. So the block, and let's give this a peachy dark. And let's just go ahead and copy that and add it here and change this to improve. Now if you go ahead and refresh the page, you can see and that's just add a bit of margin, just don't see it clearly. So here, bottom of five and here top of phi as well. And now refresh. So you can see that now that the display is block by block takes the width of the whole page. Now here, actually the block takes the words of the thing that it contains. And we can say that here the span is inside of the body. So it's going to take the width of the body. And the body takes the width of the whole window. So let's say that this block was inside of something else, something with a smaller width. This block would take the width of that element that is inside of it. So it's not necessarily going to always be that with the whole webpage. It always takes the maximum width of the thing that it's contained within it. So that's it for the displays. In the next videos, we'll be seeing other things related to Bootstrap. 13. Float: Now let's go ahead and see how we could float elements using Bootstrap. So let's say we have three divs. And let's say I want the first div to float from the start. The second div to float on the end. I want the third to float. Actually, I don't want to float, so no flow. And let's just go ahead and see what will that resulting. So float start in Bootstrap injured and as float star. So float star and float end. And of course these are within the classroom. And float. And it's just float. And if I don't want any float, then I'll just type float num. Now if you go ahead and check that. But first let's actually add a break here. Just see float. So let's put each one. I'll add a line here. Great. So to go ahead and go to the page, you can see the Hearst floats at the start, the second flows at the end, and third floats, actually does not. So now what you could do is if we want our page to be responsive, so I don't want it to actually float at the end when my windows that big. So maybe I wanted to float at the end whenever my window has become, let's say, less than medium. So in that way, I'll say medium. And so that means that if I am at medium or larger than medium, I wanted to Flo, float till the end at answering. However, if it's not larger than medium, so if it's medium or less than, I wanted to be as default, so it's not floating anymore. So go ahead and try and see what happens here. So now you can see that it is actually floating. However, if we go ahead and make our render smaller, you can see that now that it's less than medium, it does not float till the end. So in that way, I'm actually restricting the float and a float at the end whenever it's larger than medium. Now let's say I want to do, um, happened when we first said we wanted to do it. So that way I say float medium start. So now I want it, if it's greater than medium to float, to stay at a store. However, by default I wanted to be at the end. So now video had tour page. You can see that now it's here. However, if I make my window smaller to the extended features medium, now it reaches the end. So my windows now medium, uh, my element is at the end. So how did that happen? Well, I said I want to be float by default and the M over effects medium or larger, I wanted to remain at the start. So that's it for the flu. 14. Shadow: Now let's go ahead and see how we could create channels in a very simple way in Bootstrap. So first let's go ahead and create my element that has no shadow. And then we'll continue from there. So let's say we have a div and it has a shadow, none. And you can as well just don't add this three and this element, this sorry statement, shadow non statement. But just in order to make it clear and the differences that we're using will add that shadow, none. So here is fun. Okay, those are three, maybe background and f2. Or maybe like just in order to see the shadow. And let's make it rounded. So rounded. But say, hey, you know shadow. Okay. Let's give it up and bottom for the elements that are going to proceed it solos, yeah, Just give them give them some spacing of five. Maybe let's just give it an M5. So at all sides that would be better. Now if you go ahead and CRP h. So here is that element. It has no shadow yet. Now let's go ahead and give it a shadow. Sludge ahead and copy that and give it a small shadow and not do that. I'm going to see shadow. And here I'll say small shadow here. Now if we go ahead and brush, you can see that now I do have a shadow. So here you can see that line is thicker down here to basically, It's actually the shadow is at the bottom. Now let's say I wanted not to be as small shadow but a regular one. So the way to do that is by going and removing justice, slap, dash, small, and just say here, Let's see me irregular, shadow, all default. So default channel. And now if I refresh, you can see that now I have a shadow from this side and from the side. And the intensity is much larger here than here. And now. Lastly, we could also use a large shadow. So let's go ahead and see that. And dark shadow. In order to have a large shadow, I'm going to say dash LG, So that's large. And I'm going to save that. And now you can see that I have a shadow from the top, from the bottom, which is higher than that of here, and shadow from that side and that side as well. And you can see that we also have here shadow from the side, but that density is actually slightly larger here. However, the most seen differences at the bottom here see that the shadow at the bottom is larger than that seen here. So you can see that gyros are actually have a nice effect on pH. So that element criteria is much more visually nicer than that over here. However, that doesn't mean that we should use the shadow everywhere. There are certain places in our page that shadow would perfectly fit that webpage. So you have to know when to use these elements, not just how to use them. So that's it for this video. 15. Layouts: Now let's see how Bootstrap customizes the layout of our page. And specifically, we'll be seeing breakpoints, containers, grids, columns, and cautious. Now, breakpoints are customizable with that. Determine how your responsive layout behaves across the files or viewport sizes in Bootstrap. So we have the x small size, the small, the medium diverge, reaching the extra, extra large. Now, as you can see, the small has dimensions less than 576 pixels. Small is less than, I'm sorry, greater than 576 and, and less than 768. 768. However, medium is greater than 768 and less than 992 pixels and so on. So these are the breakpoints and actually seen now several times throughout the beginning of the course. So we've used them to specify what would we like to float an element and specify a width of an element according to the size of the window, so on and so forth. So that's for the breakpoint. Now. We also have the containers. And so and so are our containers. Containers are a fundamental building block of Bootstrap and contain pad and align elements for content within a given device or viewport. Now, similar to the breakpoints, we have breakpoints for Containers. So the container will show you a 100 percent for an container smooth. So it's going to contain all the elements 100 percent over an extra small element. However, the container region will do that for ports or windows that are greater than 576 pixels, the large we'll do that until a 168 pixels. The fluid is going to contain the elements in all these sizes. So whether you're on a small device or on a laptop and any of you put this dot container fluid is going to contain the elements of our webpage no matter what device we are using. So container fluid is actually the most preferable over sometimes you want to restrict something to be container fluid may be only on small devices, maybe on large devices, so on and so forth. So we'll be seeing how to use this in a moment. So these are continuous. So now we'll be seeing how to use containers, the grids, columns, and gutters using Bootstrap. So starting with grids, Bootstrap grid system uses a series of containers, rows and columns to layout and align content. It's built with Flexbox and it's fully responsive. So let's go ahead and see an example where we'll be using container row and column. So let's say I have, So of course, from its name, container is going to contain all the elements of my Webpage. So here I have a div, which is going to have a class of container. And inside of that container, I'll be writing all that I want to add. Let's say I want to have three columns on the same row. And so to do that, first I have to have a role. So I'll go ahead and say div dot row. So I want a class row, and inside of that class I'll be having several columns. So let's say I have the first column. So div.com, So grows from row and col is for poll, sorry. So here is one. Or let's say column 1, column 1. Then let's go ahead and copy that and say column 2. And then column three here. Column 2. Sorry for that. So to strike over here. So 2 and then 3. And let's go ahead and give this column dash small, meaning that I want them to be smooth. Some dash small. And let's go ahead and see what would that give us a save. Now, as you can see, we have column one, column two, and column three. Let's just give them a background for each column to see the differences. So here, let's give it a background meaning of light. Here, a background. And maybe you'll give this a background info. So Vg info. And remember NFO, this light blue. Now, if I go ahead and fresh, Let's change that to something else because it has the same color. We change it to warning. And let's go ahead and refresh. Okay, That's better. Let's give them some mimi padding. So let's say P. And copy that before just an MP4. I want to show you the difference if there is a difference between columns small and column. So let's go ahead and do that and refresh. You can see that till now, we don't notice any difference. Now, let's turn. And let's find it here. The P4. Now here comes as an all. Other examples that you gave, I want to have that column whenever it's small. So for now. But however, if I have small, you can see that now I don't have these columns beside each other. Now, there you go each other and that's because I said columns small. So whenever I need small, I no longer have this row and columns. However, now that I small and larger, now I can see that they are inside of a row. And you could see that whenever I increase the width of the columns, increase their widths as well. That means that they are responsive to the width of the window. So you can see that here the witnesses are smooth and as we get thoughtless, the width gets larger as well. So that's how we created this row that contains three columns. Let's go ahead and try another example. So let's say I have two rules. So now I don't have only one rule, but two rows. And I'll paste that here. And let's say in the first row I have only two columns. And let's give them a column. So column for all viewports, for all this, not only from small and large group. And let's give that a three columns. And let's go ahead and see what would that give us? Students refresh? And so you can see that now at the first row, I have two columns and the second row I have three columns. Now, that wouldn't have, would have been different if I didn't have that container. Let's go ahead and try and remove that container actually, just to see how different that would be. So now you can see that my table is not as it was. So now it takes the width of the whole page. However, if I add this, sent a container, sorry, it's going to center it at the page. So you can see that now it's contained in my webpage. And you can see that the first row doesn't matter. If they're, both rows have different columns. You could have as many columns as I want at each row that good does not make any difference. It's just going to divide that row equally for the columns that I have. So you can see that if I have two columns is going to divide that row into two columns. If I have three, it's going to divide it by three portions. Now let's say I don't want it to divide it equally. So maybe I want the, let's say column 2 to be wider than column 1 and column 3. So how would I do that? Well now I kids, but now we could start, see how we could specify the rows and the columns. So let's see, I don't want it to be so small first. Okay, so in Bootstrap, columns have a division of 12 bucks. So, so here for example, each row has 12 divisions. And if you don't specify how much, how many divisions do we want for each column. Bootstrap is going to divide these divisions equally to each column. So for example, in the first row, we have two columns and we have 12 divisions that are divided equally between these two columns. So here we have six divisions, then here we have six divisions. Similarly, and the second row, we have three columns and 12 divisions. So in each column we have four divisions. So for divisions plus four plus four is going to give us 12 divisions. Now if I want to make one column wider than the other, all I need to do is specify the number of divisions for this column. So maybe I won't call them to have six divisions. So if I have six divisions for column to the other column, sorry, the other divisions are going to be divided equally among the other remaining columns. So here, for example, column 1 and 3 are going to help the remaining six divisions. So 3, 4 here, column 1 and 3, four column 3. So let's go ahead and calm six here and refresh our page. And I can see that column 2 has six dimensions. Column three and column one each has three divisions. So of course we don't we don't have to add on six, maybe I want to be five. However, at five, they're not going to be divided equally among the other. So here we have five columns. You could maybe notice that this column is wider than that. So maybe here we have. So that's five, so maybe that's four, That's two columns. So four plus 26, sorry, so that's fine. So the remaining are actually seven. So seven are divided equally between tests. And that mean you want is four and the other is three, and so on and so forth. So another thing we could do is have a variable with content. So maybe I want that middle to be a variable length depending on the width of the page. So how would we do that? You go ahead and let's create a new rule. Here. What are we doing is, let's go ahead and specify something. So in the second column, I want this column to be having two divisions whenever we are in a large port pupil. So the way you do that is by saying column large too. And I want that say column 2 to have the auto length division medium and sorry, medium width. And the last is going to have the same as the first one. So here, column large too. And we'll repeat the process for this one. However, let's go ahead and change something in the second group. So maybe let's just go ahead and remove that college, sorry, column large two. And let's see what would that kips. So as you can see, the second row differs from the third row. So why is that? Well, if we go back to our original file, well, the only difference that we have between these two roles is that column large too. So what we're saying here is that if the column is in a window that is off large of a large window that I wanted to have a column 2. And that's what is happening queue now we're in a large window. So here what this column is going to take is two divisions. So here column 1 has two divisions. And we have, this is by auto. So first we'll see called three and this is going to be my auto. So column three is two also. So this is two divisions and this is two divisions and this is an which we know in the set and the third row. So what we're saying here is that I want this to be a column in that row. And this would take the whole space of the remaining space. So here I have column large too. So wherever I am a wide window, I get this two divisions for column three. And this is by OTO. So medium, starting from medium and high, this is going to be auto. And this would take the whole division. So although usually means one division. So here, this is one division each, here and here, one and here we have 2. So this should be a nine divisions. So if you don't specify how many divisions you want for a column, it will take the whole remaining divisions. So now if we go ahead and maybe just replace that column or shoe, you'll see that it's going to change. Now, they are saying, Let's go ahead and just do one more thing to truly lead to us. And let's try just to make our 12 smaller, just to see what would happen. So here, if we make it smaller, now it's no longer large. So you can see that now that column one doesn't take two divisions only seen for column three. And here is the minimum width of the window. So that's how we are varying the length of our columns and rows depending on the viewport, depending on what we actually want. We could also use something that's called Row columns. So let's say I have maybe four columns inside of a row. However, I want to split this row into two sub rows. So the way I do that is I just say row calls. So calls, and let's say I want two columns per cell grow. And let's go ahead and remove call to call. And that's a fourth column here. So column 4. And let's go ahead and see what would that give us? Could you see now, although I have one row, however, this one row is now has two sub rows. So this is a more responsive class to quickly set the number of columns that best render the content and the layout. So that this is different from just saying coal, because coal just applies the individual columns. The row, column classes, on the contrary are set on the parent true as the short run. So row columns would give you the columns in a row, specified number of rows. So here we said we want to pair ropes here up to, let's maybe go ahead and change that to three. So 13 columns per row and see what would that give us? So now you can see that I have here three columns and the second row, I only have one column, which is actually the remaining column. We could also try O2. So let's see what would that give us? Let's go ahead and refresh. So auto is going to give us these columns in their natural width. So this is not true with my column. So it gives me these columns and that same row. We could also have them fit all together. So here we have full. So let's say we change that four. Let's see what that gives us. You can see that now all four columns are on the same row. So we could also fit the rows if they have the same number of columns that we want. We could also specify when would we like to keep them in that way. So maybe I want them to be in that tree, only enlarge windows. So the way to do that is by seeing here on large on, to be four. However, I want two rows, several columns should be maybe too, when I reach medium. So here I'll say y, which we do not want it to be of Division 2. Now if I refresh, it's still the same. However, if I reach medium, you can see that now it has two columns per row. So you can see how our page is becoming responsive to columns and rows. You might think that these columns are rule, are not fused. However, we'll be using that followed. And they are actually used a lot when designing web pages. However, not in that way. They're used to contain information. And they actually help us a lot to make our webpage responsive in a really easy way using Bootstrap. Finally, we have the gutters. So we have horizontal and vertical gutters. So versatile gutters are actually expressed by g x and g x are classes that can be used to control the horizontal culture with this. So the container or container fluid parents may be needed to be adjusted if larger cutter gutters are used to avoid unwanted overflow using a matching pairing utility. So in order to do that, we just go ahead and add in row may be Gx sludge Phi. And now, if we go ahead and refresh our page, you could see that now my widths are the row are larger. And that is to upload some overflow. Or you might not understand quite the concept of cultures now because we're not actually dealing with so much elements. However, it is useful, useful it wrong. So I, I thought I just introduce the element. And if you'd like to explore it more, could go ahead and research more about it. So that's it for this video. 16. Accordion: Bootstrap contains many components that we could use and benefit. And so some of these components could be alerts, batch, buttons, button group called collapse, nav bars, popovers, so on and so forth. So you can see that we have many components, and we only see a few of these. And these components are used to make building the website easier. So instead of going and writing from scratch, maybe let's say a perusal, you can just go ahead and write it, not from scratch using Bootstrap. And you would have a very smooth Kargil on your website, similar to drop down. So instead of going to CSS and writings and she says to have this smooth ongoing drop-down, you can just go ahead and type in some classes that would give you this drop-down. An element that you'd like to use, which is good looking as well, as well as navbar. So sometimes you can spend hours with HTML and CSS to have a good looking network where you can just go ahead and type in some classes used from bootstrap and have a very good looking network in just one minute or two. And so we could have many of these bootstrap classes that will help us to build these components and will receive a few of these components, starting with the accordion. So let's go ahead and see what's an accordion. Just a quick definition. So accordion is going to help us build vertically collapsing elements and while building. So you'll see, and you'll have a better view of what we mean by accordion. So let's get started. So first we have this accordion file that we'll be using. And of course we added the link of the bootstrap script type. So the link tag and script tags are available. And now we can start to write our HTML code in order to get this accordion. So the first thing we need to do is to have somehow I continue that it's going to hold all our accorded for items and so forth. Let's go ahead and create a div u. Let's call it accordion. Not call it, give it a class, the coccygeal, the order for Bootstrap. We know that now we want to have an accordion. And now let's give it an ID. Maybe an accordion example, maybe for a country. So here is where I'll be writing code by a corporate items. So let's go ahead and write our first accordion item. So div dot Korean. And now here is where I'll be writing all the stuff related to my first accordion item. Now, any equity item has two main things and accorded header than an accordion body. So go ahead and start with the accordion hadn't. So we'll be running the Korean header H2. So h2 dot a core header. And let's give it an ID of heading 1. So sorry, that doesn't give it an ID of heading one. Now, inside of that each two, Let's create a button. And let's give this button name or class, which is an accordion. But so this is a special button for the accordion elements that we'll be using. And we'll see how that is going to turn out. Let's give a type of button. So let's button. And now I want, whenever I click on this one and to Tokyo some data. And in order to know what data I want to toggle, I'll be writing AD data. Yes, toggle. And I'll give it a name that I'll be referring to the next column. And so they have BS total is going to say that I want to collapse these items now the target, sorry, so that our good is, we're sorry, I'm writing the name of the data that I'll be referring to. So here, data VS targets is what I'm referring to. Let's give you an IV maybe of hashtag core. Here. One baby. So here, accordion, one. Now inside of the balloon. Let's give it a name. Accordion item. So a quirky. I am. Maybe let's see number 1. So now we run in our accordion headroom. Let's go ahead and write our body. Now in order to write our body, before writing our body, we need to contain this body inside of a div, which is a collapsed it. So I don't want this to appear on less, I click on that button. So somehow I want to relate that div to that, that Delta Ts target and the data toggle. So as word and creative and will be giving that div, a class which is according collapse. So according to collapse and the beginning it another name which is collapse. So it is collapse and a special case of collapses, the accordion collapsed. And we'll give it another name which is shown in order to show that thing that we are going to contain inside of it. And that's given in ID. And this ID is going to be the same ID of that data. Target that we've driven. So here the idea is going to be accordion one. And so you can see that here the data BS started was renewed hashtag. And that's because this is an ID. And by nature, IDs have a hashtag. So it's as if targeting the id accordion one. Now, let's go ahead and write our accordion body, which is going to be contained inside of this. And so the call Gn body. So dash Bye. I'm inside of it. Let's maybe write something inside of strong, learn. Ten minute. So here are some Jewish words that we've written. So here is my first item, accordion item. Let's go ahead and copy that and do that three times. So here we'll be having 32, and here I'll be having three. Now here I want to change that Not according one, but three. So we need to distinguish between these targets you don't have, we don't want them to have the same name. So according to by nature, this has to be same names too. And this is going to be, sorry, this is going to be so here, 31 more thing. So here you can see that we've added that ID, Act, that sense we're accordion. Now, we need to use it here. So the way we'll be using it is that inside of each accordion, let's say item or collapse, I'll be referring to that parent of this collapse. And we'll be doing that by seeing data BS parent. So the parent of that item is going to be that hashtag. Ok, and let's go ahead and copy that and add it here and here. And let's go ahead and see. Now, what would that give us? Here is accordion item one, item two, item three, radical. This thing, we already see the results. Now, I think I'm just misspelled accordion. So according to the no, sorry for that. Soon as it's changed quickly. So here is a quote. So it doesn't matter. So this is an ID. So let's just teach it in the classes. So here with an own as well. And lastly over here, 0, 0, and 0 here. So I think that suits. Let's go ahead and check if the other I don't think so. As I said in the ID, doesn't matter because I these are for our for us to us to change them. Yeah, that's it. Now, you can see that we've got the accordion, which has three items. If we click on one, you can see that now we've got the receipt, the body of this accordion item. If I click on that, you can see that now I got the body of the accordion item 2. If I click on that, I got the according island of this. So you can see that a Koreans are actually useful. If we were to write that using a challenge to assess, we probably would have written a lot of more code. So you can see that by just writing some Bootstrap classes, we've been able to write this Lovely accordion item. 17. Alert & Badges: Now let's move on to see what our alert and patches. So let's go ahead and start with creating thirds alerts. So creating alerts spin mode using Bootstrap is actually pretty simple. So the way we'll be doing that is by adding perspective, of course. And let's give it a class of alert. And, um, let's say I want this other to have a color. So maybe I wanted to have a red color, so maybe I want an alert of error to come out. And so I want the color to be dangerous. So other danger, which stands for read. And what I need to add to that is our role. So I want this to act as a alert. So here I wanted to, I wanted this, they have to have a road of another. So let's say I want to instill to that other or try again, media. Try again. And then save that. So you can see that we have this box over here which is in red, which has a slightly light red color in the background. And this red color, which is more bold and for the text and which says a retry again. Now let's go ahead and try that on the front colors. So let's try it on actually all the colors. So let's change the colors to maybe primary. Here. We have warning. We have, let's say in foo, dark success. So here in food or success, success stands for green pricing. Okay, So we have, let's add just one more for secondary. So here you can do I think these colors, we can actually add also light. So let's add light. And that's it. Let's just know is here. And now, if we go ahead and refresh our page, you can see well, that's actually includes light. Yeah. What? We can see it that much. You can see that we have these different alerts that have the primary, neither prime color, the color that we've specified as a light color in the background and in the front is actually pretty bold. So that's how we can, we are actually differentiating between alerts and other normal boxes. So instead of creating a box and then having a background color and then giving the front color. All we are doing is just writing this. Alert, alert role inside of that element, inside of that div. Now we could actually add one thing which is an alert link. So inside of that class, inside of that alert, or I can do is maybe I want the user to go to something else. Remember I have an alert. So I'll add an anchor which has a reference. Let's say No, let's give it now hashtag, nothing. And we'll be getting it a class which is called a, an alert like. So it is actually related to that alert that you're using. And let's give it maybe an example. Please return to homepage, maybe turn to homepage. So now if we go ahead and check, you can see that we have this link over here. So if we click now nothing happens, but if we add, actually added some real reference to this link would go to something else. So this link is specifically for the alert. So this is an alert. You can also add some additional content to this alert by adding an alert heading. So go ahead to you and let's see, I want to add some more blue to that. So maybe at the warnings. So that's a huge success. And let's say, Well don't. So if it was green, then success, we have succeeded doing whatever we're too. So what, what are we doing now is adding. So let's make this the heading actually. Let's start it in a stage 4 heading. And let's see if this each for a class which is obviously a heading alert telling. So alert, sorry. So another tank. And of course as go ahead and move that inside of the speech for. So this is the H4. Now, let's add maybe some information about that. So actually, let's see, does the body, so Lauren 10. And now let's maybe a horizontal line, and let's add something else. So Laura as well. So we've added this heading, this alert heading. And wherever we write afterwards is, let's say the body must actually some more information over here. So Laura, maybe five. Okay. So now if we go to page and fresh, you can see that now my my alert is actually bigger where we have a heading and we have this body that we wrote. So we could actually do several things with our alerts. And an additional thing is maybe I want this to be gone forever, I get it. So wherever you get an alert, you don't want juice. Just keep on saying that a literature. And in order to do that, we're going to dismiss that alert by adding an alert, dismissal. So maybe let's say I want for this to have an alert. This. And so I wanted to fade whenever I click on it. However, now, at the meantime, I wanted to show. So Bootstrap is going to understand what you mean by these. So these are keywords that we have to add whenever we want to have a dismissal and alert. We actually have to have a budget for that too. So let's go ahead and add a button. Sorry. Of course, will give you a movie giving it a type of. So here, type button models. So you can read giving it a class of button close now will, will cause a Rayleigh. Talk about buttons and more specifically that are found in Bootstrap. More test quickly in the next videos. But for now let's just use it. So this is about enclosed, which is going to indicate for us that we're going to close him whenever we click on that button. However, what are we going to be closing while we have to have a data target? So always remember, whenever we have a close a collapse, probably need to have a target to knowledge, you know, what are we going to close? What are we going to collapse? And so here I want to collapse that alert, that class alert that we have you. That's it. So now if you go ahead and refresh our page, so you can see that we have this x right here. So now if you go ahead and click on that, I think I misspelled something, something right here too. So this miscible, so sorry for that. So this is going to be a dismissible one. Now if we go ahead and refresh, so you can see that it's over here. If I click on it, it's still not working. Why is that? Yeah. So it's five. I need to write here. Dismissed. So since I want to dismiss, so I need to replace target dismiss in order to know that I want to dismiss this alert. So because this is an dismissible yellow circle that so now it should be working. You could see that as I click on X, it closes. Okay? So you can see that we've worked on several things with alerts, how to have this body, this heading, how to remove or dismiss alerts. Let's go ahead and now talk about batches. Badges are quite a different topic, but it's similar and writing. So let's say, I want to have, let's see, heading with a badge in front of it. So what I mean by that, Let's say I have an H2 and let's give it an example heading. Let's go ahead and give this a span which has a class which is a batch. So bulge and we want to give this batch a background color. So let's give it a background color of maybe danger. Planets. See. You. Let's go ahead and refresh to see what does that give us. So you can see that the badge is like a box with a background color and some text inside of it. We could actually have that in different sizes. So maybe if I go ahead and, and, and so that's an H2. Let's go and add it in an H1 and H2. H3 is for each, for each six. So if we change that to three, to four, that 56 and similar to that here. So 3456. And we go ahead and refresh. So you can see that we have batches of different size. Now, of course, that's to say that that's just a basic facts. So we could do many things with badges. And one of them is maybe just have this countered to maybe indicate, let's say this is a notification badge, so we want to indicate how many justifications to have. So let's go ahead and try to do that. So maybe I have this button. So sorry for that button. What is that giving? Me know, okay. So button and of course as we would at Type button and maybe a class of button, button primary. So bottom primary is just indicating the color of the water that I want. Let's skip inside of that button. Expand. I want this part to indicate maybe how many depletion. So I want that say deviate, and let's give it a class of batch. So I wanted to be as fetch. Maybe I want the background to be secondary. So now let's go ahead and see how that turns out. Fresh from left to right through them and fission. So here beside actually span, I want to write multiplication multiplications. Now. We go ahead and see if you can see that now we have this button that has this on the patient and the counter. How many ratifications do we have? We could also have many background color, so it doesn't have to be Canterbury. So let's go ahead and just try seeing these. Maybe I wanted to be a background of danger. Maybe I want this to have a background of infill. And maybe I don't want to be like a buck side on to be rounded. So rounded, the whole family like a pool. So you can see that we could change the patch as much as we want and the actual symbols so we could use whatever we've learned previously and added to newly, newly things that we're actually learning new components. So here the batch is a component that will be, it will be, sorry, we are using or new components that we are learning. So badge component, as I said. And we're utilizing this background that worked, talked about in a different section around the bowl, so on so forth, were utilizing these in our components and that's what we'll be doing in all of the components that we see. So we've seen the pages, we've seen the alerts, will be seeing more in the next week. 18. Buttons: Now let's go ahead and talk about buttons and buttons group. So it actually seem buttons previously when we were writing and alerts in accordions, so on support. But let's go ahead and just see them more generally. So whenever we want to have a battery using Bootstrap, instead of just tokenizing or making, styling this button in CSS, we could just, if this bottom our class firstly, give it a type. So the type does not affect us. What we, what we care about is the class. So I want this class to have a button. So this is abrogation that Bootstrap uses whenever we want to use a button. And let's give it maybe a color of primary. So here button primary and just say primary. So now this is actually the basic way to create a button and started using Bootstrap. Let's go ahead and just see all the colors just to see how they would all look. Susie Canterbury in foo, warning. See if actually by now you should have memorized all of the colors. So success, we have light, dark, light, dark, light dark. So if we go ahead and just see them, you can see that we have these buttons that have these colored. And what's cool about that is that whenever you click on it or you hover over it, it's color changes a bit, it becomes a little bit darker. And if you were to do that using assurances as you'd actually need to write a bunch of code want to hover over. And one where you don't hover over, it's just using Bootstrap. You just actually giving us this button, a class which is button and giving it a color and boots. I was going to do that for you. It's going to make that color change whenever you hover over it. Now, we could also have outlined buttons. So let's see what do you mean by that? So let's go ahead and copy those. Let's have a BreakLine. And actually to and that's just the pattern. And what outline's going to do is it's going to give that color whenever we hover above it. So it's actually somehow opposite to that. And you'll see a DVT. What do we mean by that in a moment? Suggests, let's add that outline to all our colors of that button. So here and here. And here. And here. So now if you know ahead and fresh. So you can see that now I have these buttons that have the outline color. So here you can see that only the border outline as colored and of course the word here as well. It's the border scholars agree. And this is a little like news on and so forth. Now, whenever I hover over, that text changes to white and all of that background color of that border, not only the edges are blue and similar. Here you can see that the text was wearing whenever I hover over it. It's yeah, sorry, what? Here as well. However here you can see that whenever we hover over it, the text is actually black. And we could change that. That's not an issue. You need to see text white. If you don't want it to be dark as well, you see that the warning and then foo have the text as black when I hover over them. And by default over here. And you can see that the black, obviously it won't just due to plaque, we won't see the texts so it changes to it. So these are the outlines. We can also have them in different sizes. So maybe I want this to have large, to be large, sorry. So I have to do is just say button Lodge. And maybe I want this to be small. So Tear button smooth as M stands for small. So it's actually pretty simple. You see that fresh pizza that is large, this is small and these are by the full, the full sizes. What do we also actually want to do with my room? So maybe I want to have a disabled state. So in order to have the sales team well, all I have to do is just add. So maybe this I wanted to be disabled. So I had to do says that this is abled beside these attributes. So this is a type attribute, this is a class and a space for the student. So now if we had a fresh, you can see that now I no longer can click on the button, or I'll see if I click, you can see that the pointer just this blue appear so that these aren't clicking over here. I cannot click through by default. This is disabled dwells. So yeah, you see that we added this disabled here. However, you can just add it as an attribute in a class. And that would work just the same. So here I'm giving that but in a disabled attribute. And now if I go ahead and refresh, you'll see that now it's disabled. So instead of writings able as an attribute, beside type and class, I'm just adding it in the class as a clustering. So Bootstrap will understand that. What you mean by that is that I want this to be disabled. Now maybe I want to have to block 2, sorry, patterns that are blocks that are below each other. So we've actually seen some of that when we seen the layouts. So I'd give out, I'll put these two buttons and our div, which is display grid. So I wanted to get triggered and I want a gap of two between them, between these two proteins. And let's go ahead and add these two parents. Let's just actually copy these. I've actually didn't change the primary. So by default that stark, that slide. So you know these. So let's just change it here. So that slide and that is dark. So what would that give us? Let's go ahead and see secrecy that now the buttons blocks, they take the width of the whole elements that are contained within, which is the body, which is the whole width of the window. And you can see that whenever we hover over them, the color on client changes. So that's if we want to ask blog. So maybe we want these grids, grid display buttons to be displayed as flux will never win on a large screen actually be split as this much large one ever been on a small screen. So we could do that is just by adding here a display at medium and larger to be blocked and smaller than displaying that grid. So now if we go ahead and refresh our page, we'll see that now it is seen as a blog. If we try to be smaller than medium, you can see that now it is displayed as a great. So here this is a flock and here it's either group. So that's for changing with tweens place. We could also specify, instead of adding that, we can just specify how many columns do we want? So here maybe let's go ahead and copy that. I wanted to be of gap to on-grid. However, I want the column to be six, so I'm specifying how many columns do I want? And as you know, we have a maximum trough calls per element. And I want it to be centered on the middle. Let's go ahead and see how that goes out. So here we have these two, they are centered at the model. We have a column of six for each. So you can see that if that sex and Holland it was 12. So here six, here are three, and here are three. And that would sum up to 12. So you see that which could change how we display these buttons models. Maybe we want them to be displayed at the end. So let's go ahead and see how we do that. So let's just go ahead and copy that here. And what will be changing here is the that I wanted to be displayed from medium and larger as a flux. So here the Indian and larger that stay on HIV flux. I want to justify the content. So justify content from starting from medium to be at the end. So I want from the mean, starting from the medium, I want that speed to be flux. And since the displays flux, I could actually work with the justify-content thing to be displayed at the end. Let's go ahead and see how that goes. So fresh. Can see that now we have these buttons displayed at D because they are of a flex display time starting from Egypt, of course. Now if we go ahead and first you can see that here are the buttons because whenever smaller than medium, they are, they take that liquid. So here you can see that they are here. Now. They are the same as those. Harvard is, the columns did not change. They have the same column which is six, which is half the width of the page, 63 and three. So that's it for buttons. Now we'll be moving on to see what our button groups. Let's go ahead and have this break. Maybe ten. So ten bricks and see what we mean by button group. So maybe I want to have three buttons are our beside each other and not just beside each other, just as, as a group. And the way to do that is first by adding a class which is called btn group to group these buttons. And I want the role of group type. So here I want the rule to be blue. And let's add three buttons. So let's just open it reference. And of course, a semi-solid and see what would that give us? So you can see that we have these three buttons there are grouped together inside of one huge button or maybe one huge did that accidentally. So that's just a basic example where we wrap a series of buttons with this button and Patreon group. Now, we can also toggle with the, with the roles of these. So maybe I want one of them to be active at a time. So whenever I click on this, this is the active one way to do that. So basically we'll just give it an actor. Now if we go ahead and refresh. So let's just change the colors to be of the same color just to see the difference zooming in that primary full of them. So copy, paste, paste, paste, unsafe and fresh. So now you can see that it's more clear. So you can see that this is the act of pollen to see and whatever hover over the others, they are almost reactive. And now, of course, these activities from work more, work actively more whenever we are working with the back-end. So whenever I click on this and the background of my worksite, I'll change this to be active. We could actually have a course on that later on to see how we could change this using back-end tools like NodeJS for example. So also, you could have mixed styles, as we've seen. So we can just have three different colors we've seen though. I mean, I guess that's it. We could also have the outline to be primary. So here, for example, I want the outline. So let's have this three. Let's actually copy that and then just add the outline. Copied that. So here, here and here, just to see how that goes. So now if I go ahead to my page first, you see that this is actually a cooler. Now, whenever I hover over something and just tightens, it's actually more cooler than just having them to become adapted darker color. So maybe you want these logs whenever we click on them, to just act as a check box. When I right-click on this, work is going to remain that color. So let's see how to do that. First. Let's go ahead and create a div, so div dot. And of course we'll give it a button group plus. And let's give it also obviously a role of group in order to group them. There. Now, let's go ahead and inside of that dealt, see what will happen. So let's go, let's go ahead and add that input. And that input is going to be of type checkbox. So check box. And let's give it a class of balance, chat. Button check. And I'll idea of maybe C1, so id c, one. And let's also give it an auto complete off. So that's for the inputs. Now let's give that a label. So label four watts. So I want this label to be for C1, which is the ID of that input. And let's give it a class of model then, but an outline primary. And I guess that's, you know, let's also inside of that label, what we call a checkbox. Checkbox one. Let's go ahead and copy that for more too. So like that. And let's say chatbox three. And that is two. And that is one. Means gave with the unstable, which is for this input. And whenever we clock tick, sorry, on the input, and it's going to act as a checkbox and that color is going to be checked. Go ahead and see how that would work. Let's go ahead and sell page. So you can see that we have these three checkbox run ships books to check books three. And if I click on one of them as two full, we've made that first one to be checked. So yeah. I guess what's happening? I'm not sure if that's the reason. So just wanted to see. So area label. Sometimes you need to add some stuff scene. So that's the reason maybe it's not a true service. Actually I figured out why. So we added the same ID for all of these. So, so we have to change the ID or else whenever we click, it's going to take us through to C1. So here, C2. So now it actually should work. For frequency two. It's going to click on C2, C3. You see that now C3 is checked. Check now C2s not. Now all three are checked. So you can see that we could check wherever burn that we have. So we could also have a radio. So let's see. Let's change the title radio instead of having a checkbox. Radio. Radio, and radio. I guess that's fit. So there's one more thing. We need to add, just a name, which is battery. Do not need to know that this is iridium and we want only one to be checked at a time. So yeah. And let's just put this to be checked by default. So now let's go ahead and fresh. So you can see that now by default my first check boxes checked. We might want to change that radio. Just noted for you not to be confused. So radio, radio to radio three. So okay, now, now if I click on Jeju, you can see that now only that second radio, Glickman or check, if I click on the U3 only the third one is true. So you've seen how to sorry, you've seen how to do that with checkboxes, with re-use, how to hook them. We could also change the sizes of these the same and we change the sizes of these. So it's actually very simple. So here, whenever I write, but you group by just saying button, group than large. So that's about it. I guess that's it. So let's go ahead and save that. And maybe we want, maybe sometimes you want them to be vertical, so we just say button, group, vertical. So far to go. So you can see that the first group, but in group has been increased in size. This is large DC that second one has been vertical. Because we've added that vertical. To our bottom. We see the sizing, we've seen how to make them vertical. We could also have things nested within each other by using drop-downs. Not really having us section just forgot downs, but just to give you an idea, let's go ahead and write one. So let's say we have this button group that has two inputs. So let's just copy that and close that. So we have this button group which has two. And I want the third one to be an asteroid, want to hear a laptop actually copied up. So I want another group to me within my group. So the class watching group, which has a rule of group, Let's remove that workbook. So on. I don't want them to be vertical here nor here. Now let's go ahead and close that tag. So div. So now inside of that newly nested button group with first, go ahead and create a new button. And that's give it a class of button, button primary. I wanted to be a drop-down total. So I'll write drop-down that struggle in order to target whatever I want to be seen. And as I said, we'll be seeing drop-downs more specifically. Next video in a later video set, the type is button from, sorry for that. So butter. So I want the later VS toggle to be a drop them. Here. I wanted to be a dropdown. And now inside of that button, let's go ahead and write, drop them. Now all I need to do is add an unordered list. And I'll be giving this unordered list or class of drop-down menu. So drop-down menu, all just a list item that there's maybe an anchor which has this kind of class of dropdown item, drop-down item. And maybe it does give it dropped down to drop down one. And I'll just go ahead and copy that and valid here. And let's change that to and now you go ahead. You can see that we have dropped down one, dropped down to inside of this group. So we have a group within a group. So that's it for this video. 19. Cards: Now let's go ahead and see how we could use cards using Bootstrap. So generally, guards might include an image and we know that the image we are going to be writing something regarding that image, for example. So maybe a title for that image and some information about it. Doesn't have to be an image, could have just a simple text within a call, a title, maybe a subtitle, and a body. So we'll be seeing many kinds of cards, met, many, multiple. And we'll start with the one that includes an image. So let's go ahead and see how we could do that. So the first thing we need to do is go ahead and create a div and give it a class called card. And let's go ahead and give it a style. Because we'll be adding for the first part a image. So let's just fix this, the width. So maybe let's give it a width of 20 gram. So RAM is just the unit. You could choose whatever you want, maybe pixels, okay, or percent. So I'll choose 20 run. And now, of course, now obviously we will need to write is inside of that card. But go ahead and add an image. You have it. Let's add the source. So I have an image here called a3 dot JPEG. And let's give it a class of card image, so called image and top. So top is going to say that I want this image to be at the top of my card. And you could add an alternative. If you don't have an image, Let's see image and close that. Now, we looked at image. I want to have the card body. So let's go ahead and create a div who called body. And inside of that chord worry, I'll have a title called title. So let's say this is the title. And below it, Let's add a p, which has a class which is the card text, so called text. Let's go ahead and add something. Lauren, tell me read. And then below it, I'll add maybe and link a link that take them somewhere. So we need, in order to have a link, we need to have an anchor. And let's put it hashtag till now, meaning that you don't want to go anywhere. And then the class is a button. So I wanted, I want this link should be of a button type and let's give it a color of primary. And let's go ahead and close that and say Click here, maybe the queue to get more images or just more images. And let's go ahead and close this. Okay? Now if we go ahead and see what would that give us? You can see that this is the image that we included. This is the title and the text that we've added. And here is like a link that will take us to maybe see more images. But now, of course it won't do anything. So that's one example of a CT. Another example is just having a card body without the images. So let's go ahead and add that. So here below that. So that's a core. Let's go ahead and add a new chord. So again, div dot card. Let's not have a width now. So Let's just keep it as this and let's give it a class of card body. Maybe I don't want to try to, so just a cold body. And Lauren, tell me, let's go ahead and see how that turned out. So refresh. You can see that I have this card and it says that a car has always a border that is around the thing that embodies it. Now you can see that here the border is wide as the width of the page. However, here the border is a 20 gram, which is the size or the width that we've specified. Now maybe I would like to have this card at the center of the page. So it's actually pretty easy. Just go ahead and beside car, just say I'm X0 to X. And that's how we usually did that when we were talking in the layout. So now you can see that we actually utilizing stuff that we've learned. So you can see that now the card is in the middle. You could have some space between them. So in order to do that, we could say bottom is five. And here I'm tau. So here it's fine. That way this would have a margin of five from the top and this would have a margin of five from the bottom and we have them separated. So this is actually margin of 10 between them, this 15 and disrupt file. So you can see how we can manipulate how the precisions of components. So we've learned all these equalities, which are the display, the flow layout in order to manipulate these components to move them were replied to move them not only just to learn how to write cards. So you could also have a title and a subtitle. So the title and the subtitle are always inside of the body. So here we just say it's five card from title. And let's see, this is the title, title. And below it we could just add H6. Maybe. Say that this is the card, subtitles hurts dash, subtitle, and now on its citizens, the subtitle. You can have the text may be muted in order to look more presentable. And now let's go ahead and maybe add some links that are included here. So let's just say that this is the text, the cortex. So let's add here PDA called text as we did before. And here Lauren, 10. And below the cortex, let's have two links. And then I don't want them to be like this one. Yeah. I just want them to be a carpooling. And in order to do that, I'll just add a dot called link. And let's give it a hashtag. And let's say that this is link one. Now if we go ahead to our page and refresh, you'll see that now have a title and subtitle and some paragraph text, our text. And there's a link at the bottom of the curve. Of course, we could change the width as repeated without so maybe just add here. Sorry, I'll just copy that. So let's go ahead and style. And here, if you refresh, you can see that our code is now smaller. So you've seen, we've seen how we could have cards with images, without images just a title. It's actually pretty simple. We could also have risked groups within the card. So great list of content in accord with a flush list group. Just see how to do that. So say you have a div and let's give it a card class. And it's just that the style to it and add it here. And now inside of that col, we need, we want to have a list of content. And so firstly, add the unordered list and give it a class of list group and also a list group flush, flush. And so you could see that lists are separated by a dot. So now you can see that this is a class and this is a class. And inside of that unordered list, are we adding the list items? So in order to do that, I'll be adding list item, dot list item, sorry, list-group-item. So this is the list group unordered list. And inside of it, I'll be having the list group. But say either one. And let's go ahead and copy that and just added two times. So I am 2 and item 3. And let's go ahead and see how would that turn out. So now fresh. You can see that now I have this item 1, item 2, and item 3. Now let's just remove that in order to see it alone separately. So I'll remove that. Okay. No rush of ECBC item one, item two, item three. Now let's say I want to have a header at the top. And so in order to do that, all I need to do is add an adjective before my unordered list, which is called the card header, so-called such header. And let's say feature. So here are the feature items and the others are going to be the same. Now, fresh, you can see how the card title header as a bare ground of secondary, which makes it a lot more all minus2 to the card, the items. We could also have a footer, so maybe I don't want this to be at the top. I wanted to be at footer. And the way to do it is by going and adding below the unordered list a div dot card footer. And I'll say that this is the called for now, if you go ahead and refresh our page, we see that now I have this called flutter, which is similar to that top card header, but it's at the bottom. So that's actually it for the card section. 20. Close, Collapse, & Dropdown Buttons: Now let's go ahead and explore close collapse and drop-downs buttons. And we'll start with the clues. So in order to have a close button, the procedure is actually pretty simple. We'll go ahead and create a button. As usual. I'll give it a type of button and I'll give it a class, of course. And that class is going to be a button and Button. Sorry, not a button but a button. Foods. So it is about the button but I'll give it a dash close in order to identify that this is a close button. Now if we go ahead and save that and go to my page, you see that now I have an, a button that is, that has a shape of an x. And so I click it. Something should happen now. For now nothing's going to happen because we don't have something that we want to remove, but we're just creating that button. Now we could also have a proton in a disabled state and we've actually seen how to do that. So you just go ahead and copy that and I'll give it just a disabled state indicating that right now I don't want to remove that thing. So for fresh, see that now I cannot click on the Close button because I have it and disabled. However, Act click on that. Now. You could also have it in different colors. So maybe if you go back to here, Let's give that, I bought in close white and soon would that give us a close white? And let's go ahead and copy that and see the same button. However, on a disabled. And let's just remove that. And let's give him our buy a background color of dark in order to see that button, because it's white and if our pages white, you won't see it. So you can see that now my peaches torque and I have these close buttons, white. They're actually pretty cool. And we'll be seeing how to use these things for different purposes. When we go and talk about nav bars in another section. But for now that is what we see regarding the close ones. Now let's go ahead and see how to use how to deal with collapse buttons. Now, let's say we have a paragraph inside of that paragraph, I have to collapse buttons. Now, how would that? So first we have an, a link and let's have the sling as a button. And it's going to take us to the paragraph that we want. So whenever we click on that link, we will have something appear on our page. So the first thing we need to have is a class, and that class is a button, and let's give it a button primary medium. So button primary. And now we need to add two things. The role, which is the button. Now that doesn't much affect our code, but it's better or safer to write it. And we have that data BS tunnel or data-toggle. We're just going to choose, identify what they are to toggle. So let's say that I want to collapse the data whenever I toggle that button. So I have what we call the action that will just collapse that all this button. The class is a button, button primary, and we are only left with a reference. So what I think we would like to have to appear whenever we click on this and we'll get back to that in a moment. So let's say here, see paragraph media. So whenever we click on that, we'll be seeing in the paragraph. And now let's go ahead and add another button. And we're just going to be actually the same. Just go ahead and copy that. However, will notice that we'll be adding a different reference for that. So whenever I click on that, I'll be seeing something. And whenever I click on that, I'll be seeing a noisy, Let's give it a paragraph one. Paragraph two. I could actually start with having this only one paragraph just to make it easier and then we have multiple collapses. So you've had this paragraph that will be clicking on. And now all I have to do is create a div, which is going to be of class collapse because we'll be referring to that in order to make it appear or disappear whenever we click on that button. And we'll have to give it an ID. Now, what would the IDB? Well, let's just give it a collapse div. And this ID is actually pretty important because we were using it here at the edge reference. So here I'm, I right click on that. I'll be referring to that to collapse Corona and everything that is inside it will be collapsing or not collapsing. Depending on whether we click it when it's appearing or not. And let's go ahead and add maybe a CT and my card body here. So that's a card body and inside of it I'll just add some Lauren 10. And now let's go ahead and see what would that give us? Let's fresh. You can see that now. So nothing is happening. Let's see what. Oh, so I forgot to do that here. So we want the collapse to be included. So I want the cardboard to be included inside of the clubs. So now let's go ahead and refresh our page. So now you can see that nothing appears. If we click on see paragraph, now it appears, remove it, it disappears, appears, and so on, so forth. Now let's say we have multiple buttons and whenever we click on one, we want to see something different. And that is where we will be dealing with multiple targets. So I have this paragraph over here and snap some space. So I have the link which is here. Now let's go ahead and create a button. And let's give it a type of button. Now, let's also take that class of button, button primary. And we actually also lead to things. So have the data be struggled, which is going to tell us to collapse the data that we have when I click on the button and you have the data be as target. And that is going to be the ID of the things that we would call it. Now you can see that when you have a link, we call that thing by four the div by an extra reference. However, if we have a button in order to call it, we have a data BAS target. Let's go ahead now and maybe another one. So let's have three links, one link and two, which are buttons. That will be actually closing the paragraph here. Okay? Now, everything that's going to be inside of a div right now is come to me what really seemed. So now, let's have a row which has three columns. So this is a row and we'll be creating L3 columns. So here I'm Dave.com. And let's go ahead and copy that two times in order to have three columns. So now we have three columns. The first column, I'll go ahead and just copy that. So let's go ahead and copy that here. So in the first column, I have this collapse. And, and we'll give it another name which is called a multi collapse. Because you're having multiple collapses. And the ID is going to be for the first one. So this collapse div, and we'll call it A2. This. Now the second column will be adding actually the same thing. So just copy paste. However, we need to remember something which is the ID. We don't want to have the same ID because each time we'll be calling a difference. So a different ID. So collapsed the 123. And here I'll be calling collapse Div 2. And here are the calling collapsed IP3. And he calling collapsed one. Here, of course, because this is an ID, I need to add that hashtag here and here. Now. I think that's it when we added the multi-color ups. Things. Let's go ahead now and triad, triads. Let's fresh. Now. Let's just add something to the bottom in order not to make it appear like that. So here see paragraph one, paragraph two, secret recipe. So two here and three. Let's go ahead and see if that. Okay, so let's just remove this for now. These two close balance. So where are they? Okay, So here are they. They are. Okay. Now, refresh Seaberg phone. See paragraph to paragraph three. If I remove paragraph to see that now we just remove C bar graph one. If I click it again, it's smooth. The same full paragraph, three. Now there's a reason why we chose. So this is not, it shows these classes the small TI collapse. Well, this first are names that I've created. They don't have, they have nothing to do with Bootstrap. So what I'm doing here is obviously toggle both. So when I click on that, I want both of these to either appear or disappear. And the way to do that is sort of had it having calling an ID of calling a class which is called lot Malta collapse. So in that way, any element that has that class name, because we have a dot here. So this identifies a class. Any element that has this testing too small TI, collapse is going to collapse. So now if you go out and see what happened here, fresh Seaborn, Seaborn to, toggle both. So you can see that whenever we click the other appear or disappear. So that's for the molten droplet collapses. So now let's go ahead and move to the drop-downs. The last kind of fun stuff that you see in this section. So for a drop-down, first thing we do is create a div with a class called drop-down. So that dropdown will be having first button in order to click on it and see that dropdown items. So we'll go ahead and click a button and give it a class of button, maybe buttoned secondary for its color. What else? And of course, we need to have the class name called drop-down toggle in order to have this button toggle between different items or drop-downs. And it will have a type of button. And we need to have a data VS toggle, and sorry, toggle. And toggle is going to be a drop-down. So, and we'll give it an ID of, let's say drop. Now, we've created that button, let's call it a drop-down button, drop-down button. And now below it, I'll have an unordered list which have a, which has a class called the dropdown class. So the drop-down menu. So it has to call drop-down menu in order for Bootstrap to understand which what are we doing. So now we have the stylopod. And inside of that item, I'll have an anchor which is called a drop-down link. And now, I'm sorry, Item functions. So let's give it an H ref of hashtag. And now inside of that, we have in action. Okay, and let's go ahead and copy that and just increment the values to 23. So here actually to an action. So here's three. Now, let's go ahead and see that givers. So we have this drop-down button. If you click on it, we have these three actions that we can talk. Now, the drop-down actually looks real Selye button. Okay. Now let's go ahead and see how F0. So now you can see that the budget looks actually better looking. And we have these three actions that we could toggle through with that drop-down link. And so how did we do that? Well, requests, we included this unordered list inside of that dropdown class, and we're given that unordered list, a drop-down menu. And if given this drop-down toggle, so we understand that this is the button that could be toggling with for this drop-down menu. So actually, we don't actually need this ID anymore because we've included everything in that class. Now if we go ahead and fresh, you could see that everything is working the same. So we could also have this drop-down to be used, not with a bottle, but when Ailey. So if we go ahead and copy that, and instead of having a button, we have a link. So here, drop-down link and we keep everything else the same. But remember the secondary drop-down toggle. So I'm Christine Ross, action scene. And now if we go ahead and refresh our page, you can see that you can also use it with a drop-down link. So it actually works the same. Now we could actually add something within that drop-down menu. And that is having a title of a line, a horizontal line, which is a kind of a divider. So the other horizontal line, which is going to have a className called drop down dividers. So dropdown stash divider. And now I can go ahead and let's give it. But in danger and rash. And you can see that now I have kind of a separator on the divisor, that's divine action one is actually true and to be beside each other and action three, alone. What else do we have? Now read you could also do is maybe the eye from one that was actually only when I click on that arrow. So it should split the world into that arrow alone and that button alone. So the way to do that is by going over here and, and removing drop down and saying that I want a button group because we'd be having two buttons. So what's the first button? The first button is going to be exactly the bottom below. However, what are the changing is that I don't want this toggle. I don't want this, I just want that className. And here I'll just remove that. So that's the button which is right over here. And you can imagine that dot over here is that part which is right here and that alone. Now, all I need to do is add also here a class called drop-down. However, toggle, and then that split. Let's see that. We've added those. Let's go ahead and see what would that give us. So fresh. So you can see that now I have this further and that's going to give us this. And that is the initial volume, but it's actually pretty large. Let's fix that. The way you do that is by adding style with sorry, width. So here is the width I want it to be, to be fit content naming. So now if I refresh it, see here is that drop-down link or for everyone to call it, and here is the button. Now of course we could change the sizing of these ones. So maybe here I wanted to be a smooth buttons or a large one. And so maybe here, Let's say I have a button large. And of course here as well. The button large. And maybe here I want you to be a button small. So now if I go ahead to my page and refresh, you can see that this is a large button and this is actually small button. So one last thing, if you want to choose the background from white to something else, maybe door, you could just simply say maybe here, drop-down. Here. I'll have a drop-down menu and dark. So that would give me the dark background here. Prevalence rationale, I like click on that folder property. So that's the menu for this. So you can see that the background color is dark. So that's it for close collapse and drove down buttons. 21. Navbars: Now let's go ahead and move to the next topic which is about net force. So in order to have enough board, the first thing we need is a nafta, and we'll give it a class which is a four. And we want this network to expand when it's a large screen. So add enough for expand and large. That's have a background color of light. And so lists bg light. And let's also give the navbar light. So here now for light, we see what? Micah. Okay, so now that we've created the nav tag, we need to have the all of the items inside of them. Now, in order to contain these elements, will add them in a container fluid that we've talked about before. So here, container fluid, which is going to contain all our elements inside of that nav here. So it's actually inside of that div, but that is actually inside of that nav. So it would contain are actually inside of that. Now. Now, the first thing we'd like to have one, we have a mapper, is to have a navbar brand. So an upper branch is usually represented by adding an anchor, so a class and giving it a class of navbar brand. So sometimes you'll see an F4 and this logo over here. So this logo is actually that breath. Now, let's give it a hashtag reference, and let's give it a name, brand. So this is the, sorry bad. Now we know that we'll have a button and that button is going to. So let's go ahead and write it first. So we'll give it a class of navbar toner. So this button is going to toggle and we will see what I mean by that in a moment. So popular. What else? So we were in the brand and let's give it a type. So type, of course. But then whenever we have a network juggler or anything that has an algorithmic, we'd like to have it, the data BAS, target and a data via stock. So the total is going to be a collapse. And so we'll see what do we mean by that, as I said in a moment. And data via started is going to be things that we are targeting. So let's keep it empty for now. And we'll add a span, which is a, which has a class called a nav bar toggle item. I can, so an FOR talker, I can now finish that button. We see what does that do? A moment. Now. Below that person will have a div, and that div is going to have the class name. Collapse. So you might imagine what would that represent sooner or collapse. And you'll be giving it an ID of collapse maybe item. So right now, the target of that button is going to be whatever is in that div. So now we know that whenever we click on that, we will need, we want to target whatever is inside of that div. So here I'll be adding color. So we have that. And now in order to represent the items of that networks, like for example, that we need to have an ordered list and that's an unordered list is going to have a className. And that person is going to be a navbar nav. And it's going to be, let's say, centered at the left. And to do so we'll be adding ME auto. So by automatically it's going to be margin to the left. And let's give it a compile of Me Too. And we'll see if we need to add something else. Okay? So now we have an unordered list and we could add our list items. So despite him, in order to refer to that as another item, we need to add it as a className. Spin up item is here. So inside of it, we'll be having a link. So whenever we click on one of these, you wanted to take a summer. So in order to do that, we need to have an anchor, so a dot. And this is going to be what, a nav link. So here, this is an up link and cookie with a hashtag for now, meaning nothing. And let's say this is home. So this first nav item is wrong. And go ahead and copy it and just have another one. So copy paste, baby, we could have one that is a drop-down. So in order to do that, we'll add beside of nav item a drop-down name. And inside the left link will also have a drop-down toggle. So drop down toggle. Let's say here, let's say mu. So home hue. And here is going to be some toddler may be action, and we'll choose between those actions. So we have that drop-down toggle to a task actually to be a button shown. So this item, or just give it a role of foreign actually. So the rule is going to be that role of button. And let's go ahead and close that. We gave it an h reference, a rule, a class that has all the things that we need. We need to also have a Data. Stalin told you I would click on that link. We need to have something. So what do we need to have? We need to have a drop-down. Here. You will be having a drought. And the reference is going to be wherever, wherever we want. Because as long as drop down spin tendons within that list item, we have Notion. Now we've added that asylum and that link. Now we need to add that dropdown. So we'll add an unordered list named drop-down menu. Let's go ahead and add the list items of that unordered list. So inside of that, Steinem be having a class of dropdown item. So drought, dash item. And inside of that list item I'll be having fn curve, which is going to have me, sorry. So the list item is not bad, but think that class item will encourage MSP the ankle. Right? So, okay, so hashtag and let's give it a class of dropdown item. So that's here. Sorry, I forgot. Okay. So we've added the dropdown item and let's give it an E may be action one. Let's go ahead and just copy that and say actually to action three. So here is actually two, here is actually three. So we've added those. We could have a drop-down divider as you've seen earlier. And in order to do that, I'll just sort of that plane a and give it a class of drug down to 50 should drop down. Thus the father. And that's it for that. Now, we also have another list item which could meet stabled levy. So here I'll add a nav link. However I wanted to be disabled. So I'll just add this table here. And that's to have you here. Let's see. So these are the items I want. And now let's go ahead and add a form. And that form is going to be the flex. And we'll see why in a moment. And we don't want an action. So action to be removed. And normally in a form we would have an input. So an input of type, let's say search. So we want to search for something and placeholder maybe. So search, so please folder, search. And we want to have a class for that, which sorry, plus triplet that, which is going to be a form control. So that is one of the features of Bootstrap that haven't talked about. What's going to control the inputs or the looks of these inputs to make them visually more comfortable for the thing that they are in so many, just a margin it away from the element it's contained with. So it's actually going to do the margin stuff for us instead of us actually do them. We've added that type search, that form control. Let's give it a margin-right of two, so make it away from the unordered lists. So imagine like maybe two. And that's it. Let's go ahead and remove those. So you could go ahead and remove those. And of course we need a submit button. So let's go ahead and have a button. So that's a type of lipid that so time of sediments quartiles. So let's give it also looking button. So by adding a class of proteins, but the outline to be primary. So paternal client primary. And let's click on here to hybrid helix on search will be searching for. So let's go ahead and see how that turns out. And so you can see that we have this network right over here. We have the brand. These are the unordered list items that drop-down. Here is the horizontal line is the divider actually that it added in here a search. So these are actually recycled each other and he had that and I actually added. Okay, so I'm at the search another deck class. Let's go ahead and fix that. So we have to add here. So that's now go ahead and refresh. You can see that there is margin right of 2 and search. The background is light as we could see. So you can see that using these Bootstrap elements we've been able to write or to create that network. We could also, let's actually dive into each one is first starting with the brand, so you can see how the brand is bold right over here. So in our code, the brand was written using that link. Now it's not necessarily written using telling quickly. Use another thing which is a heavy. So let's say I have a span and that span is called Brand. And we'll give it a class name. So class, and that class is going to be the same thing, therefore, dash brand, and we'll give it a page one, maybe burden of 0. So let's go ahead and comment this out and see what would that give us. So we can see that now it's actually bolder. And by default you get, notice that the metaphor is at the top of the page. Now we can change that by say for example, that I wanted to be fixed bottom. So here I'll add fixed button. And if I go ahead now and refresh my page, you can see that now excited button at the bottom. Now we usually do that for not nav bars but footers. But I just thought I'd show you that you could also have to be fixed up. So sometimes you will pH is actually quite long and you want it, you want your never to always appear at the top of that page no matter how much you scroll down. And so that's why you choose. Actually not fixed up but sticky top. I think both work, but let's go ahead and work with sticky top. So it's always going to stick at the top of the page. So here, sticky tabs refresh that. And we can't actually see what's happening because we don't have something to scroll down to your butt. Try it whenever you add elements or components to the beach. So actually seen most of what enough wall needs. So we could also have the background to be dark and that would actually look pretty cool. So background dark and go ahead and see that. Now we can see those. So we could add text white. So white. Let's see how that works. We actually need to add for the container fluid navy to see if that with your brush. So no. So I guess we could add them to have to add them actually to everything that contains steps. But that would be Ted us. Anyways. So let's not do that. Now. We've seen how to have a BG of light. And if you want to have a dark, you just have to make the texture you right. Okay. So let's go ahead and press that so you can see that now. One more thing. Let's see, we want to scroll down. You see that now, when we are smaller than large, we actually have this point over here and we have this drop-down. And so that's because we've added this collapsed burden, which is going to appear whenever we are smaller than the large window. And however, you can notice that the brand always sees no matter what. So if we are on a large window or small window, that brand is going to appear over. What's going to disappear is those. And in order to show, to see that, we have to click on that collapsed tabular button that is going to show it. I'm sorry. Present them over here so you have to search the actions and so on, so forth. And you can see that the search takes the horrors of the page. And that is because we've had it that from control, that form control. I'll help us to do that. And as I said, because all of these are inside of that div, we were able to collapse them whenever we click on that button. So that's it for the number. 22. Modals & Popovers: Now let's go ahead and take a look at models and popovers. So a model is whenever you click on something and something pops out of the page. So that's a model. So in order to have one, Let's go ahead and write one. And maybe that will be clearer for you in terms of what is a model on how it works. So that has a class called model. And now we create another class within it, which is called a modal dialog, and which is going to contain everything. Having a pop-over will have the model contents so dot. So you could have dot model conduct or div dot module content doesn't matter. And inside of that module content will have the modal header. So modal header. And inside of that modal header will be having an H2 title. Or maybe it Let's get through each fight. So H5 model title, and let's give it a title of modal. So now we've written them modal title, and that's maybe a button that says close for Christmas. And if see what's how to do that. So but we'll give it a type of button and we'll give it a class, a class of. So here the class is going to be a button close. So not anybody but a button close button. The data, this, now we'll have a neutron which is called a data dismiss. So here we're not toggling, We're dismissing. So we'll read this missing up that model. Now we've added that button and all of these are inside of that div header. So now that we've done with the header file, go ahead and add a modal body. So model, dash body. And let's say we have a program Lorem. And we've done that. We could also have a modal footer. So we added the modal header, modal body announced, go ahead and add a modal footer. So it's actually pretty simple. Let's add maybe two buttons, so capital that however, we don't want them to be close. So here button maybe primary as either primary color and that's the same to that here. And I'll be adding that as well. So those maybe, let's give that. A Green says that says Save changes. So here, Save Changes. And actually let's change that to danger and see. Let's see, don't, don't see. So don't save. Actually that's the whole model. So to go ahead and see how that turns out. One last thing, I forgot to do that. Well, in order to call that model, in order to, for this model to pop out, we need a button. So let's go ahead and just add the final step, which is the button. Now of course it's going to be of type button and brilliant that several times. Now the class C, it's a button and let's give it a person, the primary problem. And it's going to toggle which data is going to toggle? Well, it's going to toggle that model. So I will click on it. It's going to show that model. And the target data, BAS, target is going to be equal to the ID of that model. So we did not give that an ID is go ahead and give that an ID, maybe one. And so the target is going to be hashtag M1. So hashtag among poor that model. Okay, so let's go ahead and save that. Actually, that, yes. So now the threshold pH, Let's get that. But I always forget to eat any. So let's say click on me. Click on V, and let's give it a button large, button, large. And let's go ahead and seal veteran out. So if I click on you, you can see that now I have this model that popped up a page that has this title, this heading, sorry, this body and this footer. And the footer, we have these two runners that we have. Don't see. Save and Smith. You can see as we click on that dismiss button, that model disappears and that's because that volume is a word. It's inside of the model, so that's the burden that we've clicked on. It's a potent close and it's going to dismiss that model. However, this button right here when we click on me, is going to get that model. It's not going to dismiss it. Now we could add some features to that model. So maybe we want it to fade whenever we're clicking on it or removing it. And we want that backdrop to be static. So these are just terms originally, our model, more visually preferable. So data BS, backdrop is going to be static. So these are terms that you could just memorize and use them wherever you'd like. So now brush so you can see how it faded wherever it key. And now also whenever I click on Exit, also faded point, I remove from it. Now let's say the body is actually not just that long. Let's say it's. A 100 words, sorry. So let's fix that. So let's say you have a 100 more words, they won't fit. And that model, so figure and fresh and clip it, see how much bigger it is. So maybe I'd like to do something else which is scroll and an order to do that in my modal dialog. Add modal dialog and dash scrollable. So screw level. Now if I go ahead and rest. So now I think it's a scrollable because we don't have enough that much words because that much no. I don't know. Let's see. So yeah. Around a thousand words and now you can see that it's scrollable because I added that scrollable feature to the dial. So that's all about models. We've seen how we could run a model and it's actually pretty important whenever, let's say you have a signed in click button, it's actually pretty cool to have a model to just say sign-in or whatever, or maybe click for information and you just click and see that model. It's actually pretty cool. Now regarding popovers, depending on your website, you might actually face some difficult the naivety on technical issues in seeing these popovers and enhanced rate. So let's say I have these four buttons which have a DBS of toggle. So we have popovers over for each one. I'll be having that as a button, type button and Button and secondary for each one. And we giving them a data, BS, BS contents. So what is written inside of that popover? And the placement of that popovers show if I click, let's see on this word something above it is going to pop. If I click on this word, something on the right is going to pop, so on and so forth. It seemed for the others. So if you go ahead and see that 200, 100 and fresh and have these four buttons. So if you click NAT, sorry, if we just hover over something, there has to be a popover. Now, as I said, depending on the site, website you have, this might not work, so it's not working for me. But the zoo try it on your website and tell me if it works. So I might need to add a couple of extra links aside from that, but I'm not going to do that. So it's actually pretty simple. You just have to, it's actually pretty simple, simpler than the model. You just have to add a toggle to be a palpable and write whatever you want as an information in the database. Cotton, you don't have to say mentioned where we'd like to have this place it of that input. So that's it for this video. 23. Project: Now let's move on to the most important part of the course, which is the project where you test the knowledge that you have gained throughout the course and implement all of that you've learned. So let's go ahead and explore that project. So for this project, I want you to create a pure Bootstrap website. Now here is an example of a pure Bootstrap upside and you put both, build a similar one or an exact copy of that if you can. And where you have first a nav bar. The one similar to what we've seen. Here is a drop-down. Here is a brand search, search icon. Here are some buttons, the background colors, the colors, how we manipulated them. Here we have chords. So we've also talked about cards and how to include images and how to change the fonts, colors of the fonts. Similar to that here we also have colors. So on support. How to have a percentage of a color and an element. Also how to have these buttons or emperors like that one over here. So footers, so on, so forth. So you don't have to build the exact same copy of that. Um, you could just go oxide that is almost similar to just do an oxide that all of the things that you can do that website, just implement them in your own box side. I'd love to see those different websites that you are going to create. So please just at the Adelaide add a file in the discussion where I could just see What have you done. So I'm actually really looking forward to see what are you going to do with all these skills that you've learned through Bootstrap to build a pure root shock peroxide. So as I said, this website is just purely using Bootstrap. So that's it for the project is actually at a satisfactory, really simple. You just need to implement well what we've learned throughout the course. I just use it and the embolden the site. So good luck.