The Complete Bootstrap Master Class Course - Build 4 Projects! | Joe Parys | Skillshare

The Complete Bootstrap Master Class Course - Build 4 Projects!

Joe Parys, Online Instructor | www.joeparys.com

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
69 Lessons (6h 55m)
    • 1. 0 Bootstrap Master Class Promotional Video

      1:22
    • 2. 1 Course Benefits: An Introduction to Bootstrap and Our Master Class Course!

      2:40
    • 3. 2 REN Bootstrap and jQuery CDN (1)

      7:22
    • 4. 3 Downloading and Installing Bootstrap (1)

      4:35
    • 5. 3.5 Mobile First

      3:50
    • 6. 4 REN How Boostrap Works (1)

      2:09
    • 7. 5 REN Containers (1)

      2:22
    • 8. 6 REN Grid System (1)

      6:17
    • 9. 7 Text Styles (1)

      7:01
    • 10. 8 REN More on Text Styles (1)

      10:11
    • 11. 9 Bootstrap Tables (1)

      7:28
    • 12. 10 Bootstrap Images (1)

      2:20
    • 13. 11 Bootstrap Buttons

      3:55
    • 14. 12 Button Group

      3:39
    • 15. 13 REN DropDown Menu

      6:39
    • 16. 14 Bootstrap Glyphicon

      6:05
    • 17. 15 Jumbotron and page header

      3:02
    • 18. 16 Bootstrap Wells

      1:49
    • 19. 17 Bootstrap Alert

      4:48
    • 20. 18 N REN Bootstrap badges and Labels

      4:18
    • 21. 19 REN Bootstrap Panel

      4:16
    • 22. 20 Collapsible

      5:30
    • 23. 21 Panel Collapsible

      3:07
    • 24. 22 List Group

      8:01
    • 25. 23 Collapsible Group Panel

      12:19
    • 26. 24 Bootstrap Tabs

      5:50
    • 27. 25 Bootstrap Pills

      5:17
    • 28. 26 Bootstrap Dynamic Tabs and Pills

      4:57
    • 29. 27 Bootstrap Pager and Pagination

      5:07
    • 30. 28 Bootstrap Navbar

      9:10
    • 31. 29 Bootstrap Form Layout (1)

      9:39
    • 32. 30 Bootstrap Form Elements (1)

      10:50
    • 33. 31 Bootstrap Form Element 2 (1)

      3:35
    • 34. 32 Bootstrap Form Validation Style (1)

      5:33
    • 35. 33 REN Bootstrap Modals (1)

      6:47
    • 36. 34 Bootstrap Carousel

      10:04
    • 37. 35 Bootstrap Carousel with Caption

      3:10
    • 38. 36 Bootstrap ScrollSpy

      9:49
    • 39. 37 Bootstrap Tooltip

      5:46
    • 40. 38 Bootstrap PopOver

      5:10
    • 41. 39 Creating Navigation And First Section

      9:34
    • 42. 40 Creating My Work Page

      5:43
    • 43. 41 Creating About Area

      8:10
    • 44. 42 Creating Contact Area

      6:19
    • 45. 43 Creating Navbar

      4:15
    • 46. 44 Creating Carousel Slider

      7:21
    • 47. 45 Creating Thumbnails

      6:23
    • 48. 46 Creating Footer

      2:13
    • 49. 47 Creating Modal

      8:25
    • 50. 48 REN Creating Gallery Using LightBox Plugin

      11:02
    • 51. 49 Adding Caption to the LightBox Gallery

      1:51
    • 52. 50 Creating HTML syntax (1)

      3:33
    • 53. 51 Creaing Navbar and Customizing Bootstrap (1)

      8:47
    • 54. 52 Creating Header and Search Bar (1)

      12:37
    • 55. 53 Creating Posts Area (1)

      15:57
    • 56. 54 Creating Footer (1)

      5:07
    • 57. 55 Creating Posts (1)

      4:24
    • 58. 56 Creating About Page (1)

      4:49
    • 59. 57 Creating HTML Syntax and Navbar

      7:24
    • 60. 58 Creating Carousel

      7:56
    • 61. 59 Adding Caption to Carousel

      3:40
    • 62. 60 Creating aside and Product Area

      8:45
    • 63. 61 Recreating the aside Area with New Style

      7:17
    • 64. 62 Creating Product Page

      12:49
    • 65. 63 Creating Related Search Area

      2:39
    • 66. 64 Creating Modal form Form

      5:10
    • 67. 65 Creating Order Form

      5:15
    • 68. 66 Boostrap Conclusion

      0:49
    • 69. Skillshare Feedback Video

      0:47

About This Class

Welcome To The Complete Bootstrap Masterclass - Build 4 Projects

⇉ Watch the promo video to see How You Can Begin Mastering Bootstrap To Build You Next Professional Website Today!

⇉ This Course is MASSIVE! You receive over 7+ hours of video content & 60+ lectures!

⇉ Join Over 100,000+ Students Who Have Enrolled In My Udemy Courses This Year!

⇉ 2500+ Five Star Reviews Shows Students Who Enrolling Are Getting Real Results!

"Complete bootstrap course....well explained.....After searching so many courses in udemy,this course taught me complete bootstrap and it is for beginner to advanced...Thank you very much..." -Pratrap

"This was one of the best courses I've ever joined" -Tariq Alkhassa

__________________________________________________________________________

Learn the basic concepts, tools, and functions that you will need to build beautiful, fully functional, professional landing pages within the bootstrap framework. But that is not all you will learn from enrolling in our course...

You Will Learn:

  • Bootstrap components
  • Grid System
  • Customizing Bootstrap
  • Glyphicon icons
  • So Much More!

This course will help you create a perfect bootstrap responsive landing page for your app, business, portfolio or blog. Having a little knowledge of HTML & CSS is ideal to get you started on the quicker route to Bootstrap, however it isn't essential. I will walk you through every step of code to ensure you have the right understanding and tools to further your learning after you have completed the course.

You will not only create a clean, modern professional looking bootstrap landing page, you will also add scroll spy, animation and Google Webfonts to make sure your website stands our from the crowd. We start by understanding the basics of bootstrap, how it works and how it is implemented. We will cover the famous grid system and media queries to ensure your new page looks it's best on all devices.

You will learn-by-doing which will help you understand all aspects of bootstrap and give you the tools to re-design our template or build an entirely new landing page specifically how you want it. You will be able to download project files throughout the course, which will be yours to keep and work on at your leisure

__________________________________________________________________________

With the right mindset, understanding, and application of the teachings in this course, you will instantly begin to move towards Mastering Bootstrap To Build You Next Professional Websites Today!

When we learn something new, I add it to the course - at no additional cost to you! This is a course that will continue to add more and more to every aspect of your life.

__________________________________________________________________________

What I can't do in this Course..

I can't guarantee your success – this course does take work on your part. But You Can Do It!

I am also not responsible for your actions. You are responsible for 100% of the decisions and actions you make while using this course.

__________________________________________________________________________

This course will not remain this price forever! It's time to take action!

Click the "take this course" button at the top right now!

...every hour you delay is costing you money...

See you in the course!

Sincerely,

Joe Parys & Shahzaib Kamal

Transcripts

1. 0 Bootstrap Master Class Promotional Video : Would you like to build your very own beautiful interactive websites using Bootstrap? Well, then this course is for you. Hi, My name is Joe Paris, and I'm the founder of the Joe Paris Academy. I'm now serving more than 100,000 unique students together. Working with Shazia Kamal, We're gonna take you from the absolute beginner using bootstrap and show you how to build four amazing projects in the framework. We will start by covering all of the basics, show you how to download and install the bootstrap so that you can get started right away. After you learn the basics, you will begin learning how to build four unique projects in bootstrap way. Show you how to create a portfolio. Use professional photos in our photo projects. We show you then how to create a blawg project and even a basic e commerce website project . But that's not all that you gain from enrolling in this course. We believe that the best way to learn is by doing our course is very interactive. It has over seven plus hours of video tutorial, quizzes and specific projects in every section. So what are you waiting for? This offer won't last forever. Go ahead and click that. Take this course now, button and we will see you in the course. Thanks again for enrolling. 2. 1 Course Benefits: An Introduction to Bootstrap and Our Master Class Course! : Hello, everyone. And welcome to the complete bootstrap masterclass course, Build four projects. My name is Joe Paris, and I'm the lead instructor here in this course. But Shazia Kamal is going to teach you everything that you need to know about Bootstrap. And he is an expert web developer. Him and I have actually created multiple courses together. And he's going to show you how to use bootstrap to really enhance your websites to build landing pages and to really, you know, if you have application, you want things to to kind of do Bootstrap is really going to help you with that, and Shah Zee is going to show you exactly how to do that. So what exactly are you going to get out of this course? Well, bootstrap is an html CSS and JavaScript framework. So you're going to be if you have some experience with HTML, CSS and JavaScript, then this course is really going to help you kind of enhance your web developing in a sense and also give you a few more tools in the tool belt to use when it comes to doing your own website or doing parts of the website and we go into these things. Four projects. The first project that we're gonna take you through is a portfolio project. This is great for businesses. If you want to put your name and you know all of that different kind of stuff into a portfolio kind of project, Shazia shows you exactly how to do that. We then have a photo project, and pictures are huge today when it comes to doing things on the Web and so much more. So having pictures is absolutely critical to your success when developing websites, landing pages, aps so much more. We then have a blawg project. So if you're a blogger or you want to update your blog's or even you can use some of these things for your own website if that's interesting to you. We have a whole section here on how to use bootstrap for your blawg, and then we round things off and finish up with an e commerce part and an e commerce is it's an online store. So if you would like sell T shirts or little trinkets or things like that, uh, Shazia shows you how to use bootstrap to really be able to do these awesome things for your website landing pages to sell your products. So these are the things that you're going to learn in our course. And we can't wait to teach into you. So thank you again for enrolling. If you have any questions at any time, feel free to post them. And if you really enjoyed the course, we also really appreciate your positive reviews and thank you so much again for enrolling, and I'll let Shazia take things away and we'll see you in our next lecture. 3. 2 REN Bootstrap and jQuery CDN (1): Hi, everyone. So in this classroom is gonna learn that How do you down the the bootstrap and how to work on it? So, first of all, just open the website of the bootstrap, which is get bootstrapped outcome. You know, we got the website here. You can see that bootstrap is the most popular, actually mobile CSS and Jay's framework for developing responsive in mobile host products on the web. So, by the way, here you can see something like full features one framework and pre processors. They will use the, um, Sassen less, by the way. So I'm just gonna click on the download. Bootstrap. But when I just click on there now, I'm in the paid off download. Bootstrap currently creep buying 3.5. Have a few, has a few easy ways to quickly get started. So there you can see that the bootstrap download bootstrap button, and then there is a cdn. So we learn how to use the Syrian without downloading. So now just simply copy all these lines. OK, The 1st 1 I'm just clearing that. The 1st 1 is the link link tag, which means that it has the bootstrapped at CSS file. And this is a bootstrap Js file. The both filed. We need to copy to run the boots rap and the middle file. The bootstrap team that Minda Js is actually the optional team. You can see there. Well, they won't use this in the course, but I'm just downloading because they're just giving a deveined you download. So just go to be filed. I just opened. I just saved the bootstrap folder. And here the bootstrap folder. Oh, the book they have now they're the next are actually more, which were working for Here is the file. So first of all, just the create the basic HD move. Um, way the basic Centex off their team, you and then the booty tag. All these things are necessary, you know? Then just go to behave tag and inside the hair taggers put the title track first. Okay. And after the title tag, I'm depressing. Interim. There's putting this file here. All these files, the length file dealing, relations style sheets, the both out of link files and the turban in the script file. Now, one thing that this will clear you, that it won't work it specifically the script one rogue. Actually, the bootstrap is okay and the team is Okay. Well, I'm just gonna deleting this team right now, because I'm just I don't think that will use this, by the way. And what is this is quick tag. It has the bootstrap. That window just means some kind of JavaScript files. But the problem is that this file the Minda jeez required the d a query that Js file. Okay, so if you just want to work with the bootstrap Js file, you have to download the boots. Jake weary. But what is the difference between these files and why they placed two files instead of single one? Because there are a lot of actions which actually can be happen on the J Query. For example, the Cody in the collapsible and the other things like that. The animated things which can be only happened in the bootstrap in the jail query, but now we can do in the bootstrap using the Colossus Savini the taquerias. Well, let's go to the brother again. And press interest story click on the plus button and this type of query dot com trust into now and there is going to the G quickly website. Okay, so for the G, quickly, let's just click on the jungle J query. Okay, Jake, weary in school is a really interesting and important sores to develop in trusting what pages. So there is the two top of versions. You can see that bakery 11 point X and jiggly to phonics. I'm just going to the one point X because it has the It is really perfect for me too. By the way, there are two versions in the one pie. Next you can see the download, the compressed production, the inquiry downer, the UN compressed development inquiry. I'm just clicking on the download comprised production Jay Query here. Now, this is the jiggly compressed production which actually has no interns, no line breaks and no space, No extra space, actually. But if I just click on the download the uncompressed and development J quickly now you can see that it has The space is length bricks and actually the beautiful Syntex Looking easy, But definitely we won't do anything inside the Jaqui that James file, so it will be perfect because we're not gonna do any action inside the file. So let's copy this or the better thing is just right. Click on the download The comprised production and this click on save Link. As now we're to take the file that is, go to the gold stripe full or and here this is DJ Inquiry 1.11 point three point Minda Js file So we can cook on the save. The other thing is let us go down. And now you can see that using Jaquilla with a cdn if you just remember that here these are the Syrians off the bootstrap, the Max Syrian, that bootstrap city. And you can see that. Okay, so here in this class, I'm again doing the same thing. I'm just copying this one, Okay? The script tag off the boots wrapped with the Syrian here. I'm just simply copying this and pasting there, here with with in terms just before the boots wrapped me in the jays. Okay, this is really important to put the jaquilla file before the boots wrap That mean that Js file? So now we just apply the bootstrap completely. The last thing about applying the bootstraps in Europe aid is that this these father not necessary on Manny things are many actually features of the bootstrap, but in some features, these are really important. But for the most of features of the bootstrap, we don't need to apply the boots for the bakery file and the bootstrap Js file. By the way, this is the time to test that we to supply the bootstrap perfectly well known from this typing Dave hair Okay, it inside the defenders typing Hello or I'm just putting the h one tag and hand is typing Hello, saving and just double clicking on the filed indexed or HTML and I'm just going in I'm closing this file closing this file and closing this file of this is by the This is the main file of mine. There is a text. Hello. You can see that it has a lot of changes from the simple. That's one tag because we didn't apply any kind of for CSS. But the boots wrapped. But the other thing is, if I just type of colossi A This is a way to work on the bootstrap. Jumbotron saved that and go to the brother and refresh that now again, it's taking little time because you know that we are supplying the bootstrap through the Syrians means on lion Go there. You know you can see this big jumble, crowing hair just just at the back of this. Hello, text. Now this is called the Jumbotron, and the whole thing is called a bootstrap. Why this came here is because of the bootstrap. So I hope interested. The bootstrap. We'll learn some more things. The next class. Stay tuned and good. 4. 3 Downloading and Installing Bootstrap (1): Hi, everybody. This is another class off the boots for up. So here in this class, I'm just gonna teach you to actually download the bootstrap instead of using its Syrian. Why? Because you know that the Syrian takes time to open the page a little bit. So I'm just directly downloading the bootstrap. Here. Let's click on the download boots for up, and then just instead of copying this bootstrap, see the end, which is actually showed card. Let's just click on the download. Bootstrap closed that now download. Bootstrap. I just clicked on the down the bootstrap hair. Now you can see that the save link as variable you just want to save. I'm just clicking on the desktop. And here is the folder the Bootstrap, and I'm just pasting the file Bootstrapped Groupon Groupon five distributable dot zip. Now let's click on the start download. It is it had been downloaded. Let us click on close. Now you know that we have to download the J query as well. Some just clicking on the jaquilla dot com website. And here I'm just getting the website of the G Aquarius ville. It's about two opening now. You can see this. What is Jaqui Jaqui? The first small ncdc. Let's click on the download. Jake Weary. And now, instead of for copying its cdn. As you know, I'm just directly clicking on the download, the compressed production, the inquiry. So just click on the same Lincoln. And then there's go to the bootstrapping here. This place, this file. Okay, we just placed DJ quickly, and we just downloaded the bootstrap as well. So I'm just going to the bootstrap folder. There is index traditional file, and there is a bootstrap file. Let's just click on the extract. All Yep. Click on next. No, it's extracting. Close that. And there is the main folder. First off island, including the zip folder. Okay. And there is the folder off the bootstrap. So don't do anything. Just go inside again inside, and just copy all these or cut the CSF, Jason. Phones. All three folders. Okay, Let us cut this. Go back. Go back more. And here where you just place your index traditional fire like this. Place the bootstrap files, and now just delete this empathy folder. These files are the bootstrap filed when it is going through the bootstraps here says that we can see that the bootstraps here says that mean it means the This is the UN compressed version, the 1st 1 and this is the main ified and compressed version of the boots Rapid and see that there's a little difference between these sizes. So, by the way, this is the bootstrap team, and the boots are the same. Now, I'm just going to the Jays folder. Now you can see that bootstrap and bootstrap Minda days, and here is a phone folder. I'll this guy do that. How do you the forint, these specific bootstrapped Cliff Aikens found where we have a lot of funds, I'll just deal you. So by the way, let us see the name off the J query file here. You can see that it has a lot off big name, a little big names from just removing the all the extra coats and only deejay Querida Jay's . So simply pick up this file and paste it on the Jays folder. Now just go to the note pad and what I'm just going to do with actually removing these a script or instead of removing, let just remove the lengths, Okay, just directly type CSS folder because you know that the CSS Fuller is the hair is the bootstrap. So now seizes folder is in the same path of the index traditional, so CSS slash bootstrap dot CIA says Saved that. Go down and let us move all the things off the J quivering and simply type Js flash jake willie dot jay's The file, which I just pasted inside the J s a little bit ago. Removing this code again and typing CSS flashed or not to see assess the Js slash boot strap dot Js saved that Go to the browser and legends Refresher project. You're still having the same things. That means you just truly applied the bootstrap, the downloadable version of boot trap. So the time is to close the files and everything is fine. We just learned some more things in the next class, so stay tuned and goodbye 5. 3.5 Mobile First : Welcome back, everybody. So here. Why? I'm just meeting this class because I just want to clear you something about the boots rap about the device picking off the bootstrap, that How would the bootstrap text the device? Because some people are asking that the bootstrap is not mobile first or actually, some of my students are asking in the course that I just didn't make any close to convertible product in a mobile first type. Okay, so basically, bootstrap is the most popular HTML and CSS and the jays framework for developing responsive in mobile first projects on the web. This is a key of the bootstrap. Exactly. The bootstrap designed for the movement for his project. And but how? We can clarify that our product is mobile for still go there. You think if you just go down, then you can see that designed for everyone everywhere. It seems everyone can use this with a lot of pre processors. But here, one framework, every device. Bootstrap, easily and efficiently. Skills your websites and applications with a single code base, from foods to tablet, two desktops with CSS media queries. Okay, so basically, we just don't need to create anything or any other ground for the mobile fourth device for the mobile devices or for the tablets or for the laptops. You just simply need to code the bootstrap. It automatically picks the text. The specific media query according to the device. For example, if you just open the project in your mobile than you will fight, you will see that the website will open in the time of the mobile mobile design. Okay, Actually, it will pick the media query for the phones. All the marbles automatically. Okay. If you just open your project in the tablet, then it will pick the tablets template or the tablets. Media query. And if you just open it in a PC. Now there is another thing that which kind of PC, your opening or the al city? Your opening. You can open the laptop. You can open the Esquire Top PC. You can open the wide screen. So I max, it's really different in all the different kind of for devices. That's why it's automatically the mobile. Fourth, we just don't need to create something, especially for the mobile phone or for the tablet or for the, you know, different devices basically some off some off. The students are asking for this. So I just made this video to clarify that we actually don't need to design bootstrap for the Mobil's or for the different kind of things. It's automatically the responsive Exactly. For example, if I just minimize this website, the bootstraps website, then you can see that it's automatically converting. Now you can see that the pre processor any D. C. Now you can see that the less and assesses is growing automatically. Okay, and here it's now automatically when it shifts from the tap toe a PC device size. You can see that now all these three elements are in a single line. No, if I just moved, do this. Now you can see that it's suspending. Now its size has gone mawr bigger. Now it's continually Well, that is my under coating. By the way, you can see that it's perfectly moving with the base. Now you can see that here are the around five projects, but now it's still five is still five. But right now, where are the project's only two products? Anything will call him, and if I just doom or now a single project? No still to project. So we have to doom or Okay, well, they just said it it for the four template. But exactly it's going in the very off the, you know, the mobile first type. It means we can open the same thing in any kind of device, so guys will meet in the intercourse again the buying stadium. 6. 4 REN How Boostrap Works (1): I love everybody. So in this class, I'm just gonna teach you some more things about the bootstrap. Actually, we were just about learned that how bootstrap works. You can see that we just pays to class here, and the bootstrap is working here. Okay, So definitely boots. Rebels based on Colossus and all the classes comes from the bootstrap that CSS files. Okay, so what to do mawr for this case? I'm just teaching you on this pressing interim GIs putting a table here, Okay. For just an example, I'm not applying. I'm not teaching you about the tables in this class just for the boots rapidly supplying tables. We learn about the tables deeply in the few in after a few next classes. So this is a simple th or the TV. Whatever you apply TV duplicate that here. One, 23 saved that and go to the browser and refresh that this is a simple table which has 1 to 2 as value. And if I just copy this tea or and paste there the table and say that and go to the brother back refreshed that now again. 123 and 123 Going to the note pad again. And here I'm just going to the table tag and just putting a Colosseum and his taping table . I'm not doing any other thing displacing the class of the table here in the table tag and refreshing that. Now you can see that it has a big, beautiful lion and a big space with numbers. Actually, these numbers are the values but well maintained table, OK, for the more styles of expressing is facing typing, table stripped, you can apply any style, whatever you want. I'm just applying, stripped and refreshing that now you can see that the 1st 1 has a beautiful effect. Okay, the 2nd 1 is blank. If I just copy this one, the boat ones and paste again here and here. And save that and refresh that we can see that it has stripped lines is because of the class off the boots for the table table stripped. So in this way, the bootstrap works. So guys in next class feeling some more things, stay tuned and goodbye 7. 5 REN Containers (1): Hello. And welcome back in this class, I'm just gonna teach you some more. Practically about the bootstrap monster following is gonna teach about the layout of the bootstrap that how to draw layout basically out. So for this purpose, I'm just creating a simple Dave here, okay? And inside the Dave I'm just going down. Wait for a while. Hamden went down and there I'm just creating the another living here in this, uh, yeah. Okay, Well, instead of this imperative, I'm just using the Hedo. I can use the head of ill and then here inside behavior. I'm just doing some more things, just like I'm just typing each one. And then that's one again. And here I'm just putting the hey ding saving that, going to the brother men before going, we have to open the file, which is hair, and I'm just double clicking. And now I got the file, the hitting. But if I just apply the you know that if I just apply the class of the boots to Are the Jumbotron here Jumbotron and saved that and now refresh that. Now I've got d beautiful hating, but the other thing is, if I did go there and press on type the class and type container container. Which means if I didn't fresh that now you can see that you're Jumbotron is in the manner athlete. It is in the container and here in the left and the right side. It has a specific space. However huge is to use the responsive team. Well, you should declare that the bootstrap bootstrap, is it actually responsive? Now you can see that it's totally responsive. However, this is small the side, as you can see that it's just going to be a move by lay out, by the way. So this is the thing that the container can do. But if I just used the container offloaded, saved that and go to the brother again and refresh that now you can see that the space is very tinny now, Just why? Because now you're using the container fluid, which actually don't get extra space but gives us the responsively out to the boot containers are They are really important for the bootstrap and will use the container and contract fluid in the complete course. So in the next class, Nuland, some more things stay tuned and good 8. 6 REN Grid System (1): Hi, everyone seven describes. We are just talking about degrade system after bootstrap. So actually, bootstrap has great off 12 columns. And you can actually place the whole that page between these 12 columns and well, this is not necessarily usually the all 12 columns. You can use two or three or five columns, whatever you need, and you can make them Vaida according to your need. This is a single thing. But how do you the column and what the benefits we can get from the these 12 columns? Just simply that we don't need to care about really care about the with the hide the actually, the margin depart and other thing, which depends on the dimension, because there we have the group system. So how to use that court system? You're simply put tip Dave inside the container. Okay. The container is the mean and inside the container. I'm just typing here because plus, you know that everything you just want to put inside the bootstrap, we have to use the class for that. So here I just put in the class and then just type okay, m d now just type whatever. Great. And actually, however, size you want? For example, I just wanted 12. The 12 level good system needs 1 to 12. Or over this type. Sex means 1 to 6 here. I'm just typing too well. And then what the mean of that? I'm just talking about the whole red. Okay. For example, I'm just pressing interim, putting a color here. It's tiled. Get back around color. And the column This putting as light blue. Okay, I just put it like, blow hair and then here, um, this typing. Hello. Now saved that. Go to the brother and refresh that. Now this is the hello. You can see if I just type six. Just suppose if I just type six. Refresh that now it's the six level Griggs. OK, It had Italy. Six columns, and I'm just duplicating this. And this one has two columns, and the background color is like green. The great system is really easy to understand this focusing that now you can see that these are six columns and these are only two columns. And now we have before column left the duplicate that and it was just type four hair and let this type the arrange or any color. Whatever you prefer that it's a fresh that now the holy screen has been covered. If I just type five here. Oh, so about that, this is the actual four. And refresh that now this is a perfect one. Now, if I just type the five here and save that back and refresh that now you can see that it's impossible to put the 13 columns in a single line. That's why the Who five columns are there because the whole five column is in the single day. So this is the great system off the bootstrap weaken type five years the minute that 55 anti, which means the 12 refreshed that now we just collared the problem by adding only 12 columns in a single rock. Definitely it has a raw as well, so I can add the date here for the raw colas unequal to raw. Nothing more to do here and let us press and let us put all the columns here inside the rock and why this is Ben efficient to use the raw. I'm just guiding you again, this cruelly creating another death and typing class raw. Okay. And there are just actually copying only to one, not the whole. Yeah, I'm just pasting this saving and going to the brother and refreshing. Now all the things is saying, You can see that, but if I just copy the last one and instead of facing inside the Rome just tasting this out of the raw and saving and refreshing Now you can see that the next one hello is not in the raw. Actually, this is after the element. And now, by using the wrong, you can see that it just actually healed up the extra space off the fluid, the continual slowed. Okay, now it's still it's not actually going after the container. You can see that it has a space if I just use the country in a benefit issues the country offloaded now because of the rocks were actually covering the whole space, but not breaking by the way it's out of Vera. So it is. It had still having the extra space. But now these elements having the extra space but actually inside the raw and actually inside the column. So I hope you really stood about the rods and the columns. But one thing where I just want to clear you that there are multiple type of the columns. For example, I'm just guiding you in this way. Okay, so here we can use the S m or the X s f m m d l z lg So what is the difference between the Xs s m m d n l g g s excesses for the extra small devices like mobile fool or something mobile? Okay, Bs. And for the small devices, like tabs and the ipads or whatever the medium sizes for the monitors. General monitor Canal city for laptops and PCs. So medium okay. And the extraordinary large is actually for just like the I Mac and that type of devices so they can use any of them if according to over need. But I'm just using the medium because medium is suitable for all type of devices. We can use a medium for small devices for mobile devices for large devices. So simply don't just change this empty to us and, well, they contain their say. Indeed, dresser, It won't give you the change result, it will be saying, but actually the medium is for the whole devices. So move the best is medium to work. So I hope in the holding about the great system we learn supporting the next last stay tuned and goodbye. 9. 7 Text Styles (1): hello and welcome back. So in this class and is gonna teach you some more things, actually were just talking about the text styles. So for this purpose, I'm actually copying this the whole indexed, rational and pasting there and just typing the old ass Jamiel and saving that. But one thing becomes doing here, I'm just moving the the bootstrap Ling's from the old esteem ill. And here I am, this typing instead of the learned bootstrap, it shows eight Kamal in the corporation of Joe parries and just typing the old HTML. Okay, here it should be the same. It has no problem. So what I'm just going to do here in the old HTML? I'm just actually, First of all, I'm just type bang, adding a devil instead of deciding that develop this typing etch one. And here I'm just inside a child. I'm just typing hating. I'm duplicating this on this should be 234 Um, this should be too five. Okay, so this is five. This is for this is three. This is six now. Save that and legis simply copy this Wanted there. Save that. Go to the brother or before it is going to the brother. Just open up the bootstrap and open this one, which is. Actually, they're already refreshed that one. Okay. And go down and just double click. And this opened the old directional A cell. So this is the bootstrap, and this is the oldest tile. You can see that there is a lot of difference between the both files, which I just want to show you. The second thing is, this should be at six. OK, say that. And they're they should be at six. Because after clarification off the everything in fresh, that one and that one you can see that there is little difference between the boat files. But the other thing is pressing. Enter and adding a black coat. This is another entrusting tak of the extreme. All five simple actually will actually know the active in five. But here, inside the black court. What? I'm just gonna tight the block. Goat area saved that and co p pasted in the index tractable file. Here. Now save and go to the brother again. Refresh that one. This is a black coat and refresh that one. This is simple, but here you can see that There is a small gray Schlein white crane line here. You can see that this is called the black Coat off the bootstrap. And this is a general barcode. So I hope you understood the difference between the both of them. Now, the other thing is, we have the interesting close off. The bootstrap for the Blackwood is adding the claws and just typing luck. Quote reverse how this felling should be s. You know, save that, go to the brother and refresh that. You can see that the black coat is actually starting from the right and ending to the right . So this is the new black coat thing, which is actually not in the general on the basic A stable. So one thing where this one clearly that when you use the bootstrap, you should clear that you're just typing the you're using the estimate five version. Now the fresh that it's not changing. But when you go deeper in the bootstrap, you have tow paste the dark type, because this is really necessary. The other thing is, which is actually only in the bootstrap is when I just go to the hitting and inside the hitting. I'm just using the small tag. And here I am, this typing head one saved that and go to the brother and refresh that. Now you can see that the grayish color hate one which is actually just like the subtitle of the hitting. So this is a bootstrap. But if I just copy this and paste this in the old ash nimule So save that and go to the brother and refresh that once of nothing new here This is the same. Actually, in the old Oshima the H one has been lapped. The small and small is nothing here but here we can see that the text of this small but with the great color This is the boots, right? So now after the black coat, I'm just typing understanding the A B B r attack, which is actually just for the abbreviation off any text. I'm just actually, But before the a b b r I'm just typing p tag. Okay. And here I'm descending the p tag and before the baby are talking just typing the you and is or the u. N. Connect the world to each other. Whatever you type, this is not necessary. But here. I'm just cutting the U. N and pasting this inside the Eva beer because I just want the abbreviation of the U. N. So I'm just typing title and just typing United Nation saving that and disco wrapping this text and pasting the old h emailed us after the black coat, saving back and refreshing there. Now you can see that when I just hovered the mouse over the U. N that you can see that the United Nations This is a general way, but I'm just going here and refreshing. Now you can see that there is lying on the in the U. N bottom of the U. N. But then I just covered the month I'm getting the text, but not on the text. Get the title is bottom of the cursor with a question mark. Okay, but there isn't any rule when I just hope the mouse on the text. Or you can see that the United Nation is placed on the text, which is actually actually not the good way but tear. It's actually placing bottom of the text, which is perfect. Well, im just pressing into her again. And why not? I just add the dark type extremo means the html five version. Hey, eyes, because active in five minutes table are actually the simple actually. Well, when we talk about the bootstrap, actually, I just want to use the mark tag, which is new in html, Extreme of five elements. So I'm just typing here. This is the mark. Save that and copy that. Place this in the index traditional, which is actually the bootstrap version. So first of all, refreshing the old actually move. So this is the yellow color, which is called the more tag. But here, when it is a fresh that this is not the yellow color, this is just like the white yellow color or the creamy color, which is actually the ah, bootstrap rusian off the same tech. Well, there is something more about the bootstrap and specifically the text styles of the bootstrap. We'll talk about in the next class. Stay tuned and goodbye 10. 8 REN More on Text Styles (1): hello and welcome back. So in this class we were just talking about the more texture styles in the bootstrap. Whatever. Just put the deal tag the detail tag and inside the detail as the hating off the detail of this typing D T. And is covering that. And between these tags on this typing news paper, I can type anything, whatever I want. So the newspaper and here pressing interest is putting d d covering that. And here I'm just typing the news paper can have some interesting news. Whatever you just want to type, you can type there, and the next thing is to press a line. Gregan type DT again. And inside this DT the the Internet, Internet Crescent run type DD again and then just beating again. And there, between them, this type the Internet is the biggest sores to get exes on thousands off information, whatever you wanna type information. So now simply, I'm just copying this deal and pasting this here in the old that actually move pasting there and going to the folder here and just opening the index of chemo there. And then again, the boot strap on the old data. Steve Oh, this is the old way. You can see that the newspaper, the newspaper, something. But what is a new way is actually here. Now what? I just refresh that now you can see that the newspaper is bold and the text in bottom of the newspaper is simple, but it has no extra space, as you can see that here. Okay, so this is a specific style. But if you just want to add some spaces, just put a hyphen within his face so this can be in entrusting his style. Saved that and refers that No. Oh, I'm not getting anything. Oh, I just put it this thing to the old daughter. Steam. Well, I just want to put this hair Save that and Rufus that care. Now you can see that this is more interesting is style. Well, the other thing is, I'm just going there in the deal and just Kloss and the classes deal horizontal. This is an interesting class off the deal so refreshed that now you can see that it actually has some extra space before that. And now you can see that the whole thing is in the horizontal way. The other thing is the pre tag. The really interesting tag. Which end is gonna teach you this after the dealer deal Tag the pre Okay, if you already knew about the Pru tag, which is absolutely Komen extremo tag, which actually can show your text in your way. The problem is that generally estimate just avoids the extra white spaces and extra line breaks. But by using the b r P r E tag, you can add extra lines, spaces, extra line breaks and rightly spaces. Whatever you want. For example, this is a long space paragraph. Whatever you want, a type you can. There isn't any restriction on this. Now I'm pressing, enter and adding some tabs, and then the new line has done okay. Now save that and go to the browser. And refresh that. You can see that that text is in the way that you want the actually spaces OK on with the actual line breaks and the white spaces. But if I just simply copy this one and paste in the old HTML, so actually it feel maintained its ah rule of fight vibrate, line breaks and white spaces. But now here you can see that there isn't a specific its effect around this pre tag. This is the bootstrap version. Well, there are some more things about the text is just like if I just had the p tag here. Well, I don't need to work on the old estimate anymore, because there is something which you already knew. And actually, now the game is only for the classes. So we when we are just not talking about the text, So don't need the old actually about tags. So don't need the old that last email. So here I'm just typing. This is the Peyrard, your simple paragraph. Save that. Go to the brother and refresh that. Now, this is definitely the simple paragraph. But if I just place a class hair and in this clause, I'm just typing text succes save and go to the brother and refresh that Now you can see that it has a little green color, which is perfect now, going there and duplicating this one multiple times. And here this shouldn't be the success here. I'm just typing danger. Okay? There are a lot off teams in colors. Refresh that. The danger means the red color. Okay. We'll use the danger. The sucks says the info and a lot off different teams off the bootstrap in multiple ways, These are the simply colors. Okay, so fresh that again. And now the in flu is a little bit one blue. And here I'm just typing primary Say that and refreshed that Now the primaries light blue and the actually the info is a little dark blow. Replicate that again in here. I'm just typing, muted, mutated Just like the great color. No, as you can see, that they get that again. And here I am, removing the mutate and typing warning. This is another interesting color when it is refreshed that now you can see that the warning is there which is actually just like the brownish tool. Well, just apply the background Roseville. I can apply the background on the new ones, but I'm just applying here. The b g sex is okay. The Bee Gees sex is a class of the background on a fresh that now you can see that daily the background of the BG success Well, this is not necessary to apply the success on the success. I can change it to info. Whatever I prefer. Save that and refresh that. Now you can see that the green on the blue. But this is not looking. Not perfect is because we should have, like the same on the same. So by the way, here the BG danger Say that and refresh that. Okay, now here I'm applying another one. Well, this is not necessarily by the text as well. We can only work on BG or only on the text, by the way. So refreshed that back looking same going there and pressing the space and typing BG primary and then going there and here. Well, there isn't any effect for the muted in the background communities only for the text, so we can type b g muted or whatever. But there is the thing for the text warning to Bt warning. Let's just refresh that. Now you can see that they're the primary color. Okay, Now you can see that when it is supplied, the primary color the base color is automatically or actually the phone color is automatically going white because it's impossible to show the dark color on the dark background. So the word president, the bootstrap knows better. Sorry, I'm just mixing the world president Bootstrap multiple times, by the way. So this is the warning effect. I hope you understood all of the and that in the last some few things, some interesting things that you must know about the bootstrap and the text is tiles. If I just said the collapse off lead, let us check. What is it here? I'm just typing in the lead. The new pera. Okay, Now save that. Go to the brother and refresh that by using the lead paragraph. This is a leading paragraph. You can see that. And if I just type the instead of lead, I just type small, save and go to the brother and refresh. Now, this is a small pera. Whatever. The next thing is, I'm simply duplicating this one again. And just changing this one's a small class and applying text, right? Okay, Now refresh that. Now the text is on the right side because I to supply the text. Right? So definitely you don't need to use the text, decoration or text align, center or right is directly type text, right? Or the text center. All the sent a text left fell. Definitely. We don't need to take the text left because this is the default value. This is a text left. This is the text center. And this is a text, right? Well, the next one is text upper case. And refresh that. You can see that the new Para is in the capital letters, which is their utility Normal letter. If I just replicate that now here. I'm just typing lower case. Save that and refresh. Now you can see that the tea is capital T and N p is capital here. But here all of them are really small. So I hope you re stood about that as well. And in the next class, we'll learn some more things, so stay tuned and goodbye. 11. 9 Bootstrap Tables (1): Hello and welcome back. So in this glad you're just about learning about the bootstraps tables. The tables are really simple as just like the extreme. Oh, but if you just add the collapse of the bootstrap, then they will become something really entrusting. So all the things we don't is doing is a simple actually move. And there this is the hating area off the table, the T head and inside the t hate. I'm just creating some TD's and inside every TV what I'm just doing is this is the s got Eno duplicate that. And here this is the name and there it should be the beed. Okay. And here not paid whatever you want to type, you can type there and then I'm just going down and just actually Oh, don't go inside the heat. He had actually created t body just after the Haight, just like I'm doing and then just go inside the tea booty and there just create the tea or and inside the tea, or just create the TD's, which is really important. This should be the one and this should be be name, which I'm just typing June, Whatever name you on a type and the paid 500 the not paid 200 just for showing you. This is not the matter of what I'm just typing in the cells. Let just simply duplicate all that values two and three. I'm not changing any other thing because I just want to get the result. So let's just cancel the old one and refresh that one. So this is the table, but it's it has nothing new, just simple common. But when I just go to the table tag and just put the gloss and they're inside the Colosseum , this typing table now saved that and go to the brother. The fresh data. You can see that the table has been set ID as the bootstraps table. And then if I just press in space and type table because there are a lot of ways to create a table instead of just pressing a space, I'm just simply copying this table and pasting after the previous table. Now you can see that this is a new one stable, so the table class must be placed here and then just take table. It's stripped, whatever you where you want. When I just type table stripped. Now go to the brother and there I'm just refreshing this one. Now you can see that this is his trip class which is actually perfectly mannered now, going there again. 01 thing more. I just want to clear you that this should not be the TD. That should be the T edge. So I'm just correct defying this the virgin TSH TSH to yet and the last one's th well, the next one has the same problem. So th th th this is not a really big deal for anyone, but I just forgot to type the th first. That is why I'm just watching that the result of same Now if I just refresh that now you can see that the th is little bold, perfect. Well, there is another way to create the best table. Simply copy the previous one and paste just after that table here and go to the tables colas and remove the table is stripped toe condensed save. I think I'm just I just put the wrong spelling. Let just test this fresh that now. Yep. I just put it the perfect spelling. Actually, the condensed means actually removing extra space, extra space around the element departing and emerge in, which is called the condensed. The table condensed again. Let just paste the the table again, and it's from of these tripped whatever destroyed Howard save and go to the browser and refresh that one. Now what is the However it is the same, just like as the top one. But then I just hovered the mouse on the element over the element. Now you can see that it's hovering and showing us the Howard status. Well, let's just replicate the previous one again. And here this shouldn't be the stripped or however well, I can type bordered, Okay, bordered. Save that and refreshed that one. Now you gives you that it has the border effect. Perfect. But if you just want the borders here with the hover effect as well, so go to the top. And then this is a simple class. You, If you just can't work with the classes, then you can You can understand what I'm just doing. Just putting two or three classes. Refresh that one. Now this has the borders. This the second last one. And also it is it has the hovering effect. OK, now it's looking much better than the previous one. So I hope interested about the tables, Something more. I just want to clear you that if you just want to go there and actually for the top ones t are you want to have, like, last off danger you've learned about that. Danger is the red color info is light low and now you can see that this is the right color . Okay, Now here claws in full saved that and refreshed that, actually, And who has no effect here? And there is a reason that the info has been applied on the TSH and the TR off this th has already have the danger colossal. Cut that and paste it to the TR the another one tr and let just test this on the browser. So refresh that one. Now you can see that second number of Joan has the blue color, the info, and I'm just going there now. I'm just applying the effect on a TD. I can apply the effect on the TDs ville. So what I'm just going to do is warning, save and refreshed. Now, the warning effect is only on a single TV. But if I could supply any effect on the TR so this colossal be overlapped? Well, I'm just going there and just, uh, putting another Kloss primary legis. Check this on the browser. Refresh that. Now, where is the primary effect I'm getting? Um I think I just, uh Well, I did a little mistake here. This shouldn't be the primary here. I should take the active, Actually, primary is and nothing in tables. Refresh that. Now here, this is the active collapse. You can see. Um, on the on the Joan if I just type instead of John. Alicia, my name refreshed that one. Now we can see that the show has the grayish color. This is the active effect off the table. Well, primary is not in the table, so I hope Andrew stood all of it about the tables. One thing Mawr, if I just type because I'm just treating you the whole thing. So why not? I just put another the last ones clause, which is actually the success. So save that and refresh that now the successes there. So these are the whole class is off the table. No, the class can be applied here, but you can make your own classes at Ville. So I hope it really stood. All the things about the tables in the bootstrap we learned some more thing. The next class stay tuned and goodbye. 12. 10 Bootstrap Images (1): Hello and welcome back. So in this class, I'm just doing some more things. First of all, I'm just creating an image. Well, not creating just adding an image to the webpage. So the source of the images in majors slash I'm Do you want that J p. T. So the images folder is there in the bootstrap. Now here. This is a major folder, and this is the I m g imagery, which I supplied. So go to the brother again, or the note pad again and saved that and go to the browser and refresh that one. This is the image in the full size. Okay, Perfect. But the other thing is, you can see that it just crossing the container as well. But if I just apply the class of the bootstrap Come, Neil saved that. And refresh that back. Now you can see that it is still in the same position. Which means I have to apply the vid off the image as well. So with and two or 300 PX. Say that and refresh that. Now the image is very small. You can see that now. What the thumbnail did you can see if I just remove the thumbnail. I'm just showing without the thumbnail fresh that now you can see the image is in a little full size. But when it to supply the thumbnail here, refresh that. Now you can see that a border around the picture can be seen here. So the rounded border is it the thumbnail? So now if I just go to the note pad and simply duplicate this image and now refresh that one. Now there are two images. So for now, instead of the thumbnail, I'm applying the I m g circle. Save that and refresh that one. Now you can see that this image has a beautiful circle around it. This is called the I am just circle. So then I can apply there the i N g. Some nail saved that and refresh that one. Now, this is the new one version of the dump Neo with the same effect Approximately Well, this is the correct version off the thumbnail. This one's is not for the images. So right now I'm just relating the 1st 1 and to play getting this one and we will learn some more things in the next last so stating and goodbye 13. 11 Bootstrap Buttons: Hello and welcome back. So in this class, I'm just gonna teach you about the buttons. The buttons can be any many styles. Okay, I'm just showing you button. Okay. This is a simple button. I'm just typing something like click or just correct. If I the text, collect me, save and go to the brother and refresh that one. Now, this is the button, which is the click may. But this is not the boots for a feature. If I just apply the class of the bootstrap here and just type b TN obedient is actually clear that it is about to talking. Ah, but now this is the button off the bootstrap, but without any effect. If I just add another spacing type beauty in default, save that. Go to the brother and refresh that. Now this is the BD in to fall effect off the bootstrap. You can see that well, instead of this, if I just type primary, save that and refresh that now, this is a primary effect of the bootstrap, but duplication and then in full in effect, you want you can apply. Refresh that one. And this is the info duplicate, duplicate and here. I'm just typing success on this should be devore Ning saved that and go to the brother and refresh that Now this is a success and this is a warning. All of them are looking Really? But there is some. Or if I just duplicate that one and just type link this is another new effect. Save that and refreshed that. Now the button is just looking like the link. This is why this called link class and then the last one is the danger. You know, about the danger the red colored refreshed that now this is a dangerous class. Well, after that, the other thing is the size. If I just apply BD en lg there, save that and refresh that Now the button is looking like a little big because it has the algae class. I go there and put the BD in MD MD is the normal size so we won't find anything new. But if I just applied the BD in s m and save that and go to the brother and refresh that now the sm is actually ended in small And the medium is actually if you just remember that I stayed to you that the medium is a common size, but there is another opportunity to put up the Bt n ex Troy small. The excess so refreshed that again. And now this is the extra small science. And now all these are the buttons. Specifics. Well, this is the all the things are really simple. But if I just remove the SM or any other thing, so if I just apply the BD and block, then what is DBT and block? So go to the brother and refresh that now the block is actually covers the whole area, and it just depends on the parent, David the parent, Davies, a country and fluid which actually covers the whole screen. That is why it is just covering the whole screen. Well, there are some more pluses in the button. Duplicate that one again. And for this class, I'm removing the billionaire simply typing this able save that one and refresh that it's not giving us any response. That means it should be disabled, not the simple disabled. Refresh that one, and now you can see that this one has, in effect off the disabling, so that means it's working perfectly. But I'm just going there again and here, removing the 1,000,000,000 ASEM. And I'm just typing Act over here. So what? The men of the active refreshed that now it's just looking like it's active. So I hope you noticed about the active close as well. And all these things are the buttons. Specifics. We learned some more things next class, so stay tuned and goodbye. 14. 12 Button Group: Hello one. Welcome back. So in this classroom is gonna teach you some more things about the buttons. Actually, I'm just gonna teach about the group buttons on you and entrusting thing off the boots rap . So here I'm just setting a cool loss. And then inside the Colosseum, just adding the bt and group, which actually cleared that you're just about to making a group inside, and then just simply type the button. Just a simple buttons, as we did before. Okay? I don't think that it is a problem for anyone. Well, that's put the class and 1,000,000,000 space and then the 1,000,000,000. Now let us mention which effect do you want. For example, do you want the info or do you want the success or whatever? Now duplicate that one. But before duplicating, I'm distracting home here. Now, I got the four buttons here. Let's go to the brother and refresh that Now this is the whole before homes, actually. And what is the group? You can understand that here you can see that the corners around dead for the whole group. Okay. And the middle buttons are Esquire in this choir shape. This is called the button group. I hope he understood about that. I'm just going down to teach you some more things about the BD en group. But before that I'm just simply copying this one and pasting there. And then if I just add one thing the vertical Liberian group Vertical now refreshed that back. And now this is the vertical group, which actually played in the vertical way. Not in the horizontal way, I hope in research about the boat ways. So the third way is now ready to be do teach you. So right now what I'm just doing Just creating another Dave and going to the first ones def tag and just typing Koloss and then again creating the button group and pressing his face in typing button guru. So the new thing is, but in group justified, you will learn some interesting thing in that. But before that, just create another Dave's between, uh, the group justified and okay, here I'm just getting a Kloss and in the first ones class, adding the beauty in group Okay, it means now the every Dave has obedient group and only one billion just the button. Here. You can see that button and with the same tactic, just put the clause and then just mentioned the BD in. And now the effect medium success, whatever affect you like you can put their now just type software. I can type anything, whatever. I just like I did duplicated this three times. Now go to the brother and refresh that one. Now you can see that it's actually covering the whole area. If I just minimize now, just because I just have to manage this in a more in a different way, just delete that wound and just simply copy this one's the first ones group here in here. Now we have three buttons in the group's. So go to the browser and refresh that now this is a thing which I just want to teach you. You can see that all the buttons has been justified. According to the parent death, the container, the flowed container floats tag. So definitely because what I just want to teach you well, there are a lot of more things to understand and loan. We'll talk about them in the next class stating and goodbye 15. 13 REN DropDown Menu: Hello and welcome back. So in this class, I'm just gonna teach you some new things about the buttons. Actually here we're just couldn't learn the drop downs, which is really interesting thing in the bootstrap. So first of all ages said the class of the drop down here and then go down by pressing cement. And then here I'm just gonna add the button at the really top of the Dropbox. So sorry, the drop town. So, by the way, this is the button. And here I met in the class and with the class of matting here, the 1,000,000,000 the BD in primary. Okay? And now save that. And that another glass, which is he dropped down. Tuggle. Okay, the drop down double now and then the data struggle. Okay. What? The little you can do, actually, for just clearing that, we just want to drop down over elements. We used the delta bubble. Well, here, I'm just typing the article. Whatever I can type. Now, this is a button where you want it. Just click on this button view that the drop down. So, by the way, I'm just going down and just creating in this town. Oh, sorry. Not this pan here, actually. The UL. Which is the perfect one here. I'm deciding the UL. So him deciding the class of the bootstrap and dropped down and the menu. So now just go down. Because here in this, um, I'm just gonna add many. Whatever. I just want to put in the boots. Drop. So in the first born, but before the wedding, any element, he should use the attack. So there is the valley of the eight out of the single hash tag the hash. Nothing much. Well, there I'm just typing the technology. I can type anything, whatever I just want. Okay, So they're just removed the o duplicate that now. There. It should be the This foreign information. It should be the science. Triplicate. That one again. And there it should be the held. Okay, save that and go to the brother by refreshing this one. Now I've got the article. When it is click on the article. I'm getting nothing. Which means something more I have to do, which I just didn't so tell. This is a drop down clause and this is the drop down toggle. And there it is the data trouble which is dropped down. So everything is clear. So what is the problem it's having? Right now everything is clear. But when there isn't any problem than there is something wrong at the top, I'm just going to the top two checking up. And yes, the problem is the spelling is wrong Off the bootstrapped RJ's it is the booze to wrap. We have to use the boot, its strap, because you know that the the drop down is actually working from the bootstrap Js file which actually needs to quit that Jacksonville. So go to the brothel and refresh bad again. And now when it is click on the article, I'm getting the many, which is a perfect thing. But I just want so the next thing that I'm just gonna do is actually going there in the button tag. And just after the article, I'm just typing, getting in his pant tag. And there what? I'm this typing inside these pantalla I'm not typing anything because I'm just adding a class just in the it's starting to head off this span and the classes. Karent. What is the carrot is Actually this is the this is an aero, You'd actually shows that it is a drop down. So this is really cool, I hope. Interest oud, but something where I just want to teach you about the drop down. What if you didn't have the button to love about yourself or your Ashley to for the user to log out here? I'm just adding Lago gazelle so fresh that back and it's click on the article. And here is a look out link, but it's just looking like an article because you're in the article tag. Well, the other thing is, let's go to you are actually just simply duplicate back one and removed the tag from this ally. Okay, and add medical loss off divider. Save that back and go to the brother again, and I'll refresh that and minutes click on the article. Now it's looking like that. This is the local button because they're lying. The other next thing is we can add the hater and how it a hitter that you forget that one again in here. Let us type that corrupt down hater. We cannot this hate or anywhere, really, you just want for example, I'm deciding the heater just before the divider in the logo from this typing person. You know, what if I can tie? This is just for showing that it's the hater. Click on the article on this is the hater, which is actually not looking really cool. So why not? Readers cut this divider and paste a divider here and then just save that and go to the blood. Refresh that now personal. And there is love out button. So this is the hater. So right away, I hope you received about whatever we've learned, but something more I just want to clearly about the hater. Still, So how to do that going to there and actually right now, just copying the whole dropped down the hole dropped down, okay? And basting this hail and actually just adding a coma CIA in the jewel just single cloth drop down menu, right? Saved didn't go to the browser when it is fresh. That night I got another button, but when I just click on the first ones button, it's looking like perfect, but But I just click on the 2nd 1 The manual is coming from the right side. This is the new thing, but I just teach you right now. So they just copy this one again, because something more I just want to teach you about the drop down, but not the drop down. Actually, about the drop up, let's go to the brother and refresh that one. Now, I got new but me When I click on this button, this is showing from the up off the element, but actually on the right side, if I just remove the drop down Reid dropped on many. Right? Then the fresh that back. Now you can see that the element It's chewing at the top of the drop. So this is called the drop up, I hope. Understood. This has no so guys, You learned more things in the next class, so stay tuned and goodbye. 16. 14 Bootstrap Glyphicon: Hello. And welcome back in this class, I'm just gonna teach you some entrusting thing about the bootstrap. Actually, for many things, we have to create the or actually apply some images for Aiko's multiple Aikens, we have to apply some images, but they're in the bootstrap. Bootstrap is giving us the perfecting. Whenever you just open the boot strap, you can see that there is a fun solder. Okay, which is a part of the bootstrap. And inside the friend phone photo, you can see that there are a lot of files like Cliff Aikens, Halfling's regular halflings regular, and then bot SPD, TDF. Whatever files, we don't need to do anything with the phones fold. Oh, this is just a folder and everything is cleared by the the boots driver CSS. So we just need to do one thing that you need to call that Aikens. Okay. The I could name is actually, or how does that? I can just type cliff. I can't. Okay, this is the name of the Eiken Cliff Aiken. And then which I can do you want. So now there is a living problem because we just don't know the name of the icons. So why not? I just type tickler Feikens and bootstrapped YouTube's. I just open the website where I can get the names off the who likens. So it's about to open now and then you will see the whole sheet. Now, if you just I piglet Vikan, euro that I'll got this sign. If I just type the Cliff Aiken enveloped and I'll get this this, uh, I can or anything you can see that there are approximately 2 56 or something. I can't. I don't I just don't know about the complete quality, by the way. Well, this is a cliff I can adjust. This is a cliff. I content the picture. And if you just want to place the video on your website and just want to show the iconic video So let's take the face time video for now, I'm just getting the cliff. I couldn't camera. Okay. So, Cliff Aiken, first of all that said the class of the Cliff Aiken toe apply the the front of the cliff Aiken, then live. I couldn't do the name of the Eiken. So the glove Aiken camera. That means this is the class. OK, Google. If I can high phone camera now, save and go to the brother and refresh that. I got the camera here. You can see that. Okay, this is looking really perfect. You can use the class anywhere. For example, Here I'm just typing. I am a photo for the semi colon. Or started a single code. Just type the A P. O. S. The entirety graph for Well, this will not make any big change because we're not programming or something. This is a simple rendering. Now you can see that I am the photograph for so I cannot disclose. Okay? Anything. Just suppose I'm just having a b are here. And then again creating this pan one thing more. I just want to clear you that this is not necessary to create the cliff icon or used a graphical inside the span. We can use the I tag as Bill or any other thing just like that. So, by the way, there I'm just again calling the glyph Iker. Okay, then it's face Now I just want Teoh Get the name off the envelope. OK, Cliff, I can envelope there, left Aiken, hyphen and villa. Okay. And there I'm just typing G d s k h m a d other a gmail dot com Now save and go to the browser and there and refresh that. Now you can see that here. I'm just showing the email address, and there is the icon after email. So this is what I just want to teach you about the Cliff Aiken toe how to use. We can use the cliff. Eichel's in the tags in the buttons as well. So I'm just gonna use the cliff I can inside the button. Okay, So before the button on this, creating an input tag. Okay, Ty, And then just cover that. And here in this typing text, But before that one thing where I'm just going to do or it will be a little typical to do so just directly. You use the button tag. I'll just like I just want to show you the pair off the button and the input. But this will be typical for you. I knew about that, By the way. To creating a button. Just put the beauty and and the Iberian success. This is in the style of the button. And then here let this type search or anything. What? Whatever you want. Go to the brother and refresh. Now I got the button of the search here. And then just after the search ad in space or before the surge, whatever. Wherever you just want a place, your icon, it's pan. Okay, Now go there. And little search. The sign off the surge is dignify concert. Really simple going there. And then again adding the class off the cliff. I could space Google if I couldn't high from search save and then refresh that. Now I got the search link here. I hope in really stupid we can use this in the input as well. You will learn that when we just talk about the input, like in protects fields and whatever. So I hope in Bristol how to use Google if I can. Anywhere where we just want in which way? Beyond now I know the website which I just tied simply. Cliff, I couldn't got bootstrap cheat sheets dot com to access on the the whole list of the bootstrap. You can see that. I'm sorry. Not the bootstrap. The Cliff Aiken. There are a lot of ugly Feikens. You can use any of them whatever you want according to your need. So in the next class, we learned some more things about the bootstrap state, you know, and get back. 17. 15 Jumbotron and page header: hello and welcome back. So in this class and is gonna teach you about the Jumbotron and the page hater. Well, you already knew about the Jumbotron because you've learned about the Jumbotron many times , even in the first, keeping the first or second class as well. So right now I'm just gonna using a glass here, and it's heading the jumbo. Oh, spelling should be Jumbo Theron now saved that. And then whatever. We just type inside the Jumbotron on we just see the jumbotron without anything, we can see the big, jumbo, white gray area at the hitter. And just like the hitter, this is called the Jumbotron. OK, so cool. But what if I just type anything inside the Jumbotron? Something really important. You must know about the Jumbotron as I'm doing. If I just put the texture, for example, the Jumbo Tron say that. Go to the brother and refresh that. Now you can see the text, the Jumbotron. I'm going to copy this one, the text, and just pasting this hair and then go back and refresh that. Now you can see that the boat are the etch ones. But you can see the difference easily that this Jumbotron is really small. If you just compare this one with that one. So definitely, actually, this is actually not the Jumbotron, but taxed is the Jumbotron. So it should be the jumbo be hitting without Jumbotron. OK, now we'll fresh that back the hating without Jumbotron and the Jumbotron. So definitely you can see that this is a little small if you just compare with this because this which one is in the jumbotrons class. So I hope under through that the Jumbotron clauses not only effects on the main Dev, but also on its child's. As you can see that well, this is a jumbotron. But the other thing is, if I just pressing interim, just put the Dave hair another Dave. And then here I'm just adding another class now the most famous, actually the most usable. The thing is Page Heda, which we often use instead of the Jumbotron. Because the page hitter looks more in trusting because of its simple look. If I just would be hitting inside deep eight hitter as veil and I just tell you the page, Haider saved that and go to the browser, Refresh that one now the page hater. You can see that the textures very little bigger or actually, Yep. Ah, very little bigger than this text. But you can see a line here. Okay, This line is called the page hitter. This is the thing is called a patient abjectly has the border okay? And the text. So after you do the both thinks we will use the both things and other projects. Definitely the page hitter in the Jumbotron as well. So when the next class, we'll learn some more things. Stay tuned and goodbye. 18. 16 Bootstrap Wells: Hi, everyone. So, in this class, I'm just gonna teach you some more things about the bootstrap. Actually, there is something that it's gonna teach you, which actually just looked like the Jumbotron. But actually not the Jumbotron. There are there just about learning the Veles W e double l will. And now I'm just going inside. Development pressing, enter and actually let us directly type whatever you want. Or the better thing is to change the day Vinto p or put inside put the p inside active. But now there was Inter native. I'm just directly typing whatever I want on the same place here. I'm just going Tape is this is the bill saved Didn't go to the brother and refresh that this is the bill. You can see that a beautiful big area. But this is not the Jumbotron. You can understand this. So now what I'm just gonna do is we can change, develop size. So let's duplicate this. And then here I'm just typing devel. Sorry for the space and type the veil again. And now just put the size with the hyphen. I'm just gonna put the site of the LG. So let's save this. Now, this is the veil. LG saved that. Refresh that. Now you can see that this one's well is a little larger with that one. Definitely. This is called the medium Ville. But we don't need to type the medium well because the medium is by default. But there is another veil which is actually the evil s m. It means developed small. Refresh that back. Now you can see that this one is the smallest. This is the medium and this is in larger. So I hope you're under a student. Close that now you have understood all about the wells in this class feeling more things Stay tune and goodbye. 19. 17 Bootstrap Alert: Hello, everybody. So when this lawsuit is gonna teach you some more things about the bootstrap, the alerts, elements how to use them. First of all, I'm just creating a did here. Okay? And there, inside this death, I'm just typing. That defile is about Or the filers deleting. No. Yep. The final will be deleted. This one is a perfect sentence. Now, this is kind of alert, but definitely when I just go to the brother and simply refreshed that now, this is not looking like the alert. So how do you make it? Turn it to the alert? We have to have some classes. I'm just letting colossi a and alert. Okay, so now this is an alert. But I just go to the brother and refresh that now this actually has ah, perfect. Didn't hide, But definitely still, it's not looking like they're load because I have to have an underclass. The alert now, which type followed it is This is the type of the danger, the dangerous alert. It means the right color, the fresh dead. Now I got the red color around this area, so it's on an alert, but definitely this is just like the simple background off the red color. We've learned about the BG, then your or something. So definitely this is not like an alert because alleged should have the link to be close or cancel something. So definitely be half. They had other things. So what is going inside this Dave and adding an a tag at your if and at this time I'm just setting in ash and closing this in here? What? I'm just gonna type I can type anything. For example, I can put the X there, And if I just go to the brother and refresh that there is a next But I just don't want to show the simplex because this can be the text because you definitely did. That is the text if I just had the Italians. So this is the tighty which showed the exit in a perfect close manner. But we have to do a lot of things. For example, I'm just going to add a classier with the name of the clothes, save that and go to the back brother and refresh that Now where is the X? There is the X you can see, and this is just looking like the cancel or close button, not the X definitely. But as you see in that it's not working because we didn't at the JavaScript here, the JavaScript, Jacqui, very whatever. So, for eating the query, we just have to add something like data. Dismiss Miller. Have to correct a five. Your spelling dismiss is a perfect spelling off dismissing something. Know what? Do you want to dismiss an alert? Okay, so we just connected the JavaScript here. If I just go to the brother and refresh that again and now Now I just click on the close. But now you can see that that the alert has been removed just because of the link, which is the close. So I hope in really stood how to do that, but something where I just want to add beer. If I just said the area label close. Well, this is Ah, nothing is special in the visual visual way. But just for declaring that by the sign reads, We can close anything. The very little is close. But one thing Well, you can notice that when I just to refresh that one and then I just click on the clothes. It's just directly going okay, Just like it's never deal. But if I just had a space and just type fade in, okay? The method of the fade in is when I just refreshed that manages close click on Close. Now you can see that it's going like feting, so this is more perfectly to rule on alert. Well, I'm just going to copy that one, and it's pasting this multiple times and then definitely you have the ability to change the text as well if you just want to change anything. But I'm just going to change the danger to success or something. Whatever success say that refreshed that now this is the success. All of them are working perfectly. When I just refresh that bag, it's there. Well, something more. We should add, for example, the success and the warning and the last one should be the info. Okay, these four these tiles is working on the alert refreshed that back. Now you can see that all of them are working. When it is clicking close, everything is fine, and definitely these classes, the alert, success, other danger and alert info, or another warning are able to work, unable to make another. So we'll learn some more things. The next class stay tune and goodbye 20. 18 N REN Bootstrap badges and Labels: Hello and welcome back. So now we're learning some more things in the bootstrap. Actually, I just want to teach you about the labels and the badges. So first of all, I'm just putting in a tag in here. Cover that. Okay, so here I'm just at this time, I'm just putting in a hashtag. Then cover that. And now here, inside this A. What I'm gonna do is actually just typing the messages while I can type any according to the need. But here, I'm just getting any space in tightening span. Okay, now covered that. And here I'm just typing five decibels, six sweater by visible. I just want to show that there are six messages when it is go to the browser and refresh that I got the six. The messages. Six. This is not looking really perfect. But if I had the cloths off badge here, the d g e badge and no save that and refreshed that now this is like the six messages looking really perfect. Begin a disc. Vaginal. Yeah. This is not necessary to add the badge inside the eight. You can I d badge anywhere. Well, just for supposing some more things. I'm just putting 29. And here I'm just typing modification. We can use a batch for notification as well. This is an example. Save and refreshed that now Notification 27. This is what I just want to show you here. I'm just letting it be or attack for just getting an inter a language. Well, just for teaching, you are marrying a button as well because I just want to show you that we can apply the badges to the button as well. Okay, so here I'm going to the button and adding a cool ass off very in. And then Vivian default or the primary, whatever color you like fry angry. And here I'm just writing. Click to see the notification. Whatever you want to type, then at this pan inside the button. Okay. We cannot spend inside the button as well as I am doing. Then cover that And there at a colas what the public want, Ed is just the batch db d g bad in him to typing 31 10. Whatever you typed. Now refresh that, like, got the notification. And this is not looking like the button, which means out there is the problem. No, Save that, Andrew. First that now this is like the bootstrap button. Okay? And this is why I just want to show you that it can be applied on the button is ill. And the other thing I just want to show you is the actually the label. So how do you the label for that? First of all, we have to draw the day and then inside the devil. I'm just choosing the page hater because I'm thinking that I can just tell you about label best in this way. Well, here, this is the H one, and then I'm just typing downloads. I can type anything, whatever you want to support software's download or anything than any space and just type span covered that the span and then go to the 1st 1 tag of the spend here and then this epochal loss off label. Okay, now, which effected you want, we'll just decide in the next plus refresh that this is the downloads and there is nothing inside the span. I'm just typing better them in a better. It actually were continuously making this downloads. Well, I got nothing. So it said in the space and type label info saved that and refreshed that I got debater in the label info and this is what I just want to show you. Well, this is not necessary to show the label into the info. The fresh that now this is the way off the default way again looking perfect download. And the better just showing that this downloads feature is not completed. Actually, this is in the beta mood. Well, we if you're just creating a subheading, so we should use the three or the edge, Do whatever you perform. Refresh that one. Now, this is looking more perfect. By the way, you've understood about the label and the badges. So in the next class, I'll teach you some more. Stay tuned and goodbye. 21. 19 REN Bootstrap Panel: Hi, everyone. So, in this class, I'm just gonna teach you some more things in the bootstrap. Actually, I just want to teach you about the panel. A really interesting thing is called a panel. We'll use the panel it multiple times in this course because this is really interesting and important for for creating a panel of this type panel and then present in space and mention which is tiled. Do you want for your panel? For example, Do you want the panel? The default color defaulted Dennis style. I'll change the style that run to this guy. Do that. How much styles? We haven't home on how to change the styles. Actually, this is the another dead inside the panel, okay? And this should be the panel hate of Okay, battle hate up. And then inside the battle hater, or actually, this should be the paddle hating, not the hater heating. Okay, well, I'm not putting anything inside the panel headed right now. I'm just going after the panel and then creating the close off panel body. Okay? The body element, and then after that, is creating another new day of hair and then this putting the another class off the food time. Okay? I just created all the things. Oh, it should be the panel food or not, The simple food. Definitely. I just created them. Now in the panel heading, we have to put the hitting off for this panel. I'm just putting, behaving inside the edge. Four tag for this, making the hitting like a hitting, but not the big hitting beginning. That's just like the s one and s two. But I'm just shooting the edge for because this hitting it is only for the specific panel hitting. Well, Penhall hating. Now save that and then just put anything in the body. Every year you can put anything but just for showing you I'm just using simple text. Well, we can use images inside the panel. We can use anything, whatever we want. But there are just no need to create the class here, but just directly type. This is the panel body. Whatever you wanna type, you can now go down. And this is the panel food, you know, and they're just high panel food top. Okay, save and go to the brother and refresh that I got the panel here. You can see that. Okay. Okay. So first of all, this is a single container, okay? And the panels hot finals. There is just according to the it's panels with. So that's why it's looking too big. But we can create it inside the column as well. Well, this is the default style of the panel. We can change the style of the panel by changing the default value to any value. I'll just show you how I'm just copying this panel and it's pasting after this panel here and then instead of the default, I'm just putting these successes save and refreshed. Now, this one is a success panel. Okay, It has. The success is tiled. Well, the thing is that you can see that the food raises telling the same color, but the hater color has been changed. And the border, this is the very panel works now duplicate this again and from the success due in full refresh that back. Now, this is a in food style. Go down. I'm just only changing these tiles to show me that how pedal works and then the primary refresh. This is a primary style and going there again and just pasting this one once again and then removing the default and is putting the learning save and refresh. So I got the burning hair and then just duplicating this once again, I hope that the danger will look at Bill. I'm just testing this. Save and refresh. Yep. Danger is working, so you can see that approximately the all styles of the bootstrap is working here in the panel. And Hogan great stood how to create a panel. So for the next things you learn in next class, stay tuned and goodbye. 22. 20 Collapsible: Hello and welcome back. So here in this class I'm just going to teach you some more things about the bootstrap right now. I'm just teaching you the collapsible. Okay? Legis had the correct button. And actually, I'm just creating a button here and here. I'm just getting some text. For example. Click to collapse. Whatever you want to type, you can type as a button. This is just in this example. I'm just going to be It started starting Tak of the button, okay? And just putting the text off the first of all. Well, the BD in for this. Creating the button, okay. And then BD in, What the effect do you want? I just want to success two billion sexist and then the data. Well, I'll just have the data total later on, because for now, firstly, we have to create the element which we just want to be collapsed when we click on the burden. So here I'm just sending a text. This is the collapse fable element. Okay, Perfect. Now and is going to the div tag and actually here What? I'm just doing it typing I day. And what the idea. I'm just putting here collapse or C l a. Whatever I just want to put we can put as the i d. I'm just going to the top and forced to fall, we have to add the variable or sorry, the attributes of the data Togo. And what do you want to tuggle up is the collapse element. Ok, now here we have to clear that this element is actually the collapsible element. So at the Koloss, off the collapse, that is really perfect. Now what I'm just going to doom or is actually deciding another attribute the target attributes and equal to Okay, so there I'm deciding the hash and then the c l a Okay, this is the idea of the C l A. I just added their the target C l a Okay, now this is totally perfect. Just go to the brother and refresh that. No, I got d click to collapse button. When I just click on the collapse, nothing is happening. That means something wrong. I did What is the thing? Which is wrong? I did. I have to search it. Well, there isn't nothing really big. Actually, we have to add the date our target not only the target. So by the way, you refresh that back. Now, when I disclosed on the collapse, the text is showing us manages Click on the collapse back Now it's hidden. That means it's truly collapsing and really perfectly working. But there is another thing which you must know before working practically on the collapsible, adding in a tag and now just adding an actual ref and here at this time, in the setting a single hesh than just covering the area. And then what I'm just gonna type is due kulic this link to collapse. Okay, so now what I'm just gonna do is actually just adding a data tobel okay, did a total variable, which is the attributes, which is really necessary if you just want to collapse something. And now we don't need to put the data target in the A tag because instead of the data target, when you are in the attack. So instead of the data target just mentioned your writing in the h ref as the rule off the a tag. So here I'm deciding the i d. The i d is c l a. To. Okay, So what? I'm just going to do is going down. I just teaching because I just wanted clearly that the data target is not necessary or actually not workable in the A tag. That's why I just teach this. So there I'm just setting the I d. You know what is idea? Actually C l A. To now let us type the text, which you just want to shoe what anyone clicks on the click this link to collapse button. So the new data is hair. Whatever you type, it's upon you going to the brother and refreshing that war. Now click during the link to collapse. Okay, when I just I'm just refreshing that now why It's just visible because I didn't at the close off the You know, that collapse, which is really necessary now refreshed that back when I just click on the link. Now, if the text is showing when it is clicking back, then hidden showing hidden So definitely it's working really perfectly. But one thing mawr, you know that the amenities refreshed that no textures visible for us. But if I add another new class t i n and saving and going to the browser and refreshing now you can see that this is a collapsible element is visible When I just clicked back. Now the texture is removed. But when it's clicked back again, the text is visible. Actually, by using the iron Ted, we can show the text by default. The mean is that by default the text isn't hidden hair because of the i n. So I hope understood. Well, we can use the iron hair as well in the A tags element. Whatever you want. I hope you understood about the collapsible learning in the next class. We learned that how to apply the collapsible is on the panel so good buying state yield. 23. 21 Panel Collapsible: Hello and welcome back. So, guys, there is something more to learn about the Bootstrap. Actually, I just want to teach you how to apply the collapsible on the panels. That's why I didn't lead this one's panel while instead of making the new one simply just copied the 1st 1 and ah, legis space this hair at some extra spaces. And then now just decide that what's one of the element inside this panel should be the collapsible and what should be the button. So the 1st 1 should be the button, and this element should be the collapsible element. So there, first of all, the page heading should be the button formatting the A tag. Not the button, actually. But a tag is perfect for this case. So well covered that and go there just had a tag, the ending a tag there, then go down. This after the pain will hitting this creating new day. Okay, why do some things creating the new Dave? Because I just want to should make sure that what is the element should be collapsed. Well, they collapse, and then the panel collapse the specific. Alas, to make the panel collapsible now the element that you just want to be collapsible. Just paste inside this panel, collapse the booty and the food. Or so let us cut this and press this hair and let us a justice as well. So this is apparently body and the panel food or well, I just have to add 90 hairs will because you know that we have to have the i d to linking up the element and its button. So there I'm just typing c l a. Three and is going to the top. And here instead of the target attributes, you know that in the attack we have to use the X ref. So I'm just using this yearly three hair, then pressing in a space and is getting a cool loss and then adding some kind off obedient effects. But instead of obedient effects directly just at the data togo and then what you want to be Tuggle the collapse. Okay, Now save that. Well, the panel defaulted style. That's so good. So I'm just adding the success here instead of the simple panel default. Say that. And now I'm this opening the browser refreshed that one and now you can see the panel heading here manages golconda hating. It's collapsing perfectly when I disconnect back, it's going as you can see. So now if you just want your element, uh, collapsed directly legis put the i n Now refresh that one. Now you can see that you're element is is is not hidden actually by default. But when you just click there that to the panel having its hidden So I hope understood about the panel collapsible How to make the panel collapsible easily. And guys, definitely we'll learn some more things in the next last state Yoon and goodbye. 24. 22 List Group: Hello and welcome back. So there I'm just gonna teach you some more things about the bootstrap like this president , or and actually, what I'm just gonna teach you is the listing how to create a list in the bootstrap in the way of the bootstrap, actually. So, first of all, I'm beseeching you to make a less to using the jewel technique. Definitely. We used the U. N for making lists, by the way. Now here is a close attributes. I'm just gonna add value off the class as the list group. Okay, Save that. And his press aumentar at the ally as per required for the UL ended The class airs ville. What? The class should be list group, but one more thing. The item list group item here on the setting, the text. This is the lift element. Duplicate that multiple times. OK, go to the brother and refresh that. Now we got the list looking really perfect. Definitely. Well, if you just want to make the list group by using the live tags with some more techniques, I'm deciding the deft agree begin at delis groups in the Detective Bell. So first of all, understanding the cool loss. And then what? The Valium. Just putting in the classes. The list group again. Okay, The same thing going inside the Dev and adding some Maytag's as ref the hyper reference and then discovered that. And then this type of this is the death list element. Whatever you want to type to clarify that there is a little different. And then it is going to the A tags the starting tugged attack of the A and putting some colossi as Bill and then just type list. You know that what we have to put left group I Tim saved that and go to the brother and refreshed that. Now you can see that they're easy, lest hair well, just replicate that and now refresh that won't know why. I just put it. The A tag is because I just want to make sure that we were just hovering something. Now the whole area is the list. When it is click anywhere, I can be accessed anywhere. If I just put any address there. Well, there is something more interesting we can do with these lists, both off the list, sexually justice, adding any space and again type the list group item. But now, don't end it there. This other hyphen and type in full. Any effect you want, you can put there. Refresh that. Now you can see that painful has been applied there. If you just type danger or any of these tile save and refresh that now it's it became danger. Why not? I just copy this one. Now I can't simply paste this hair as well or anywhere you just want. And then just remove the info. Just put the danger instead of the info saved that and refresh that. Now you can see that the danger is there. And the info is hair. Well, something more is there to make the list group more interesting and more interactive to the user. Actually, I just want to add the hating and the text of the hearing interlace group. So let us at the U l. Okay. Now, I'm just going there on the 1st 1 The starting tag of the U l and this typing list group again The same thing again going inside and typing. L I Okay, covering that and going to the here, going here entering the same thing. You know that the class off the list, guru. Everything. Everything should be the same list. Group item now going there. Insults and tabs. Now, I'm just pressing inter because it's gonna put something here and what I just want to put edge fool. And then here I'm visiting the text off the this. Yeah, the hating anything. Which would you just want to put their now at a colossal ville? What? The class? I'm just going to put its list Go item hating. Because this is the hating one. Duplicate that one. Now, this shouldn't be the hearing, So this shouldn't be the ash four. I'm just typing David there, and they're officially I'm removing the at four a cell. And then I was removing the hating because there should be the text. Okay, this is not the hating this text. So here I'm eating the paragraph. This is a paragraph. Whatever you want Just wanna put you can put now simply refresh that now I got a new hating . Now one more thing that if I just copy this one and just paste this here and here and save and refreshed that now you can see that there are multiple groups off the lists. You can see actually, not the group off list. Actually, the group off hating and the multiple groups off the hating in text is there looking really perfect. Now I'm just gonna go to the note pad and actually this pressing enter I just want to teach you that how to make this type of less using the Dev tags. So press another inter and add the date here and it's go to the 1st 1 tack of the dead and then you're close again. Just declared that this is a less to group. Belled is going inside this list group and definitely have just want to make theatre off again because I just want to make the list selectable or actually accessible. So now they're just simply hash and pressing a space in deciding the loss off list grew, everything should be same. I tomb Okay, you know, save that. And in this one, and they're just had another thing. And what I just want to add is actually pressing interim, just adding some gives here. Okay? No, this one should be another cloth. And what the problem is putting here is just the list group hating, looking perfect. This duplicate that wall and this type the text. Okay, Now they're just make it. The hearing so removed the Devon just type at full and for the first ones tag, do the same the etch full certain industry at full and then just over there and at the item in the 4th 1 area. Okay. And for the text, I'm just gonna add some other things. Is the pair rock graph Whatever you this prefer now, refresh that will. Now you can see that you just created only one hating. So for now, I just have to do one thing That this copy this a tag and paste this here, here and here. Save that back and refresh that. Now you can see that there are a lot of hitting looking with a perfect, but something's wrong here. You can see that these are really smart and they are taking on an extra space because list group I term this is really necessary, which I just didn't put before. Well, as I say that everything is the same, but I just want to teach you some new things. That is why I just teach you this one of L D. Um, making the list group David Bill, I Tim. Now just put the item with the every list group. This group's item, actually. So there I term and this is the last ones element. I hope I term now that is perfect. Now again at the item. Saved that and go to the brother by refreshing this one. Now you can see that it's smart as just this one, and I hope understood how to make this one as well. And millions of mooting the next last stay tune and goodbye. 25. 23 Collapsible Group Panel: Hello and welcome back. So you've learned about the less groups a lot of times, but right now, I just want to come by in the panel and the list groups with each other. Actually, I just want to make the collapsible list groups suppressing some winter and actually just creating the DIV here and then and in the class Penhall group, which means glaring that you're just talking about some kind of group here. Then just go more inside. And then just at a loss, another class and type panel panel default, whatever your type. You know, the best, Dave. Another classes here, panel hating, as you just made the panel, you know, about all the things about creating the panel and then here, the colossal panel title. Because I just want to put the title of the panel here. And then what should be inside this? That's four tie, actually, the A and then hyper reference. I led the hyper reference later on, but right now, the data Tuggle, what do you want to tuggle by clicking this button The collapse element. OK, which is a collapse element. We have to mention here in the a s rough dad. But later on, there they say to you covered that and just creating the ending tag. And then just type whatever you wanna put here visibly for the hating. So the panels guru Hey, also not the around, actually group hating. Now goed out off this panel hitting press, enter and then just create another div, which should be the group tag. But there were not going to mention that this should be the group. Actually, the collapsible area panel collapse. Okay, perfect. Add in space and type collapse as well. That is really perfect. Well, adding a space and ending in I d hear what the i d Do you want time just typing C l A. I think I just done the full so clearly, five whatever. Now going to the A tag and just typing the same thing. The ash. Nearly five. Definitely. This is perfect. Now going down and here I'm just pressing some interests here. And then what? I'm just gonna type is the now I'm just gonna put the UL. Okay, so here I'm just typing the list group, okay? And I'm gonna type the ally. Everything is really easy for you because you already knew about these things. I just want to show you that how to make the collapsible list using the collapsible panel. Well, well, there is the list group item. You already knew about that. Now, this is the let's number one. So lists number one, replicate that one. And this should be the to duplicate that one. That should be three. Whatever you prefer, you can type there duplicate and the full now. Okay, Now go down off this list group and and then just put the panel Hey, battle food. Or actually, if you just notice that we didn't put the panel body here because we just put it, the less group instead of the panel body. So they just put the d v l. Okay. And then just at a class off, you can understand that munis putting the panel food of now inside the penalty food or they're simply Oh, sorry about that. I'm gonna make that one again. Okay, Dave. And then what? I'm just gonna put it as the panel header. Is the saltpeter food or is the panel Fouda? You can put anything, whichever you prefer. Now go to the browser and simply refresh that one. Now you can see the panel group hating when I just called me hating. Now I can see the whole headings when it's clicked back. Now it's hidden. So guys, I hope, understood how to create the people here. But you can see that there is a lot of text which we just don't need. So for just guiding you in a better way, I'm just removing the previous ones data. First of all of these Lester or actually yeah, from of all the lists, this is more preferred. The movie. I'm just moving all the purpose list, which we just learned already. So now it's really simple, and only one content is here. Save that back and go to the browser and refresh that. Now you can see that the panel group hitting. Then it just click on dependable painting. I can see the data, and now you can understand that if I was at the iron here and then refresh that one now you can see that by default we can see the list. But by taking their we can do the same, like hiding or showing. But there was something more you just for You should learn about the listing. So for now, I'm just going there is out off this panel group Forget because I just want to create a new group there getting the devil. Okay. Actually, I'm just gonna make the accordion, which is really interesting thing here in the panel groups. So the panel group and then just going there and getting an eye de occurred the young no save and then press interim. And then the devil what the glass and is gonna put here is here adding the class and then panel panel default. Okay, saved that back. And this Desprez some interest and then Dave class, the another class, which is really necessary be hating. Okay, you know that be hitting is really necessary because we just put the data for we just put the clickable data here in the heading mostly No, Just go inside it and just put the F four and the H full inning tagen. Then here. First of all, I'm deciding the Colossi as well. The class of the panel title. You know about that already? Panel title. Okay, now going inside the H one and again that doing doing the same thing that ending the, um a n h rough And what I'm just gonna put in the HR offends the right now the simple ash. Then we'll just change us. So, by the way, data, now what? I'm just gonna put I'm not gonna put the data, Tuggle. I'm just typing did a parent. And what is that? It apparent is the according a young I'm just typing accordion one for the more security and more understanding. But when I just added the parent date apparent as according once, that this should be according one, because this is the parent of this. A tag. Okay, I'm just calling the parent. So then just, um, eating some data here and what they did. I'm just eating here. The collapse civil accord, the young no save and go down pressing Internet ing. Another thing here, I'm deciding the Koloss and what I'm just putting in the cloth is just the, um, Alaska collapse. Okay, I just forgot what I just have to put by the way, I was thinking something really entrusting. That's why I just forgot. So, by the way, I just type the panel collapse and the collapse. Okay, that. It's really perfect. Now what I'm just gonna do more is you know that there is the a tag. So we just have to put the idea here because this is a collapsible area. So C l one Okay, see? Or I think that C. L. A. Sex is more preferred now, just simply at the hash and the C l. A six. And then say that and just go there in the collapse area and some interns and line breaks and then just at the Dev. Okay, Now go to the first ones and then at the Colosseum and handle body. Okay, you the panel bodies here. What? I'm just gonna put terror in this panel body. I'm just simply typing. This is the accordion area. Whatever you prefer, you can type there. Well, the interesting thing in the according is that you know that this is a panel group and this is a panel. The I'm just copying the individual panel and pasting inside the panel group off a Cody and one. Okay, Don't forgot that. And then just paste this here. Save that. Now you can see that there are two panels now, the data parent is still the accordion one, but the actually booty is C L. A seven. And there is should be the nearly seven. Okay, now, this is really simple, I think. Well, again, if you just want to put some moors, let's simply copy this one and just place this hair. And then again, the did apparent is this. Tell according one. You know that this is the according one, but the Seeley seven not be. It should be dizzily eight. Save that and go to the brother and refresh that I got a laugh. Different Accordions, which actually not working. These are the Accordions means I just done some mistake somewhere. I have to find out that. And the mistake is a really simple that Here you can see that this is a simple heating. This shouldn't be just like the heating. It should be the panel hating. Okay, So save that. Actually, first of all, copy that one and paste there and there. Now save that and go to the brother and refresh that these are the collapsible Accordions. They're not working. That means there is something more, which is wrong. And we have to find out what it is Will you know that if I just go to the top? So the main i d This is the panel group, and you know that immunity is the We're really accordion. Now there is recording, actually. So the main ideas, the accordion one. OK, so actually, here in the A tags, all of the eight eggs weird is calling the Korean won. So if you just calling an I d. So you have to put the Hanshin on that. The very basic thing here it should be the hash. And there should have the has hash and then refreshed. Now, when a disc click on the collapsible accordion, it's still not working. So go back and fight out. Find out the next problem. So they're the data parent is here, and I'm just gonna add the daytime Tuggle. Okay. What is the data? Tuggle? It is actually just mentioned that What do you want? Collapsing? Let this copy this data total and paste this here in that. A tag in that. A tag. Okay. And there isn't any more. Save and refresh. Now click there again. Now you can see that they could see the accordion area. Okay, but when I disclosed on the 1st 1 The 2nd 1 has lost or actually hidden. And when I just click on the third one's now, everyone is hidden. Only the 3rd 1 is open. This is called the collapsible accordion. I hoping really stood about this well known some more things in the next class, so stay tuned and goodbye. 26. 24 Bootstrap Tabs: Hello and welcome back. So basically, you know that for creating the manual, we generally used the UL and Ally. Okay, In this way, we described the ul and then inside the U. S. We just put the allies, and then we create the manual, and then we apply the different kind of ceases, like float left and then the list style type and whatever creating the manu. But there is an easy method in the bootstrap. I'm just gonna teach you, by the way, hash and cover and then a dagon than here. The whole duplicate this three or four times whatever you want and then just changing the text because I just want to crude a simple and beautiful thing. Sophia Mobile in, uh, technology, whatever you want. OK, you know, save that and go to the brother. Here is the file. I'm just double clicking on the file now. I'm getting the file here. Okay. You know that this is a simple way off a menu. So now we have to use different kind of things. But you have You just simply need to add a class list in line and nothing more. This type list in line and save that and go to the brother and refresh that. Now I got the Leicester in line with the street in a specific gap. You can see that it's it has, Ah, simple margin. A patting which actually clear that we just made the man You Okay, so now something more. I just want to teach you about the same thing. So simply copy this one, then the UL and the space there. Okay, so now not the list in line. I'm removing the listing Diamond. Just typing. Never. The knave is deep. Part of the bootstrap. And we were just talking about now have tabs, okay. Now has a lot of things you will learn later on Means for them. For many purposes they used lab. And this isn't have have actually. OK, go to the brother and refresh that. Now I got the knave tab. You can see that when I just hover. The villages hover. The mouse there is in effect. Okay. And there was a line. A long line. This is called the another effect off the menu or the navigation. But if I just go there and applied the actually here, I'm just spreading any space. And I think the clue loss active. This is another thing now refreshed that now you can see that by using the active, you can see that there is a beautiful effect potentially making this as a tab. That's why it's called the tab. I don't think that it's looks typical, but there was something more you must know about the tabs and the menus. Actually, we can add the drop downs toe the to the tabs as well. You just learned about the drop downs already, But there I'm just gonna flight the drop down in the u l n l I. So what to do for this case and here to apply the drop down, we have to think, for example, I'm just gonna ply the drop down to the Mobile, the mobile ally. So let's has had the class of the drop down first. Then we have to do a lot of things. Things definitely I'll do this now. I just said the drop down and then it is going there to the A tag and, uh, leading the class off. Drop down many You. Oh, sorry. This lot should be troubling many. This should be the Dragon Tuggle Because the man you should be after the a dag before the ending dead off ally at some spaces. Why have you had this space here as well? To clearing that This is the specific Centex off the drop down, By the way, they're inside this L A. You know about the nested lists? Actually, I'm just going to create the nested list here. The u l. Okay, you l and cover that And there I'm going inside this You will. And actually, before going inside legis at the class off the drop down menu to the ally to the U. N and press A mentors and then the alive. Okay, that's not typical toe work. And then a tag at rough me z hyper reference and then cover that put other things as you knew and then put the hash air. And then here, let us take the home again or not The home actually mobile info, because I'm just talking about the mobile, you know, than the mobile info and then mobile technology, whatever you have. Okay, articles. That's Claire. But there's something where we have to put in the a tag. You know that we have to use the data Tuggle and then here drop down. And then just after the mobile, just clearing for just clearing that were just using the grab down. But before that, I'm just going to the browser and refreshing that. And now you can see that there is a mobile. When it is click on a mobile, I can get the drop down perfectly. But actually, I just want to clear that the mobile has some kind of dropped down. So I'm just going to the note pad back here and then getting the space and typing and its span. And then there's simply getting the cloth of the current. We have learned about the count already. Okay, Now save that and go to the brother and refresh that. Now there is a carrot sign which clears that there is something inside the mobile When I just click unnameable. Now I've got the drop down. I think this is perfect and you've learned a lot of things about the drop down, as you must know. So we'll learn some more things in the next class stating and goodbye 27. 25 Bootstrap Pills: Hello and welcome back when this glass and is gonna teach you about the pills for creating the post. He used dul again, but the pills has some different style. I'm gonna show you how to use the pills. And what the difference between the pills and tab? First of all, I'm just going inside the Allied again. That's creating the attack. Okay. And then just putting the hash. You know that Why I'm putting ash, by the way, here, I'm just typing home duplicate. And in some fear, whatever you want to type, you can type here, Sophea. And there I'm just typing technology. And then they contact us. Whatever you want to put, you can put here contact us, Norm. Just going to the u l tag. And here adding any space and adding in additional Kloss off knave first because this is a part of the never again. And now if you just remember that we using have tabs. But there were using the pills. Go to the brother and refresh that these are the pills now, pills just looking like the tabs, but definitely here we have the ability to select the actually, However, any element but something Mawr. If I just go there and just put a colossal effective No. The differences when I just refresh that now you can see that the active class is it's like a primary. And here, the tabs, the active glasses, just like the tab. This is a difference between the tab and the tills pills, actually. Well, if you just want to create the drop down in the pills So again, just doing the same things for now on this copying the UL with Navin of pills and pasting here, saving and actually there. I'm just gonna choosing the, um t technology. So here in the L I. First of all, I'm just adding the class off the drop down, doing the same as they did before in the nappy tabs here. You know that adding the class of the drop down and then rub down and then just going to the extra for the a tag. And this putting the ah class off, drop down Tuggle and adding in his base in there. Amazing. The data. Tuggle. Okay, drop down. Okay. Saved that. That is perfect. And then is going there because I just wanted at this pan just actually the arrow to clarify that this element is ah, actually has some kind off carriage. Now that is perfect. Now what I'm just going to do more is just adding in its pace. First of all, adding in enter here the line break and getting a tab and then going there before the l A. After the eight had okay, this maintaining this on the perfect position in here just starting the UL. You know, everything is this is just seem as we did before. Okay? I just added the u l And here I'm deciding the ally they should be and I should be correct . And then the a tag hyper reference. And at this moment, I'm just adding the hash cover that and then the, for example, the computer technology. And then just suppose I'm just typing here the mobile technology and then the in Vyron mental environmental technology. But I have no idea Whatever. I'm just typing. But refresh that now there is the another new thing. But you can see that the menu is open because I didn't add the class off the drop down here , which is really necessary. Drop the down many. You saved that and refresh that. Now, when it is click there, I can get the menu. This is really perfect and really simple to create the menu. The drop down menu using the pills. So let's learn some more things about the pills. I'm going there and actually just simply copying the 1st 1 This one. OK, because I just want to show you some more things. This carping, this one's Palin just pasting just about after the last pill, the drop down spill. And then there's adding another cloth they never checked. OK, save and go to the brother and refresh that. Now you can see that the hover Manu the hover pills is called the Navis Tag, which is really simple again, just copying this one. And then I just want to play another class. The removing these attacked completely with knave as well, now going to brother and refreshing. Now this is a simple but if I just had the knave just to fired no save and refresh data, you can see that the money was totally justified according to the screen, and it's prided much as need, So all that things are just called the pills. In the next class, you learn some more things in the bootstrap, so stating and 28. 26 Bootstrap Dynamic Tabs and Pills: Hello and welcome back. So in this class, I'm just gonna teach you some more things off the bootstrap. Actually, you're just about to making the dynamic pills and tabs. First of all, at the Colossus off the knave and never pills. Now go inside the UL and add some l I actually I just put it the tag, which is not the actual element. Now A and then covering that and him this typing home again to placate. Just forget the whole. Or for now, just get back it. Because there was something more we have to put in the main A tag, the data Tuggle. Okay. What do you want to tuggle here? Pill. Okay, No save. And there I'll just I'm just putting the p one here at this moment, duplicating Then I'll just clearly that what a p one? Then just go out of the Juel For now. I'm just going to check on the brother. Refresh that now you can see that it's applied, but actually here I'm just creating the dip tag, okay? And going inside the diff tags. Ah, forest element. And now just type the tab content. Okay, Now go inside. This Dev and just put some other things. Actually, this is a group off multiple lives. The tab content is a group of multiple tips gives in here. I'm just typing. This is the P one div means I'm talking about this one. This should BP to be treated before. Okay, this one is the dp one's dead. Now there we have to add some Colossus is the tab pain and then adding any space and adding in 90. So what is the idea for the p one is P one? Okay, Now the idea is a linking between the both of them and then simply duplicate that four times p two p three p four p to be three p four save and go to the brother and refresh that now when it's click on home, I can see this is the P one day when it is click on Petri. You know, this is a P three p two p full. Everything is working Fine, But there I just want to see this l the element the pans in the fading mood. Okay. I just want Teoh. Ah, I'll show you what I just want. So simply paste the fate close that the all elements refreshed that one again. Now, when it is cooked at home, you can see that the P is coming with a softly okay and going really softly looking perfect . You can see that in fearing more and then going back to the note pad and which one you want to open by default, for example, the Petri. So let's just at the class off the I and to the P three and go to the brother and refresh. It's not by default opening. And actually we have read another class, the active colossus. Okay, now going to the brother, for example. I'm there. But when it's a French now you can see that this is the P three days. Okay, whenever a little fresh. But here, this is not mentioning that which ones pill has been collected automatically or by default . So there we have to add the same thing the class off active. Now save and then refresh that You can see that the peat reductive but united stricken area . I can't change the focus, but by before the p three. Well, the other thing is, do you want to get the same thing. The nerve pills and tab content in the tab A Not the pills. A For now, I'm just simply copying the tab content and didn't have pills. The both things okay. And just pasting this hair. Okay, Now first involves this is not the pills anymore. This is the tabs. Okay? And for the p one, I'm just typing t one for the perfect matching P t two t three t four. And here. Definitely. We have to change it. ID's t one t two t three t four. That is perfectly adjusted. Now, what is the data you wanna? Tuggle is not the pill anymore. It is the tab tab on the tab. Everything should be in the tabling of the pill way. Now save that. Go to the brother and refresh that. Now we got the kills. The tabs now dynamic tabs is just when I just look on the home, I'm getting the home and it just click on the home again Home. But the before soul It's opening the people and Peter and whatever you want. So I think this is working perfectly. So I hope you'll learn a lot of things in this class. You learn some more things in the next class. Stay tuned and goodbye 29. 27 Bootstrap Pager and Pagination: Hello and welcome back here and be container fluid. I'm just putting some more things. Some new things for the bootstrap. Actually, I just want to show you the pager Indep alienation. The both are really interesting. First of all, a man in the class of the pager and what is actually the pager is again I'm thinking we used the UL instead of addictive. So I'm just updating this swan and this one into ul and then just here adding ally again, alive and then the previous okay, and then here, getting in a tag as Bill hash cover, cover the close here in the ally, replicating. And they're in this typing previous. Okay, I think the class off previous and here meeting the class off the next, removing the previous and typing next here saving, going to the browser and refreshing. Now you can see that the previous and the next. But what are they the previous and the next? Actually, they are the lengths to go to the previous page or go to the next page or the next light or previous slide. You can use in what, what way you want By putting the right at ref. Well, definitely there. Just this child for now because there isn't any Edwards or there isn't any programming language we applied was why they're so far than each other to each other. Just because the main element the container element is so, writer, if you use the column like to and the column the to look OMG treat, then they will be so near just because off the apparent tags. So by doing this is just a pager in the next, uh, it step, I'm just gonna teach you about the page in nation here, the another UL and the class off the UL here class, paging nation. And that is putting the ally inside the page in nation. And then again, the same thing that go inside the the ally and put the hyper reference and at this time, the hash cover and then one to free fool five and six. Save that and refresh that. You can see that 123456 Actually, the pagination which we can add anywhere when we just create the page and for changing the next page. 123456 And how much length you get here. So this is really simple and really easy. But one thing more that you can see that this is not in the center. I just want the pagination in the centre off the page. So for this case, I'm just going to create a new div. Well, we've learned about the text center, which I'm just applying with this jewel text center. Okay, so they're definitely I'm just cutting this cd whole ul and it's pasting this inside this one, the text center. We have learned about the text center in the very starting classes. When we just talk about the text styles or something Now you can see that the page emission is in the center of the page. So looking good. Then I'm deciding the class effective here with the number three OK, just for showing you that how it looks when any of the classes active. Okay, you so you can see that it's clickable, it's not. And, for example, you just don't want to make the five number clickable. So at the class again and type disabled ET is really important. OK, fresh that. Now you can see that there is a sign off. No link or no click their disabled, actually. Well, now I'm gonna do another thing. It actually copying the text center and basting there, There, But just through time is okay. And then for the fools one Okay, For the 1st 1 I'm adding the pagination again, okay? And the pagination sm and there I'm not adding anything because this is a simple paging nation. The pagination empty, which is a by default, so don't need to put the pagination MD and then the page in nation. Okay, LG Okay, the page emission. Ask them And the pagination ambi which it by default Sedona don't need to put the page nation Amdy and then the pagination LG save and go to the brother and refresh this world. This is the pagination as them You can see that this is a pagination MD which is the body fall and this is a page emission lg I hope you've learned all of them so I need to go to the further class to learn more things about the bootstrap. Stay tuned and goodbye 30. 28 Bootstrap Navbar: Hello and welcome back. So in this class, I just want to teach you some more things. But there we don't need to continue floated at the top. Actually, we'll make the continuing fluid inside the element the knave element. OK, this is not necessarily put the knave tag. Begin using live tigers ville. Because we just need to add the class off the naba here. We're just creating and have. And now this is your choice that you use a knave tag or the general they've tagged. By the way. I just created enough. Dagenham is going inside this tag and then there. I'm just putting the container here, Okay? Because this is really necessary for the container at this time. I'm just creating a simple container. Then I'll just show you that What is the difference between the container fluid at the container inside the never bar. Okay, so inside the container, we have to create a day and there class should be the knave bar hater. Okay. I just created the hitter, and inside the hitter, I have to type something like, first of all, the a A tag and the class if a is the knave bar brand. Now go there, covered that and then put something like the boots. It's trapped. Okay, No, save that. And what I'm just going to doom or is just ah, going there adding in space and using the extra if you know that the atrophy is really important in the A tag. Well, just after the Haight around is creating another Dave. Okay. And inside this, Dave, I'm just creating the UL in this way. You l and then inside the, um I'm just creating a colossus off the knave knave bar. Never. Okay, now, what is the nab our It is actually a navigation which is inside the knave bar. Okay, not the tabs or the pills. Or what about so ally and then would be the first ones ally. And then just adding a class another class here, it should be the active. Or if you just want active, another one. So let's just leave it free, Melody a tag and that rough and then the you know that this should be a rough, and then the hash tag, cover an a and then hear what I'm just gonna type is the whole okay now duplicate that Just suppose I'm just typing self fair. Okay, music, Whatever you want to create, it's fun. You contact us, okay? It's no. Save that. And now which one you want as the active? I'll just teach you how and were, Well, this is a simple, never bar looking perfect. No, because it has no extra effect. There's a simple one. This is the This is the actually the logo title or the name of the heating. And these are the menus. Hearing is going there again. And then just going to the never ball the mean that borrowing. Airing any specifics, trying for the next bar? I'm just using the never bar default at this time. There are two styles for the left bar. When I just refresh that, now you can see that there is a big area, and then you can see that these elements has been covered in the color off the dark grey tool. By the way, if I just simply copy this one or just simply change the default in tow, inverse, save that back and refresh that you can see that the this is inverse effect, which is more beautiful than the previous one by the way it's upon you that how you use well, the new music should be the active colossus on deciding the active class with the music active, saving that end refreshing that you can see that the music collective it is looking like the active one. The other things are, if you just add some more few things for example, you decide didn't have bar another style of the nut bar and type fixed means you just want to fix your nerve bar. Okay, there are two sides. Your recon fixed your nap bar to the top and to the bottom, so refreshed that now I'm not getting anything especially special. But actually, when I just put the data so Aaron's actually fix, just try to put the data just after the navigation. Then you can find that when you scroll your screen, your hitter is fixed. Not it's crawling. So, by the way, you could type other thing the bottom as well. Now save that and refreshed that. Now you can see that you're Hillary's on the bottle. Well, this is not necessary to type the elements like the menu. When you just put the novel in the bottom or menu or the hater, you can type anything inside the Na'Abba. Well, the other thing is we can add the drop down to deny bar as well. So they're what I'm just going to do is removing the fix bottom to fix top first. Okay, now saving and which one you want to make the drop down. For example, the software. So at a Colosseum, the expected class, you know, they dropped down will use the same thing we could just dead before women were just talking about the nab our And then we have to add the colossus with some of the things like this a tag. And I'm just adding the drop down Tuggle clause here, okay? The other thing is the data Tuggle, You know that if you just used the drop down, then we have to use the data Tuggle, Ezzell, and definitely this is a javascript element. So then we decided to drop down, and the Safiya and the hyper reference should be empty or just like the hash. That is really perfect. And then, just after the text took it after this, after text or whatever text legislate this panto clearing that you want, You've had it. Something like the drop down means omitting the class off care it, you know, but the carrot. Okay, now, just after just before the ending tag of the ally. I'm this presents a mentor than than just putting the u l Here. Okay, Now, for this one's you'll, I'm deciding the Kloss. Ah, in this way. And then the drop down many You okay now going inside the drop down menu and then just getting the ally ally And then here the a a drafty hyper reference. And then this is the hash tag again. Now a cover, the a And then here I'm just typing the for example. Um, Windows software's okay. Whatever you want to type, you can type here than the I'm just typing the Mac or Apple. Sophia. Okay. And there the desk tops our fear. Whatever you want to take, we'll save that and go to the brother. Refreshing. Now you can see that this after had a man, you or actually the carrot link. When it is click there, I can get the many Oh, the drop down menu. So I hope you truly understood about the drop down in the Nabaa. Roseville. So this is the time to learn some more things. You know that this is a bootstrap. This is the menu. Why not a just put? Yeah, I just go there and at another thing. Well, one thing where I just want to clear you that we can create multiple menus. Multiple menu, like knave. Now, Burnaby, I'll just teach you what I'm just gonna do. Then I'll just teach you another thing. Never bar right here. Okay? What the mean of the netball, right? Is your simple that when you just refreshed Now you can see that the never bar this element , which has enough by right, has are in the right place. Okay, Now, just simply copy this one and paste there. Okay? So here I'm just removing that. Have by right now save and refresh. Now you can see that the manual there and the second menu is there just because we just put it the never right with second one's menu. I'm just placing both of them because I just want to teach you and you should try this more and more will Something more, which I just want to teach you. And this class is if I just go to the top area and this is the container. Okay. Now you can see that there was a big gap. Okay, just because of the container. But if I just type the container and hyphen fluid, save and refresh that now you can see that the gap is very tinny now. Well, in the next class, I'll teach you some more things about the bootstrap, so stay tuned and goodbye. 31. 29 Bootstrap Form Layout (1): Hello and welcome back. So in this class, I'm just gonna teach about the eagle strapped farms. So something Something about the forms. You must know that we can create the vertical farms. We can create the in line forms and really interesting thing in the bootstrap. And then we can create the form. Horizontal is horizontal forms. Means I'll guide you all of the tree farms off the form which is actually called the formally out in the bootstrap. The 1st 1 should the vertical form. Well, the default they off. Creating the form in bootstrap is actually the vertical form. So there is the container fluid, and I'm just going to create the form element. OK, I'm distorting the creating the form by using the form tagged in the informed tag and going inside or just before the form. I'm just gonna add the hitting by using the pager. If you just remember that we just talked about the page or in some previous classes here. The page also another page or page hater. Okay. Okay. So they are meeting in space and then the etch for each one. Okay? Whatever you prefer. You know the best about your need at one and youngest heading Bootstrap. Full designing. Okay, whatever. Now go to the brother and refresh. Now you can see that the boots drop form designing. Go back to the note pad and go inside the form elements. And actually, you hear, if you just remember that we have to use the table layout for creating the form, the perfect form, or we have to create a lot of CSS if you just want to create the if you just want to use the death for the forms. But here in the bootstrap, we don't need to create anything. Just need to type the Dave tag and then just mentioned the class off the form group. Okay, well, inside inside one group, we just have You just can't put two things the label and that the input or the tag, The other Paige form tag. How we can do that. First we have to add the label. Okay. And there, in the first ones label, I'm deciding the full attribute. And then there's putting the actually name. Okay? Anything you want to type, you know the best about the about your need there. I'm just going to put the input type. Um, text. Okay, simple. This is perfect. But when I just go to the brother and refresh that No, this is not looking like me. This one. This is a simple form element. The input tag without any bootstrap. So first of all, here I just have to take something just like your name or anything you want. And then the second thing is good in. Protagonist, put the class form control. This is the only class in the form elements inside the form elements for applying to the imports. Select tags and the the other dog like text area created by the bootstrap. Go to the brother and refresh that You can see that your name. This is your label. And this is the input tag when it is cooked there. Now you can see that it has a beautiful shadow around the element and looking really, really beautiful to create a form. For now, I'm just removing the container fluid. Okay? And then saving this. And now refresh that back. Now you can see that in form is little squeezed and looking perfect. Well, for the next element, just simply copy deformed Group one time or a lot of time when ever you want. Okay, so this is a name. This is your email. Whatever you want. Your email, your password. Okay. And deer confirmed Passport. Anything which you will just want to put password well for the email. And it's putting the estimate five's new element. The email for validating this text field. And for the passport, we used the password, which is the oldest emails A and for the confirming pass or definitely, we should use the password again. Save and go to the brother and refresh. Now you can see that there are three elements perfectly aligned with the perfect margin and patting looking beautiful. Okay, if you just want Teoh, make sure that if you if you just think that the height is that the videos were really huge off this, these elements let just put these elements inside the column, for example. I'm just going to the me inform tag, and there's putting the class off the column. MD eight. If you just remember, we just learned about the form elements about the currents. Now you can see that these they are squeezed 11. But I'm not gonna put the Colosseum because I just want to show you the form how the phone works. But the other thing is, I'm just gonna copy deform the complete form tag inside with their this inside element, by the way. And they're only one thing we need to do. First of all, refresh that Now you can see the new form in your name. And then But before that, I think I should copy the page hitter Advil, and paste it here. And then this type edge full at four. And the bootstrapped in line form. Okay, so now do one thing in the form tag adding the Kloss in Lyon. Sorry for the form and in line music, Forman. Life save and go to the brother. And refresh that. Now you can see that your name, your email, your possible in your conference password. Everything is in the in line way looking really perfect, I hope. Interested about creating the online form. The last thing here, the actually the last ones way to create a form is the horizontal form for the horizontal form. Led to simply copy this form again with the page hater. Okay? And they're pasted. And then just type the boots. Drop Hori Zon, Tal form Save this and then just remove this class or just a big the class into form for his uncle instead of the full in line horizontal. Okay, save this and then in the form in the every form group. First of all, let us make the label and input as a column for the label. I'm deciding the collapse off. First of all, the control label. Well, I'll just said the country maybe later on, because I just want to show you what it can do. It's directly at the coal MD two, okay? And then for creating the we have to create a new column for the input. So just simply at the devil and then just at the close of cool MD eight or 10 whatever you want. I'm just putting 10 and then just simply copy or cut this input and paste this hair. Now this is more perfect. Well, I'm just gonna show you what I just did. Refresh that. Now you can see that this is what I just created. Bootstrap horizontal form designing and then your name. And you can see that the both elements are in the horizontal way. But why we just at the, uh I just I'm just going to teach about the control label. We have to have the control label here for the horizontal Elements Control label. Why? We just use the control label in the label if you just create the home horizontal because you can see that this is this is the column which has two columns or this area has two columns, and this area has a 10 columns. So the two columns area is starting from the very left. But when I just put the control label now refreshed that now this isn't starting from the very right. So nearby the column 10 which is which I just want. Okay, so now just simply do the same with the every element. So for now, I'm just deleting these three elements because I just have to Ah, really than the form. So, first of all, I'm removing the text, okay? The extra spaces. And then just simply copying the form group and pasting this hair here and here multiple times I just based it. Go to the brother and refresh that Now you can see that it is looking more perfect. But instead of the form your name, I'm just going to change this to making it more beautiful. The email and the password hair resetting the passport as well. Okay. And this one is the confirmed password. Now, save that and refreshed that. Now you can see that Your name? Email Password. England. Impossible. All of them starting from the very actually ending to the very right. And it's starting from the right way. So this is what I just want to create. And this is called Inform horizontal. Well, there is this film anything in the form elements feel just talked about in the next class, so stay tuned and 32. 30 Bootstrap Form Elements (1): Hello and welcome back. So in this class, I'm just gonna teach you about some or bootstrap form elements. So for this purpose, what we have to do is just simply copying. Well, this is not necessary to create the form in the horizontal way or the vertical way. I'm just shooting the horizontal because this is the last day. Well, there simply copying this one pasting here. What I'm gonna do is first of all, just removing the confirm password and typing Commence. Okay. You know that they can't get the comments in the text area. We have to get the comments in the you know, first of all, just typing here. The coming well, one thing which I'm dismissing continues is the idea which we have to mention to clearing that the the label and inputs or in the link, though they have to do the i d hear, hear every and protect those who have the labels. So, by the way, go to the browser and refresh that I got the new element, the comment. But actually, I just don't want this type of element. Yeah, I'm living in removing the input because I just want the text area. Okay, Now go to the first tag of the area. They starting tack off the area and in surgical Asya and then put the full control. But just by putting the form control, the text area is now the element of the bootstrap and looking really perfect. Well, if you just want to add some gonna for all the I's also at just rahs and put the How much? Razi one, for example. 10. Ross. So refresh that. Now I got the turnaround here looking with the super. So for the next element, I'm just simply copying the form group again. And this basting there. Okay, so for now, what I'm just going to do with actually, I'm just in a type the chick books. So for the check box, we have to change their it strategy. Let just remove the 1st 1 The last ones element the texture, reality it's column and then go inside the comings. And first of all, remove this one as well. Means of removing the columns again and actually inside the label. Let's just put the input, okay, because I'm just gonna create the, you know, input and then type check books cover that. No, Let just type whatever you want. For example, First of all, I'm just doing one thing that pressing in torrential is putting a Dave. Or actually, I'm describing the label hair. OK, label. Another label is label. And then here I'm just there in the Kloss and I'm just typing control label and then ending in ST in column M d two and then him this taping that, uh, it kills whatever you want tight, you can type skills. Okay, now, here this is the first ones label, and I'm just mentioning, or instead of the label, first thing first we have to put a dead and inside this what I'm gonna do with actually having the close off the check box. This is really necessary to creating the check box. And now let's just cut this one and paste this hair with the science and their distinct here and now it is the check box. And instead of the comments I'm removing before area because this is not really necessary for designing purple. So, by the way, go to the brother. But before they're going to the brother, let this type html obligate or religious copy the whole check box. Copy one. And ah, paste, paste And one thing Mawr. When I just created the the one column here. So we should create another column as well, Because I'm not using the single checkbooks. I'm creating a lot more to hear the new clothes and the coal MD turn again. This is 21 this is 10. Now, inside the column 10. Just cut off all the check boxes and paste inside this now legis a justice. Now save and go to the brother and refresh. Now, this is these are the skills you can see and looking really perfect the skills. So what I'm just gonna do is actually Secondly, legis simply copy the whole form grew paced. Refresh. Now, this is a new ones elements. But right now I'm just adding another interesting thing in the labels off. Not this label. This level is just for just as the hating. Okay, this for the you know that this killing stating Butare inside these labels where we just put it the, um, control label here. We don't need to put the control label. Okay, Let us some of the control label and that just type the check box. Okay. Longest clearing that. We just don't need to put the control label there and there and there as well, because definitely they are used unusable. They can't do anything in the labels. Well, there, I'm just getting the check boxes. And I just had the check box here, So not simple. Check box the check box in line. Okay, so now let just copy this check box and paste there and there, and then just go to the brother. Now you can see that this is sent simple. Nothing new there, but there. These are still the same. Just Why? Because when you just want to create the in line check box so all the labels should be in the single do. Okay. Now, just remove this check box and this check box labeled check boxes save and go to the brother and refresh. Now you can see that the external Aston Villa National and there are These are the vertical and these are the in line. This is what I just want to teach you. I hope you really stood about that. So secondly, I am just simply copying the whole from group because now I just want to teach you about the the radio. They already buttons. OK, so first of all, for this creating the radio, we don't need to use the check box. You need to use the radio, okay. And then the first thing, cause I'm just removing the multiple lines and then ledgers actually copy, but before copying, registering this and there is no need to put anything in the labels. Just directly go to the check the type and change the check box into the radio, and then let us select the meal, and then just copy the whole radio and duplicate. Okay, Now, this should be the female, you know, And there is the option to put the gender save and go to the brother and refresh that now meal and female. This is a simple way you can create. Okay? By using the name attributes, you know that we can create the synchronization and a length between them by getting the same name. Now you Can you Can you just refresh that now you can't selected put one time. Okay? You only have to select only 11 time. So now the other thing is again. I'm just copying the whole farm groups and then just going down. And what I'm gonna do is to first of all, removing the radio there. Okay? And there, and then dis cutting this one and pasting there and then in the label, I'm deciding the new class here cloth radio in line. And then let us copy this class and simply case this class hair save and refresh. Okay, Now you can see that the male female and there These are the vertical, and these are the horizontal. So I hope you understood both of them. But there is something more. I just want to teach about the form elements first of following its removing the extra space. And now this. Create at the new one. So again, just creating new form Dev the Div, actually, and at the close of the full group. Okay, go inside this and then just let us put the label first class. And because they are in the horizontal form, so here, form group and then cover that label. And they're just type, for example, the country or whatever you want to put because I'm just going to teach about the select tag so just going down. But before going down and descending on another one called MD two. Okay. And this should be formed. Not going. Okay, so there I'm just pressing enter and just creating the select tag, okay? And then just adding the class off, you know, the form control. Okay. The form control works on the select selector, adding some interest and then just adding the option, which is necessary for the select tag. So these are the options and then the first ones option. I'm just typing the for example us. Okay, UK. What won him? I'm just I just remember I'm just typing Afghanistan, Germany. Whatever name you would just want to put no problems there. Pakistan, my country. Save and go to the brother and refresh. Now you can see the US now. Interestingly, this is well designed. Okay? With the blue border and the shadow, the box shadow on whatever. So this is a select tag and I hope understood how it works There. There is something more in the form elements which we'll talk about in the next class state doing and goodbye 33. 31 Bootstrap Form Element 2 (1): Hello and welcome back. So in this class, I'm just gonna teach you some more things off the bootstrap form elements, you can see that they were the country, and there is the the select element of the country. But again, see that they're not in this in this sorting manner off of these elements. So how to adjust them? Go there. And first of all, I'm just adding the I'm just putting another div here. Class Cole M d 10. Okay, you know, putting this inside that and then just make this in this way, and then just put another thing, you know, that the control label and by mistake, I just put it the form group, which is not should be there. OK, so I'm removing that one so fresh that now this this is in the manner. But in the last, we have to put another thing. You can understand the thing, which is actually the Deb and then class form a group and then the button. Okay, so here I'm just setting a clause in the body. Beauty in and Gideon supposed the success. And here I'm just typing the click to submit and check this in the brother by refreshing. Now you can see that they clicked. Submit it there. But why not? This is there. And how to add this is there when we don't need the label? Okay. Interestingly, we don't need the label. So you know that we're just putting these ones by adding the label label getting two columns. So after the two column from the third column, these elements are starting, and I just want you this element to start from the third column, but I just don't want to put the the label as two columns. So how to how to manage this legis president space and actually legis. And then just go to the first tag and put the clause here. Okay, now, Cole MD 10. I just want to call every 10 here, okay? And then just placing the button, I'm just cutting the button. We Tre Vialli got the button and it's pasting the button here and then save that and refresh that. So this is something really new. But the new thing is when I just at the coal m d, it means I'm deciding the cool Amdy two. Okay, but not the two. Only the off set to mean is that lets us start the MD 10 after the MD to Okay, now refresh that. You can see that it's starting from the third column. So definitely you've understood about the coal MD offset to that. How it works. Well, for making this more interesting, we can do some more things. For example, BD in luck and save and refresh. Now you can see that the big black hair, the jumbo button which can make the form or entrusting well in the next class I'll just teach you some more than about the form elements about the validation of the form some state human and goodbye. 34. 32 Bootstrap Form Validation Style (1): hello and welcome back. So here in this class, I'm just creating some more interesting thing in the form elements in the bootstrap form elements. Actually, I'm just creating a new did here and then just going to the 1st 1 tag and then putting the form group, as you know, that this is necessary to create a form group or any form element. Well, there I'm just reading the label again. Label covered that and label and their own dis mentioning that the name. Okay. And then there's going down input, tie, text hair and covered that. And then I did this. Able to Colosseum disabled. Save that and go to the browser hair. Is the browser now refreshing? Now you can see that I can't type anything. Indeed, in this one, well, I'm adding any space and adding a class off the bootstrap, the full control. Now save and go to the brother and refresh. You can see that it looks has been completely changed, but definitely it's a disabled. So you can't do anything for making the status disable off any input or any select take. Like any tech of the bootstrap of the form we can use the bootstrap. Okay. The class of the boots for the other thing is, if we just want to validate your form, so definitely you have to do the JavaScript or the HTML five ways. But here, in this form, in this element, I'm just doing something just like validation. First of all, I just copied, you know, that they complete the class, and then just you know that there isn't There is input. And ah, hair is the form group, and then I'm adding some more things, just like the has feed back now. Okay? Feedback. Let us mention that which type of feedback do you want has, for example, I'm just typing. Warning. Okay. Save that. I just put it the morning here. No, I'll get the effect of the morning. And this is the input which actually has the form control and nothing more than that legend directly at this pan it. Remember the glove I convince you Learned in the I think the 14 or 15 class something. So by using the great Feikens V can verify cones Okay, of not the s second lef I could burning. Okay, I'm adding American icon here from the glyph. I couldn t she Okay, now then the full control feed back save and go to the brother and refresh that. Now you can see that this is just because we just added the has feedback has morning the color. Okay. And this sign is just because they decided the cliff I can hear. Okay, so the second thing is just remove the disabled because I just want you to show that how it works refreshed that so we can work on it. Definitely when we just clicked there, I can get the box shadow here, but this is not good. If you just paste this thing without any warning air or something, when you just validated form using the J query agents JavaScript PHP, then you should use this way to adding any kind of feedback. OK, but in the bootstrap, we just learning about this tiling. So there is a 2nd 1 here. I'm just talking about the success and there I'm not talking about the warning or something . I'm just typing, actually. Okay? Okay, Okay. Is for the success. Refresh that will. Now you can see that the ok sign and everything is should be the same form. Control feedback and everything is perfect, as you can see that the green color and then I just click on the green. I'm getting the same thing. Well, the other thing is, if I just copy this one again, faced there and then the form group has feedback has not the success. If it has the ever a room in any kind of error, just like so the error is done. I'm refreshing that now it's right, but it's still it's a check mode because I didn't change the Cliff Aiken. So the Cliff Aiken should not be the okay. Should be removed. The name of the cliff I couldn't remove. Okay. Refreshed that now you can see the clothes I closed. Thing that means something's wrong. Their removal, whatever. So in this way we can at the validation is tiles, not the validation. Actually, just the validation is tiled in over phone and definitely weaken. Used the fall in line way as well. If I just had the class off, um, full Oh, wait for a while. Full in line. Value already knew about the form in line. Refresh that. Now you can see that the whole farmers in the in line way. What? Why not? I'm just copy. I just copy this one and paste this hair and just remove the in line from this this new form. And then we have the both ways to create the phone. So I hope restored about the form validation InStyle's. We learned some more things in the next class, so state union and goodbye. 35. 33 REN Bootstrap Modals (1): hello and welcome back. So in this class, Vergis about learned some new things in the bootstrap with for violet is deleted The ending tag on the container in this class, I'm just gonna teach you about the model and entrusting feature off the bootstrap, which works throw, deejay query and the J crew and the bootstrap Js file. The boat files are really important. If you just want to work with the Modell. So let you said the class off mood alford, and then it need an i d. Any specific i d We have to put, for example, the model one. Well, the other thing is, it really needs a button as well. Button or a tag or whatever you prefer. I'm just creating the button here. Okay, so they are inside the button tag. I'm just putting click to view model. Anything you can type whatever you prefer. And there is something we have to mention in the in attributes way. First of all, the beer, Ian and the beauty in success. Any effect you want, you can get, Then we have to put some specific variables. Sorry. The attributes, for example, Data Tuggle, and then the value should be model. Okay, I'm just talking about the model. And the data will be trouble. Which is the Modell by clicking on this button? No. Which model do you do you want to target by this button? So day that how get And the model, which I'll just target, is the Modell one, which is actually a 90. So let us mention the idea. Signers ville, and definitely we just created the button. Now I'm just going to the mood l And there is something we have to put inside the model. The 1st 1 is the another class, the model content or the actually model dialogue. This one of the 1st 1 Now go inside and create other dames. And the 2nd 1 should be the boodle content. Now, the moral content is well going inside and putting other things For example, the model hitter model body and the model for the oh spelling mistake. Now the model hater duplicate on this should be the mood of body. And then this should be the model food or everything I just created and hand is going to the middle hater area and then just putting the H one tag. Whatever you prefer. That one is too big. I think the H full is the prefer size. And there, Modell. You can type anything as I say to you. Modell hater. Save and go to the model body. And whatever you wanna type inside the model body, you can type full example. I'm just putting inside the P tag. This is the mood, Al. And then AP always body now save and go down in the mood in the model photo area and legis type model Footer, save and go to the browser and refreshed. There's a button. Now I'm just clearing when I just went up, just clicking on the button. Collective you model. I'm just getting the model with the model hater. This is a model's body, and if the food uh well, this the food or should not like that, we can at the button as well. I'll just add the button later running this close. But the thing is that when I just click on the model, it's just showing us Ah, without any extra effect, why not be just at the fading effect with it? So fade, save and refresh. Now click there now you can see that now. It's coming beautifully by using the frayed technique and going beautifully. So this is just because we just added the class off the fade there. The other thing is, we should add the close button as well. You know that we just click here here or anywhere. Nothing happening. But when we just click out of the model, it's closing. Why not? We decide the close button here, as you generally see in different JavaScript applications, than if you just create that. Now I'm just going to the note pad plus plus and inside the model hater just before the text legis type or put the button. Or is instead of the derrick button I'm I'm just adding these pan. Or I think I should try with the button button one. Okay, now go inside the first tab of the button and had the class some unspecific classes. But there are not putting the beauty in or something. I'm just directly adding the closed class and then inside the button legislate the data. This I think it's spelling should be dismissed. Wellville correct spelling. If it won't work model, what do you want to dismiss by clicking this button. I just want to dismiss the model, okay? And they're looking at the X here. But this is not the preferred method. I'll just teach you the perfect method as well. Refresh that. And now I'm just clicking on the click to view model now, OK, everything is fine. When it is click there, it's closing. That means the data dismissed model and the class of clothes is working. But instead of the X, the preferred very is dollar sign times and the semi colon, the entirety. Let's click there. Now you can see this is just like the X, But when I just refresh and now I click. Now this is like the close button. When a disc licked, everything is fine. But this is just an entirety now in the food or I'm just gonna add instead of the text Right now, I'm just gonna add something like the button to close their well. For now, I'm just simply copying this one's button, the top button and pasting here. And instead of the close the times entirely and indirectly typing close and refreshing. Now I'm just clicking there and now I got the close button. Well, why the The button is just like that because there is the class of the close closed the class removed the clause, actually, and put Liberian the perfect one class for making a beautiful button 1,000,000,000 default save and refresh Click to view model. Now I got the button here. When it is click on the button, it's closing. That means the the boat off the buttons are working perfectly. And actually our whole model is working. Really, really perfectly. So, guys, in next class, you learn some more things, stay tuned and goodbye. 36. 34 Bootstrap Carousel: Hello and welcome back. So in this class, you just talking about the carousel. So what is the carousel if you just work on the council by using the J query? So, Jake Oracle JavaScript? Definitely. This is a J query slider, the carousel, which is a plug in. And then you have to have some jaquilla techniques to using the using the carousel, but they're in the bootstrap. You don't need to put the G a query techniques because the carousel is built in in the bootstrap Js. You just have to mention the classes. Has he knew that most of the Jake Yuri based on sorry, most of the bootstrap based on the classes. So for now, I'm just creating the carousel here. Okay, first of all this credit card todavia as I am doing and then add the Koloss. Okay, so they're the Carol cell slide, which is a class off mine. And then the date are spelling Should be correct data ride, and then the Carol cell. Okay, the data right. Should be carousel. This is just like the data Tuggle. So, by the way I am there's gonna add the idea which is really necessary so the I d should be on this typing Carroo spelling should be correct. Carousel one. Okay, Carousel one. And there I'm going inside this castle, and then I'm just gonna create the indicators, okay? For the castle indicators mean the 123 the values. I'm just gonna guide you when I just create. So there is the well, I'm not gonna use the UL here. I'm using the ol because there I'm just making the ordered list. Ally. Okay. And then the O l are meeting the colossal off the Caro cell. Indi Cator! Okay. Now going to the ally and adding the data target. Now, what if the data target is? Actually, If you just remember that we just created the i d. Let just mentioned the idea there. The data target and then data supplied to Okay, one in this way. One okay. Actually, there. I'm just mentioning that this is the 1st 1 when I'm not gonna put any value between the ally legis. Leave that empathy to And three All of them are working with the same castle with a mighty because they're inside this carousel, but with the difference lives 1 to 1 tree I'm gonna add before as well, That is really, really perfect. Now just go after the O l. And then just at the day, another dame and at the Koloss hair the Carol sill Inner. Okay, now at Edin Inter and then the div. Okay, and then just at the Koloss off I dio tail Okay, Perfect. Now there are making some spaces some interest and I m g Now what? The images. I'm just going to the folder, the bootstrap, and there is the images folder. I'm not going to use the I'm the one because this is a little bit bigger. I'm just going to use this image, this image and this image because they are just in the same size 23 and four k i n g 102 103 m before. So for the 1st 1 I am just adding the I am G one that Sorry i n g to doc jpg. And now this shouldn't be like the space adding this face looking not like the hyphen, actually. What? I just want to say Well, there one more thing I have to add to duplicate this wall and there should be zero. Okay, so zero. And then add a clause effective. Whatever you want active. I'm just activating zero. And there, this one is zero. And this is active. Definitely. Well, the other thing is, let's just cover this up completely. And at the vid hairs ville, I'm deciding Davidoff 600 PX for now. Okay, Ville, this is correctly managed legis. Simply copy this one and paste there, there and there. Lettuce little the active collapsed because we just definitely don't need the active. Active is only for the one. Okay. Anyone? Not he. Specifically one by David. This should be three. They should be full. And this should be. I think I should remove this one. Okay. And that one as well. Now, save and go to the brother and refresh. I got this thing. Why not? I'm just getting the carousel because there is something wrong I made. And I have to find that out. The first thing which I just made another mistake is the I have to put the images because you know that the images is in the folder off images here inside the bootstrap. These This is my folder where I'm just working and this is the images folder. They're okay now. You can see that it's working in the carousel way. Just wait for viol and then you will see that it's going fresh. That now the first images showing because I decided the I m g hair and then it's about to go. Come on, I just change yourself. Now you can see that it's changed. That means it's working perfectly. But I have to do the same. The I am I am a G E s images and then the same text hair now refreshed that one. Now we got created the carousel images. But there is something wrong with the council indicator because this shouldn't be the indicator. This should be the indicators. That was my mistake. Now save and refresh again. Now you can see that it's it's still not working perfectly, because again, another problem. I didn't see Carol Russell. Okay, spelling really matters. Refresh that. Now there are the there are the values you can see that okay. And the last thing which I just have to add to the castle just after the castle inner go out of the council. Inner. Oh, now this is a carousel. Inner I'm is going out of this, and then I'm deciding some a tag. Now, this is a perfect day of the creating a tag and hyper reference hyper reference should be. You know that I day Carol sell one. It's piling really matters. We just tested this out, and then the data sel, I it priv Okay. Delis like brave covered that. And and the A tag. And here inside this data, this thing is clearing that this a is the preview in the previous button of game. Now, just inside this ledges at the sigh in Okay, so P span and then inside the A Okay, just focus on this, By the way, I'm again using the cliff. I can't adding in his face. And Google if I couldn't Chevron left. Okay, No, save that. And then just at the area hidden true. Okay, you know, refreshed. Now you can see the back button okay to going back, but there isn't any the actually the front button or actually the next button. So I'm just gonna add that one as well. But the problem is that why it's not working. Oh, spelling mistake. Data flight. Now to simply copy this one and then just faced this hair and then you know that this should be the next, not the previous one again. Next. And the other thing is go there and there. Let's just type the instead of the left right now. Save everything is fine. Let's just refresh that one. Now you can see the next button and the preview button, but something more we have to do because these length are not showing the perfect in switch . I just want So they're actually I'm just gonna put the plus with the A tags, Okay? The previous one and the next one, the both of them. The glass is first of all, the right or actually, this is the left one. So left. Sorry. Left. And now, Carol, Cell left. Okay, Perfect. Now, simply copy this wall and paste this hair, and this should be the not the left, You know that they should be right. Save. And I just saved You don't know. Yes, I seem that refreshed. That and, uh, this is a still same, which means there's something more. Okay, Okay. Understood thing. This shouldn't be the left. Actually, there is the left. I mentioned this should be the control. Carcelle, Carousel Control, Not the left, Right, Because I just mentioned the left and right here on this shouldn't be left. This should be right. So now, refreshed that now you can see that the right link on the left link. Okay, so now this is what I just want to show you about The Carisa Will and will, by mentioning it's hiding, read or decides You can create the perfect one. So I hope interested about the carousel and will earn some more things in the council. For example, adding the captions and other things the text in the next class. So stay tuned and goodbye. 37. 35 Bootstrap Carousel with Caption: Hello and welcome back. So, guys in this class, I'm just gonna add the captions and the text or heading to these images, so everything should be same. I'm just adding the caption as I say to you. So how to do this? Just simply go inside the carousel inner. Well, first of all, I'm destroying you That this is ever, um uh, carousel. Some is going there and actually, before applying something new. I'm just doing one thing that adding this tile, I'm just putting 600 PX hair and then Oh, sorry about that. The village should be in forest. Now refresh that. And now this is the thing which I just wanted to create looking really perfect, I think. Ok, so now what? I'm just going to doom or is just going to the carousel inner as I said. And then this is the item active. And this is the image. So just after the image, just for us in a different type another Oh, wait for a while. What is happening now, Dave? Okay. And then there at the colas. Perfect. And then what? The glass here. I should add the carousel caption. Okay. Specific class for the forwarding the caption And then in this, I'm setting the edge three. Okay. And inside the history I'm just typing. Um, I am G one because I have no idea what is inside the I m. G. So I'm just simply typing and you won. And then this is the P tag for reading the data. This is the I am in major one off the off this carousel. Okay, save and refresh. No, something's bad has happened. What is this? Oh, I see. I didn't add the ending tag. Okay, the slash refresh. Now you can see that this is the image one for the council. Now you can see that there isn't any text just like that. But when I just clicked there, I'm getting This is the 1st 1 Well, one thing more that OK, everything is fine. One item. Do I have to remove the 3rd 1? Why? Because there are only three images. You know that 012 means three. Okay, refresh that one. Now, this is perfect. By the way, the 1st 1 has the caption, so why not? I decide the caption to the other ones. Just simply copy this caption and paste offer the image they're And they're now this image to image two and three and three Say, Oh, sorry. Not for three. Save and refresh. Now click there. Now, this is the I M g to click there again. I m g three. Okay, so looking really beautiful. I hope you understood how to make the council with the caption. So in the next class, you learn some more things about the bootstrap. Stay tuned and goodbye. 38. 36 Bootstrap ScrollSpy: Hi, everyone. Let just learn some more things in the bootstrap. So, first of all, I'm just gonna teach you about this scroll spy. This is a plug in off the G query, but I'm just gonna use in the bootstrap because this is built in in the bootstrap. So first of all, I'm just gonna add the navigation, the Kloss off, knave and have bar. Actually, you've learned about the NAB are already so this is nothing new in it. So now bar default. Okay, as I said that this is not new for us because you've made Didn't have bar already. So what I'm just going to do is actually creating the Juel inside the net about default. Okay. In here. Just typing. Oh, sorry. Just adding the Kloss. Never never Bar Never. Oh, sorry. Never. Okay, that is perfect. Now going inside the ally. Okay, now, just putting the ally here and then here I am, deciding the tag and Sharia cover. And there this is the what I should type here the home. Okay. I can type anything. Whatever. I prefer their understanding, the hash duplicating, and there This should be the software. Whatever you want to create you can. There isn't any problem. OK, so fair music and the contact us page. Actually, this is just, like a complete thing. You will like it definitely. Well, I did that now, saving and what more I'm just going to do is actually going down just after the u l and just creating the did here. Okay, Well, instead of the deal, why not? I just create a section tag, the estimate, fives, and new element the section and then here, adding the I d whatever I am deciding, I'm getting the home. So here, I should call it the whole okay duplicate. Or instead of duplicating this one, I'll just replicate this. After that, we'll definitely I can type anything inside the section. For example, I can type the H one, and then the H one covered that. And here the section the home section, actually home section save. Okay, Now, just copy this wall and pasted this multiple time 23 and four District beauty. As you know, that this is a software, so let just type it soft there and then music. And the last one should be the contact page. This is just like the single page website. So who software and then the music and then the contact. Okay, now, because these are all the ideas. So let's just mention this one as well. So now what? I'm just going to do one thing. I should, uh, change that. You know that these sections inside the Navajo this shouldn't be like that. Just cut thes and paste after the never that is perfect will just let just get back all of them now that it's more perfect. What I'm just going to do more is I'm going to the top in the head area and just creating these tile attribute. There is something I have to make from the style. That means, um I'm not gonna use the bootstrap that's uses for this case. Well, I'm just calling this section tag, and I'm applying the did at 100 W v w Okay. Vihd wv. Sorry about that. The VW and the height 100 v Etch, Actually, what is the V and what? All these values, Maybe you don't know about that because most of the people uses the percent. But if you know that the doctor best it will mean the estimate. Five, actually don't allows us to make the at i g h t spelling wrong. H g i g h t know this is what? So now we can use the 100% for the hiding external five. So that is why I'm just using the Veatch means the view ports, height. The view pores with this is just like the percents value. Well, definitely 1% means one view port with or heights. So I'm just using TV ads and we w This is the new units in extra five and CSS three. So going to the browser, But before going to the browser or something more I have to do is to adding the colors with all of them here on the setting, the background color. Oh, that ground light green. Oh, green. And then just copying these. This is tile and pasting There. Okay. And light blue. Okay, again. Just tasting this hair. And here I'm deciding the arrange. You can use any color, whatever you prefer, and they're understanding the gray. I don't know why I'm choosing the great, but Okay, let's just refresh that now you can see okay, home and everything is clear, but actually, this thing is not so cool. Actually, first of all, something where I have to do is to removing the container here. Okay, Because if you just remember that when we did, he was just talking about the navigation. So I say to you that people use the container and we won't put the navigation inside the container. So let's just get it back a little, okay? And, uh, all of dem Annville. Okay, end this. Now, everything is signed, but not everything. Actually, you know that I just remove the extra space, but how to remove the space, which is actually just after the every element that 10 pixels. So for removing that one Just ad another thing. The universe and selector and just mentioned the margin margin zero PX or simply zero and depending, you must know that the by default value off every element is the 10% pixels margin and taking pixels padding. Let us a fresh is still nothing happened. It is not working. Which means there is some kind of black age by the bootstrap. So Okay, no problem. I'm removing this one, and actually, what I'm just doing there is something more We have to add to the body area. Body tag. And what is The thing is, the data is pie and it's Karol. Okay, let just mentioned this curl and the data target dot Never bar. Let us mention that that because there I'm not calling the actually, you know that the i d they I'm just calling this closet. And now Barcelona just mentioned the dark never bar save, and then refresh that one. Well, one thing where I have to do is just pick up this one and then at the never bar fixed top, save and refresh. Now the number is six now, in the last thing which we have to do, actually, why? I'm just getting the extra space. Actually, one thing one, I'm just clearing that over scrolls. Pie is working, but before just showing you that how it works, I'm just removing the padding from the Etch One. Okay, Just why I'm just I'm just doing this. I'm getting this space experts face and margin because of the Etch ones, which I just added their refresh that ones Now you can see that everything is fine now. Well, now, when I just click on the software. I'm getting the software, but hitting is on the top. So why not? I just put here instead of the top, the bottom. Save and refresh. Now you can see that this is on the button. So this is the whole software music and contacted Spade. We can change the hitting. You know that the home. And then this is the software. You know that you get update the state of your information, whatever you have. And this is just like a new website layout music. Oh, I just typed me the two times. This should be the contact us section. The fresh data more now the music and the Safiya and the home. Well, what is new in the school? Spy? Just focus. That home is inactive. Now, when I just go down now, still the home is active. Then I just focus on the software section. Now you can see that automatically the software is selected, Okay, when it is go down Mawr And then now you can see that the music is selected automatically when it just go a little top the software when it does go a little down the music and when it's go to the section area. The contractors, this is called It's cool Spy that are traumatic. The navigation selected select automatically itself without clicking by Just scrolling. Why not? Why not? I do. You just use the inverse to watching the changes clearly. Now you can see that this is what this one is. Top black Now the music now the software and now the home. So this is what I just want to teach you. Call these crone spy. So guys, I hope in restored about this corn spy in the next class We learned some more things Stay tuned and goodbye. 39. 37 Bootstrap Tooltip: Hello and welcome back in this class, we're just going to make an interesting thing, which is called the to Tape. That is the part of the jaquilla Marie. But there is going apply in the bootstrap because this is built in. But there's a very little problem that we have to actually create the J query as well. Jacqui script. Interestingly, the truth is not actually the part of Jeker directly. This is a part of the bakery. You I the specifically library for the query, but there we don't need to college inquiry because everything is in the bootstrap Js. So, first of all, just do the simple thing here at the A tag or the button, whatever you prefer. Okay. Here I'm deciding the hash and data Tuggle to tip. Okay, title whatever title you wanna put cover and then the ending tag a pay. And then here to tape on however this anchor tag. Now, let us check it on the browser. That what is we got? The simple to tip. Now to tip on hover this anger tag, but nothing. We are just watching. It's because they didn't add decoding off the J query. Actually, so there. I'm just opening this corrupt tag and going inside this script tag and adding the dollar sign. And then, you know that first of all, we have to add the document and then that ready document already and then the function. Okay, so there are meeting the dollar sign again, and then the, um, here, let just mention the data Tuggle equal to tool tip Must be clear that if the outer Collins are the oh, sorry, not the Collins decodes. The outer coats are the single coat than the intercourse Should be double courts or if you used the double course as outer side. So inner side codes should be single. Whatever there, I'm just telling that the IV the data total is tool tip than this function to tape should be applied. Okay, so going to the browser and refreshing when it is Howard them out. Nothing. I'm watching. Why? Because the the element and the actually the text, which is ah, powering, which is actually showing is not showing because this is going at their at the top of the body, actually. So first thing first there. I have to add the title. I'm just entitled that this is the title and I'm just going to the browser and refreshing. Now it's still I'm not having anything. So the problem is that or actually, how to solve the problem just at the give here and then his style. I'm just having the Hyatt. Okay. I'm just setting the hide as the 50 p x. Okay. And then just setting the some text here and saving and refreshing. Now I got the height is now when it is Howard the mouse, you can see that this is the title. So this is called the tool chip looking really beautiful. But there is something more you must know about the tool tip that if I just create the tool tip in the button, I can do this as well. And interestingly, I don't need to create the J. Queria script again. Just one script for all the elements are the tool tip. You just want to apply the tool trips. So the data Tuggle, you know that the again to tip, Okay. Adding a space and then just mentioned the table title Onda, I'm just mentioning that this is the button. Whatever you want to mention you can and then just mentioned the class some specific classes for the button, which is necessary for could creating a beautiful button. So here the success. So there I'm just typing button or the tool tip element. No so fresh that now when I just hovered the mouse on the button, I'm just getting the same thing here and here. That means everything is fine. Well, interestingly, we can change the position off the tool tip by just clicking there. I contain the pollution off the tool tip from the A tag and from the button as ville wherever I want. I will just take the data. Place meant house piling, mistake place maintained, then veer. You want a place or data, for example. But, um, save and refresh now here is the top. Here is the button by default. Clearly off the data placement is the top, but I can mention the left as well over the writers. L so refreshing. Now I'm getting the text on right. And here I'm just copping. But I'm just duplicating this one and then I'm just typing. Right? Okay. No refresh. Now this is on the right. This is on the left so I hope you re screwed both of them. All of them are really easy to understand. So this is all these things are called the tool tip. You learned some more thing the next last stating and goodbye. 40. 38 Bootstrap PopOver: Hello and welcome back. So here I'm just teaching you some more. They just like the truth. It But this call it pop over this is that this is another plug in off the query. But as you know, that this is building on the bootstrap Js file. So, by the way, I'm just typing the space at the top because the aces not looking really good. So they space whatever you wanna type you can. And secondly, this after the button I'm just creating the pop over. Okay, this is just like the a tax. So definitely first of all, just creating the Etch Ralf and adding the hash. And then the data struggle in the same way we did refer. So, by the way, there we don't need to type the tool tape. We have to tide the pop over and then the title, whatever you want to show. For example, I just wanted at the title as ah, um the hating Okay, the title as a hitting and then the content. This is a specialty of the pop over that it has the content itself in the in the tag as attributes. Now, let just type the content. This is the pop over content. Okay? Not contact, actually content. Now let's just cover that one. And at an a a tag and then just loaded the brother. Sorry. Go to the e tag inside the attack in type the pop over save and just Ah, go to the brother and check that what you did here. We've done here. Pop over. Okay, I'm just going and refreshing Now the pop over. It's nothing because, as you know, that we have to add the Did you quit recording? But we didn't add. So now this one is a single line tack for the tool chip. And again, I'm just adding the another day query by adding the same same tax. Well, if you're not using the tool tips and no problem. But this Centex the Means Index, the document that really must be inside the script tag if you just want to apply the probable or the two are both of them. Whatever. You prefer the method off the popular, just same like the tool tech. Let's just put the square brackets. And then we're just selecting the attribute of the data Tuggle and the value should be popped over. Okay, be careful about the case. Sensitivity. No, don't type the are as capital or whatever. Then just go there after the period or dot legis type, pop over and then save this and go to the browser and refresh. Now, when I just, however, the most in the thing happening. But when I just click the hating, I'm just getting the hitting Texas. Okay, nice. When I'm just going back and there something's wrong. I did that. There shouldn't be the content. There should be the data content now. Refresh that back and the click the hating. This is a popular content, but now, wherever I click, it's not removing. If you just want to remove this again, take on the same link. Seeming to active sailing to kill Cancel. So this is what they call the pop over and again. The same thing I'm just going to do, going to the note pad. And actually, if you just want to replace the pop over, duplicate this one and then just at the data placement for the state replacing the data, let's just put up the for example bottom or I'm just putting left now. OK, we can add right, left bottom or whatever. Now, when it is cooked on this pop over, it's showing us at the right place. This is showing at the left place. The by default value is right and the by default value off the tool tip its top. Okay, so I hope interested about the digger placement. All these things are you you just already learned. But one more thing. I just want to teach you about this. So let's just go to the No pad were in the note pad. Actually, I'm just choosing this one. The second one's pop over and then it the data trigger anywhere as the attribute inside the tag and type. Focus. Okay, data trigger focus. Now refresh that browser when it's cook on the pop over, which is the first ones pop over. And this collecting anywhere. This is not going for just removing. We have to click are back on the link. But when I just click on this pop over now, I just click anywhere. It's just going okay and even on the body here, there, anywhere. Okay, just because we just added the data trigger focus. So I hope in really stood about this, which me, I just teach you. So in the next class, I'll teach you some more things. But one thing, Maura, I am thinking to teach you is just the hover effect. However, effect save and refresh. Okay, now, by hovering, it's visible by actually mouse out, it's removing. So I hope understood all these three ways to do the pop over, and we'll learn some more things the next last stay tune and goodbye. 41. 39 Creating Navigation And First Section: Hello and welcome back. So from this class, I'm just going to create a new project named Portfolio There. Okay, So I did something. For example, there is a portfolio folder. I did. I just copy DJs phone. Since Jesus folder here in the would fall, you are just paste it. And then I just created the index that actually move file. Okay, so what is this index production will file. This is the old one file. But in this in this index, it's HTML file. I'm just going to show you what it is. Let just click on that. And now you can see that this is the same like that one. But definitely, I'm just gonna change. I'm just gonna delete this day, because why? I'm just deleting, actually. How? I just want to make this project. I'm just thinking to create this project using this cross pie techniques, which you just learned in the in the basic bootstrap. So now let us create the navigation, and you know that it's impossible. It's actually not impossible, but really typical to put the navigation inside the container because the navigation needs the free hand and free space. So, by the way. Let's create a Koloss and never bar Adminis bait and then never bar in verse and go down inside this nut bar and let us create the now bar. First of all, I'm just drawing the UL you know about the you already. And then here let's just type the alliance inside the jewel. And in the 1st 1 Ally, I'm just going to put the A and H ref hyper reference and then the the hash tag cover and complete the A And here, the whole duplicate that and then this type of what we do and then what about me and then context me well, when this is a portfolio or the personal website, So why not? I just type what I do. So save that and go to the brother to check that it is perfect or no. So there is a folder, the bootstrap, and let us go to the portfolio open of the website, which you just created. This is what you just created, the meaning that there is something we must have to doom. Or actually, we have to go to the u l. And we have to Medical Asa, the NAB never bar. Now, Now, save that and refreshed that this is what I just wanted to create. And I just created definitely well for getting more in trusts. I'm just going to the Nef bars mean tag and this typing never bar fixed. But, um now save. And then just go to the brother to check. And this is what I just created. The Manu is on the bottom. That is really perfect. Now I'm just clicking. I'm just pressing an interim, then just creating some sections, You know, that we just learned about this chorus pie already removing the extra s. And then this is a session section we just created. Well, if you just want to convert this layout into the complete, it's crawling moored. Let us take the data is pie. And then these Karol Okay. And then data target. So there do the same as we did before the nap bar, and then save that Well, go to the brother and refresh that. No, this is what I just wanted. I just created. So the second thing is going to Decision section, actually. And then for the 1st 1 section, I just need to paste some images. I just want to show the image him. So going to the folder. And actually, I have some files in my clipboard. I'm just gonna create the folder, and then the folder name should be images. And inside these images, I'm just pasting the images. Okay? These images I just got got from the internet, and I'm just gonna fly all these images on my project. So, by the way, this product will be really simple and really beautiful. So in the first of a section, I am just adding the I d whole okay? And then style. Okay, The 1st 1 is towel understanding the back ground, and then I'm just typing. You are l covered that. And then here I'm just typing the hater that J p G. Okay, Now save and go to the brother. Oh, not directly. The hate images. Actually, the sorry, not directly the hater. The images folder is really necessary. There isn't anything. I'm just I'm just getting which means we have to do something. Mawr. And what is that will for now I'm deciding the background size and the size to the 100% and 100% now save and refreshed that page. Oh, yeah, I just got the error. What is the problem? I'm just getting actually here. I just have to create these tile tag, okay? And inside this is title tag. What I need to do is creating the section. And then here the bid 100 v. W. Okay. And then just going there and doing the same high it really hide, actually, V Etch Now save and go to the brother and refresh. Now I got the image now, just why? Because I just mentioned the hiding with of the section. That was the problem I was having continuously. So the second thing is what I need to do. Need to put some data here in the sections area. So? So I'm just opening this section here. Okay, So what I need to put here in the sections area, I'm just typing. First of all, I'm just putting the h one and they're just typing my poor folio. Anything Richard Just prefer you can type here. The p and the class off the P is covered. That Okay, now I'm just putting the class here. I'm just using the lead class. Why? I'm just putting the lead clause because if you just remember that we learned in the in the starting sections in the starting section of this course that in the Texas style that the lead can grow up the text, the paragraphs, text, whatever. So let's just read myself it also not celled self and contact me, Okay? Save and go to the browser and refreshed that. Now you can see the text it there. So for now, I'm just doing one more thing. Adding the padding here 50 p x, I decided the 50 p expending and refreshing that back. Now you can see that it's arranged. But the problem is that my text is not really visible for me to see or anyone to see it. So how it make it visible just under scrubbing a new class c l fight, okay. And they're inside the seal white. What I'm just doing is just ah, creating the color white. And then here in this section under supplying that won the Class C l white. Now save and refresh that now didn't happen. Why? Just because here I didn't mention the point period or the dot whatever you say. No, you can see that the text is white, which I just want. And then I'm just gonna ply the bootstraps class, which is the text center. So by the help of the text center, we can get the text in the centre, which is I just want So this is really perfect. Some more things that I'm just going to do is just adding some buttons here at the button off the text. Okay, so there I'm just adding the Kloss, but me 0 30 median and obedient D fall save. And then just type here, contact me. Save and refresh. This is the button meat we just added. So in the next last will continue the work. Very am just left. Well, I'm just stopping, so stay tuned and goodbye. 42. 40 Creating My Work Page: hello and welcome back. So in this class, I'm just gonna create some more things. So, actually, I'm just going to create a new section here section and just cover all these things section And then here I'm just gonna put the other details, for example, first of all, at the class off container here because the thing. But I just want to apply in this section. Needs the container class. Well, it is going there and then just creating some I m. G's before the MGs. Why not? I just put the deck. And inside this day, why don't I just type the page heading by using a page hater and do each one or any hitting you prefer, But I'm just typing my work. If you just see their this is forced one, the home a second. What I do. So definitely there should be my work. So here is the area, and after that is going after the and then I have some pictures here, as I just copied in the previous ones class. I'm just going to the portfolio and there are the images put fully. 123 and four. I'm just gonna play all those pictures here. So just directly open up the i n g s r c and cover that and they're just in majors and then portfolio hyphen one doc. Jpg. Okay, whatever name you have for your image, then just had another thing. The class off the I am G some nail duplicate duplicate triplicate. Four times I did duplicated. Now this one should be 23 and four For now. I'm just going to the brother and refreshing this one. You can see that the images are just looking like that. Okay, when I just smaller size, they're looking like that. Okay, when I just increase the size, they're looking like that, but the sizes too big, I'm going to the style area and just typing the i n g. Because I just want to put something. So after just typing the i n g. I'm just typing float Or I think float is not really necessary there. Just type the vid 300 pixels is preferred size for the images and then just open up the browser. The in Refresh that Now you can see the images are looking perfectly managed, OK, as we want. So one thing where I just want to do is to duplicating the image two times more. And then there should be two and four is Okay, Refresh that. Now you can see that all the images are looking in a perfect manner as we want. So the other thing is, I'm just going to the note pad again. And then here I'm just actually applying some kind of full capacity with the images. This will look more beautiful and make them It is more beautiful. And then the opacity and 0.5. Okay, find five. I just mentioned the 50.5 capacity. So open up the browser and refresh that now, when it is Howard the image, now you can see that it's hovering beautifully, but I just want to make it more beautiful because I'm just gonna ply the transition here. If you know about DC's history than this is the season story, that we can apply the transition to any element 0.5 us, actually, I just want to hold the element within the 5.5 2nd Okay, not directly refresh. Now you can see that it's doing its job softly. And if I just add another thing, the a in out save and refresh. Now you can see that it's going in and out by a thing. No, to make it more soft. This type here, the one and then refresh that. Now you can see that it's looking more perfect. Well, you can add the clickable effect as well there or whatever you want. But one thing more I'm just going to do is to centralizing this text by aiding some classes . There is the text. So I'm just adding the class off. You know that text center, save and refresh. Now I got my text in the center of which is looking really perfect. The other thing is, why not item? I'm just Ah, I just active these things when it's cooking What I do, it should show me the my work area. And when it is, click on the whom it should show the home area. So in the next next class, I just manage this or I think this is not really big work, so why not? I just do this in this class so well, this is the my work sections. So we're meeting the idea here and what the idea of deciding is the work. Okay, Any idea you cannot. And there this is the home I d. So let's just take home here and then this type of work here. And then what about me? So the idea should be about about and the contact me should have the contact. Okay, Now refresh When I just click on what I do now, you can see that the what I do has been selected perfectly when it is click on the home the homes selected. Okay, when I just go down, okay? Because I just chose the cruel spy. So when it does go down and it's going to be my work automatically do what I do has been selected in the next class will make me What about me or the about me page. So stay tuned and goodbye 43. 41 Creating About Area: Hello and welcome back. So in this class, I'm just gonna teach you some more things about our project. So, actually, I'm just gonna create a new section here, okay? And in this section, what I'm just gonna do is, uh, eating another class off container, okay? And going inside this and then just creating a new did hair. And just instead of fighting the class right now, why not? I did go to the browser and just go to the lips, um dot com for some kind of bluff. Textile recharges need, and I just want to play the text on the website. So for now, I'm just going down and just picking up this text, okay? Anything. Whatever you want to pick you can from this website, and then just copy and go to the brother. Oh, so they're not paid new pat and, uh, apply this here. Okay, Now go to the browser again and refresh this one. And there is the text which we were searching for. You can see the said or whatever, whatever, love text. But the second thing is, I'm just applying the thing is the actually close and then I can do multiple things. For example, I actually I just want to make the columns hair. Okay. You know that the, um we can apply the cold MP three cooling before whatever, but I have another idea. Well, why not? I this type here, the you will text. Okay, Now save. I hope that this is not a close off the csaid. Oh, sorry. You know this? Yes. Especially the bootstrap. I'm just going to the top. And here I am, this pressing enter and typing dot C Well, checks means column text, and then I'm disciplining the multi column. They call them count property off the C s history. And I'm just applying three columns. I just wanted three column. So now refresh that and the thing happening, which means I just have to apply the red kid. Okay, well, refresh that. Now you can see that the element is visible in the columns. Now, if you just want to increase the quality and the quantity of off the core columns legis at before or if you just want to minimize it than this, type three, whatever you prefer. So the other thing is, I'm just going to the note pad and actually here. I'm just, uh, giving a 92 it the i d And then here I'm just typing the about. Okay. Now, definitely. I'm just refreshing gets. And when it's cooking about me, only this text is available for me to see when I just click on the what I do, I'm getting other things. When I just click on about me, I'm getting the text so well. And then after that in this area, I'm just opening that one again. And this pressing an insurer and then just setting another new tive naturally, inside this Dave, this is This group is just like a group. This river is just like a group. And then there I'm just creating some panels. Kloss panel. Okay. And then the panel warning or any other effect you prefer you can add there now the panel hater, which is really necessary panel hater, hating, actually. And the booty. And the last thing is the food. Er okay, now, one thing more. I'm just applying the coal m d six. They'll save and then refresh that. Now I got the Coolum here. You can see that. Well, I'm just going back and actually just typing something here. Just like the at full. Okay? And they're in the edge for I'm just typing Web, designing anything you can take whatever you prefer and the body. I'm just gonna type. I do read the Zion. You can type anything here, Whatever you prefer. Now you can see that we're designing and I do Web design. And then, well, one thing where I'm just doing is to cutting this cool and this pasting. First of all, I'm just creating a role here role and inside this role, you know, I just made this role, and then this apply the cool here. Close, cool. Every six. And now let's just cut this whole panel and its face this here, and just add some extra space and then refresh that one. No, this is looking more perfect. Well, one thing more, which I'm just doing is getting some Be ours. Hair. You cannot the space by using multiple techniques. I'm just using BB are for this purpose. And then just, uh hey, I'm just doing well. I'm just getting another thing here. Adding a p tag. Okay, just putting this tag inside. P, I do web design and it's pacing there and then just glass. And, uh, first of all, the lead Refresh that now I do up design is in the lead and secondly, a meeting in space and typing text center, save and refresh. Now I do a design Well, something where I'm just thinking, Why not? I just said the image in the body. So I'm just going to the images folder and just pasting an image named www dot jp Any made you can add with any name. So there I'm deciding the i n g s r c and equal to you and they're and this typing the www dot jp g and then just cover that the claws on the setting is the circle. Okay, now save and refreshed that now I'm not getting the image because I just didn't put the images folder as link in Major slash and then refresh. Now I got the image, but the okay, why not? I don't got the circle because I just have to type the so cool as Ville and then just picked this up in the same True by adding the class of the centre block se even go to the brother and refresh. Now I got the image in the center, which which is just the thing, which I just want looking really perfect. Well, the other thing is, I'm just changing The warning is style into the, um, primary style. I'm just going to check that. It's good to know now it's looking perfect. So I'm just going to do Mawr's. Actually, I'm just going there and, uh, copping this whole column in the same rock here. Now, let's just see that I got two things here. Refresh that. Now you can see that there are two things. Well, when I just click on the about me, I can see I can get the things which I just want. But something more, which I just wanted to do, is the I'm just going to the top area. You know that these are the images, but actually these things applied in the whole images off the website so well, no problem. The sizes too good, but something where I have to add at the top off this area. Just, uh, before the container. This after the container section here on this adding the Etch to and then ach du again and this Typing my work, save and check by Refreshing. Now I got to my work here. Well, what? The thing I'm just gonna do. Adding the close off text center. Now, save and refresh. Now, I got the text in the central, which is just I'd want will the last area in the next class. But I think I should have something at the food or area as well. But I'll do in the next class, so stay tuned and goodbye. 44. 42 Creating Contact Area: Hello and welcome back. So in this class, I'm just gonna add the last thing the contact area for this project. This after the last one section. I'm just creating the new one. And you know why I'm just creating this section? Because I just want to apply the form elements here. So here, I'm just going apply the form. So let us create the form inside the section first and then just before the form element. I'm just creating the page. Oh, sorry. Not directly the paid hater. The big hitter must be a class. You know that hating Sorry, not the hitter or the hitter. Actually, you know the page hitting by the way. So here the page hater. Now there. I'm just putting the etch one. Any handing Any heading you prefer you can add now on reinstating the contact. Me. Okay, Now save and go to the brother and refresh. Now I got to contact me area here, but the text is too big. Why not? I decide the contact. Ah, I'm just going to check. X two is prefer. Okay, h two and h two. And then I'm deciding the classes. The hairs. Well, the class off the text center. Now save and refresh. Now I got the text center. Perfect. Now the other thing is undergoing to deform area and actually, before going to the formulary, I'm just going to the section area and a plank Thomas tiles with This is specifics section the background color, silver, any color you can apply that you have so fresh that now I got the beautiful effect here. Okay, Now I just have to add the Heidi hairs. They'll the contact now save and refers that now when it is click on the contact. Now I'm getting the contacts, and all the pages are there with the perfect manner now here. They shouldn't be in my work. I'm just gonna change this into the about me. Refresh. Now, this is the perfect ones, which I just want the about me, the contact area, and okay, the contact area is there, and what I do everything is in the perfect manner. What I'm just gonna do in the contact me after the contact me, I'm just gonna create the form Well, there, I'm just going to create the for forming to the first of all, I'm visiting the class here and it's tightening. Cool. M D and, uh, MD five. Okay, now, first of all, I'm just getting the input or the directly the form group here, do you Okay. So inside this day, from deciding the class off the full group, However, I just have to put only one element. But I'm just adding the class in the form group, the element in the form group, actually. So first of all, the adding the class off the form control and then the type riches text for this now saving and then just duplicating before duplicating. I'm just setting the placeholder here, Bill placeholder and then adding any space and just adding one more thing there. The insert, your name save and refreshed that one. Now you got the thing which I just want to play. That is really perfect. While I'm disclosing this lower lip sum's class which is not necessary or not necessary to place replicate that in duplicate that and now re first that I got the duplication by using the MP five, the whole element or really perfectly manner. Well, one thing more. I'm deciding here. The cool MD off said if you just remember that we just talk about the offset. I'm just putting the offset. Three. It means from the Food column. It should change its place. No, from the fourth column, not from the fifth Column refreshed that now this is looking more perfect. By the way, what? I'm just doing more first filed A since shouldn't be the name that should be E meal in 30 or email e mail and then this should be the subject subject save. And then this should be the email as a type. So save that and refresh that back. Now you can see the element which I just want and then just had last ones element at the Dave. And then this removed the text area and let just type the text area. And then here, the setting the Kloss what the class and is then added the form control. Now, save and then refresh. Now I got the area to submit the message. Well, there I'm just typing commence. You can type anything, whatever you prefer, and I got the comments area as well. So the next thing is, I'm deciding the raws and this typing 10 refresh. Okay, that is really perfect. The last thing is, just copy deformed group again and just faced this hair. And then instead of the form control, we don't need the form control directly at the Berrien and the beauty in, um, success or any effect you want. You're gonna play that. Just remove the placeholder and change the type from text to submit, because this should be the submission button. Okay, this is what I just want, but this is not really perfect. If I just add the median block hair instead off the simple median, refresh that. Now you can see that it's more preferred looking really great. So, guys, this is definitely what I just wanted to create and we just created You can see that everything is in the manner, and by changing the lengths, we can go there and buy a scrolling. You can see that the school spies working perfectly. So, guys, this is a simple portfolio website. You can making it it in your way. So still tude and goodbye, 45. 43 Creating Navbar: Hello, and welcome back to guys in this class. I'm just gonna teach you to create a photo gallery. Okay, So for this purpose, what we need to do is just actually going to the bootstrap folder. And there I just created a new folder name, photo gallery. And then you can see that I just copied and pasted the CSS Follow the finest folder and the Jays folder from the from the mean folder, the CSS funds. And James, you know that this one has the bootstrap dot CSS file, and this one has the J query and the bootstrap Js file. So all of them files are inside the photo gallery, and then I just copied some pictures from the internet. Now you can see that this image disseminated this and this as this lighter. I have to copy some more pictures as well, but these images are full just for this later. So I'm just renaming this lighter one. Okay? Now, this should be these lighter. Um, there is uranium area now lighter to okay. Any picture you can choose? Whatever you think. Slider three and last 100 speaking up and then this lighter full. Okay, I just created I just copied some picture, and then we just need to create this lighter here. So the first thing first, I'm just gonna create the navigation area. So legis type nab because the navigation is really important on any website. So I'm just going to be 1st 1 area adding the Colosseum and then the never far. Okay, never bar default. You can apply any style, whatever you prefer. Let just go to the brother and the the first is going to the ground and we have to open the bootstrap. And there this is a photo gallery. Let us open the index. Traditional filed. I got the, um, the navigation there. So what more is going to do? Is just creating another Dave and then just adding a close off container, okay? And going inside, then just doing some more things. Just like okay. The div and then the cloths off the dave and then just mentioned now brand well, the never run should be inside the never header. So there is another Davis required close. Never Heda And inside the name header just cut this Naft Iran and the space there And then the man you after the hater. But they're what I'm just gonna type. Is he photo gallery? Okay, now save that and refresh that. I got the photo gallery there. But this is not the perfect manner. Because these are not the simple never never. Haters. These are the never bar and this in a bar as well. Let's just refresh that now I'm getting the perfect thing, which I just want. So then what I just wanted to do is they're creating the you l and then just going inside and creating some allies going to the you will and just creating the nab Never bar now. Okay, I just created in now bar now. And the only thing is left is to put the X ref Okay, cover that and then just cover it again. And then the whole and duplicate And then the for example, the nature or the technology or the actually nature gallery is more perfect. Gallery. And then I'm just typing the science gallery looking really perfect. Saved that and go to the brother and refresh that I got the whom Gallery NATO Sorry. Home Nature Gallery and the Science Gallery. In the next class you will do some more things, so stay tuned and goodbye 46. 44 Creating Carousel Slider: Hello and welcome back. This is in that area. I'm just creating a day of destructor of the navigation. And then what I'm just doing is creating the class off container, not the container floated. OK, According to this tile, I'm not choosing the country and floated. And inside this I'm just creating some more things. The castle, first of all, in the air, in the class. If you just remember that, we just learned about the carousel already. Garrisons lied, and then the data ride should be Caro spelling should be clear, because this is really sensitive in this Palin problems. Okay, the bootstrap slider. Okay. A diet e this lighter. Well, there's go inside this festive, and then the time is to create the indicators for this lighter. Okay, so going there and deciding the class off the Caro cell in Decatur. Don't forget to fill up the SSL, and then there's go inside this and wanting more. I just see that I just didn't put the are, by the way, now, Bill and there plus or just remove the class because this is not necessarily directly at the i d off the slider. Okay. And then the Data's lied to the 1st 1 is should be zero. And the other thing is why I'm deciding the i d. Ideas there. I'm just calling that idea. So the thing should be data target, not the i. D. This is the idea, which I'm just calling there. And the 1st 1 should be active as well, so Oh, no. Directly just mentioned the cloth and then active. Okay, perfect. Well, the duplicate. 12344 times. This should be two or 31 to three. Now save and does go down just after the ol. Okay. After the indicators, this should be clear that I'm just creating the day after the indicator is not inside the indicator. So there I'm just creating the Dave and then actually here, the clock Carol sill in your okay. I'm just going inside this and now just this is time to create the elements. The Dev Okay. And they are deciding the Kloss. And, uh, I term and the 1st 1 should react there. You know that. I just, uh oh. I just put it the close with the class effectively, the every ally, which is not the perfect way. The L. A. The active class should be only the 1st 1 and they're also the 1st 1 If you just want to active anyone else, then you can use this thing. By the way, there I'm deciding the i n g the image SRC and the image is in the images full. And then this lighter hyphen zero or the one that J p. D and save and covered that. Now simply copy this one and paste, paste paste. Okay, four times I just pasted. Let us remove the active class with the every element that should be to this should be three. They should before and then this. Remove the active class from there and from there as well. Now save and is go to the browser and refresh. I got the thing that I just want, But something more we have to do is going there. Actually, you can see that the elements are working there OK, but only to off them or all of them. But why? The company is too much. But there is something more I have to do after the carousel. Inner I have to add. The other thing is the left or right control. So why I'm deciding the day of line that I just directly put the wretch ref the tag cover, and then the data slide. Okay, I'm just hitting the priv proof first. And then Well, they're just go there and at the slider again. Here and here at the close, off left, and then the Carol Cell Control. And after that, just go inside this and at another Inter and dangerous at this pan. Because I just want to add an icon here. So let's at the glyph, Aiken, Galef lifts icon, and then add in this basin type of life, I can again spelling should be correct and type shit. Ron left. Okay, now, just copy this warn and paste there and do the same, but just change the little things like this one should be the next. And this should be the right, and this should be the right as well and then save and refresh the browser. And then we got the lengths to go there and there. Everything is fine here, but we're still having more length. 12345678978 Approximately. So I got the reason you know that this should be the ending tag I just created as the starting tag. This is the simplest problem which is solved. Now refresh that. Now you're just getting only three ones. You can see that. Now. We just have to do only one thing. Actually, we have to correct this. Ah, and this make this in a perfect manner. Well, interestingly, you can see that they are in the manor, actually, automatically, if I just, uh uh make the website responsive or open the website in the mobile or something. Well, the other thing is, why not? I just create this. Ah, the end of the class. Here, call MD. Or the best is to create this one inside the deal. Call class. Cool, MD. Um, And the 10. Okay, now see that? And then cool, MD off set two old one, actually, after the one and will be ended to the one and then press some interest and then just simply cut this one. The whole council put this inside the Coolum. Okay. And this at a tab there. And that is really perfect. Refresh that. Now you can see that this is cleared. Now you can see that you just added the council and the perfect manner in this very center of the website looking really perfect. Some of the next class review at the other elements which it is necessary to create the perfect for the gallery, so stay tuned and goodbye. 47. 45 Creating Thumbnails: hello and welcome back. So in this class, I'm just gonna teach you some more things. But before going down, I'm just going to do one thing there that they never bar should be in the right place, save and refreshed that Now this is looking more perfect. Actually, I'm just gonna add something here and then going down. Just, uh, after the after this column here, I'm just going to create a new column. But for now, I'm just creating the raw first, declaring that we are in the next Rob by the way, raw and inside this room that's creating the death. And this, Dave, I'm just creating the cool M d and the full duplicated brigade. And now here in this, the 1st 1 them they and then just adding in a tag at rough hyper friends. And then, at this time, I'm deciding a simple science. This sign, you know, about the sign, the hash, and then the Kloss some nail. I'll this guy, Do you What is the thumbnail? But I should going inside the a tag, and they're just putting the i n g s r c i m g images and then everyone that jpg. Now save and cover that and go to the brother Covered that and go to the brother. Refresh. Now I got the image here. You can see that. But just before this raw, I'm just doing one more thing, Okay? They do. And the goulash page. Haider. Okay. Going inside this and adding the edge full here. And then here I'm descending the photo gallery saving and refreshing now Oh, I got be But I just created for the gallery there. So now what I have to do is to adding another Dave indefinitely. It should be in the class off raw. Okay, now, just actually cutting the whole caress als with the column and the space this inside this raw This is really necessary because off you can see that the text is their, which should be here now. This is perfect one. Well, what more of this gonna do is, uh, the container is there? Ok, now what word is going to do is actually just instead of the edge full? Why not? I just put a three. I just want to check the size of extreme, which is looking more perfect. So, by the way, The next thing is to copy the whole Coolum and paste this and paste is and remove the to the last two elements, which I just created first. Now you can see that I just created these elements. And now you can see that the the blue border around the element which is softly coming and softly going This is just because I just added the class off thumbnail here with the A tag . And just because this is the a tag so this is looking really beautiful. Well, the next thing is, this should be to this should be three and then just duplicate this one again. Paste, paste and paste. And then do 34 five, and six save and refresh. Now, I decided a lot of pictures here. This picture is actually going out of the size how to manage the size of the pictures. You know that every picture has a little bit changed sides. So for managing these pictures, just go to the top area and then just go inside the haid and then just create this Correct . Okay, So going inside this is script and what I'm just doing actually calling the i m. G and inside this I m g the vet should be. 01 thing where I just want to clear that when the image inside B, where is the data? Here is the data. When the image inside the Romneys class okay, really than the image inside the thumbnails class, Then this should be happened. Okay, so there, this will. Now I'm just adding 300. Okay. And then the bid, The height should be 200 PX for now. And refresh Well, nothing is changing. Just the mean is that what is the class is the thumbnail. I just put it the perfect class and why it is not working. Oh, interestingly, I just put it the script instead of this style. What is happening with me? This should be the simplest tile. Not descript. Definitely. You must know about that To refresh that now you can see that the images are very small. Just because I just put it the 200 refreshed now because of the 200 day, or looking in the perfect manner, but 3 20 and refresh 3 40 refresh. They are looking perfect in Wait for a while. There's a fresh mawr five and refresh again. Now, Now they're looking in the manner 50 refresh. Okay, the 3 50 The perfect size, by the way. Now, if I just changes JD hiding with now you can see that the element is changing the size and they are looking in the perfect manner, which I just want. The next thing is to create the food. Or so there. I'm just gonna create the food world. This is the navigation. This is a container inside the container or outside the container. I should create a food around the outside the container. So in the next class, I'll create the container and then some more things I need to do for this project. So we will do stay tuned. 48. 46 Creating Footer: Hello and welcome back. So there, in this class, first of all, um, that's going to create the food er and the next last I'll make the model for just making the image perfect. By the way, they're in the footer area. I'm just adding the class off. Never bar all. Why not? I just simply copy the top on the element the whole element, okay? And just paste this hair instead of the footer and then just subdued the novel to the food toe and the ending tag off the knave should be the food or again, because you know that the top ones I just changed. The second thing is I just don't need the ul hair. Okay, so just go to the brother and refresh that and I got the photo gallery here. Well, I'm just setting the mood. Things like never bar fixed, but, um, now refresh that now the number is fixed here at the bottom side with the perfect ones. But why not? We just apply. Well, the first thing first. There you don't need the Navarra hater who moved that one. And then just into the p changes at the class off text center. And there, this type the copy right? Reserved by Joe Perry's. Whatever you wanna type, you can let us refresh that. Now you can see that the copyright reserved by the job Parry's and then go there to the note pad. And at this tile. Okay, here, we need the petting. I'm deciding the padding off the 10 p x here. Refresh that. Now I got the text in the center where I just want, So this is really perfect and perfectly Aliant. And in the next class, we will just make the models. As I say to you, we have to create a lot of motels, so no problem. We'll just copy and then paste, so stay tuned and goodbye. 49. 47 Creating Modal: Hello and welcome back. So they that say to you that we are just about to applying the model there. So definitely we have to create the mood. Ells, this is the link, Ok? And after this length we are I'm just creating the model. Okay, well, we conclude the model anywhere because you know that this is the hidden by default But when it is click on the tag, this will show So first of all, adding the class of the model, the model and the fade effect and adding this faith in adding the i d m one Ok, because this is just for the image one and there the m one and then the data toggle. I'm the setting as the model because I know that the al just trouble the model. So there it is, the model Open it up and create another day glass modal dialog. Okay, go inside. This and that at another day should be correct. And at the Colossus off model content. Okay, Go inside This more Dave Colas. Modell Haider. And is it in the hitter of the image, for example, the image one okay and is going out of the hater This creating another Dev with another class. This is the model body. Okay, inside the body. What? I'm just putting the image SRC and no in majors slash m g one dot that j p g. Okay, save and cover. And then just at the Dev and then here the class off the mood l food tour and their of this typing. This is the first in major anything you can type whatever you prefer. So let's refresh. And when I just click on the 1st 1 they made, I'm getting the Modell. Okay, But this is not perfectly working. Actually, the image isn't showing. Their why this is happening is because this is not the image one that was just the I m. G. Now, when it is click on the image image is too big to see. Ah, so how to manage that? Actually, here I'm just going to the I m. G and adding a class off. I am g thumbnail by using the I'm determining what will happen now. One thing I'm just clearing that this was the simple come nail. And here we just called the simple thumbnails and the image which is inside the terminal of the same off the simple them, they'll actually riches applied on the a tag there. Really? The a tag if I just if I just go down Actually, this one, Okay, but this is not the thumbnail. This is the I am just thumbnail. And by the help of this, what will happen? Actually, this fill the image will adjust. Did in the mortal body according to the middle size. Refresh that. And when I disconnect there now you can see that the image is fixed in the middle side with the perfect sizes citing and the dimension. So what more and is gonna do is simply copying this element, the complete model and then just pasting inside the eight egg. Okay, there and then the This should be the M two. You know that. And then this should be the deal m two. And the other thing is data Tuggle model and nothing more. We need there. So this should be the M 12 ill and the I m g. Ah Modell and the civilian second image. Now, this should be the image to Okay, so now just say that and go to the brother and refresh that now when it is clicked on this picture, it's just visible like that when it is clicked there. Now, come on, let's open this refresh. Now I'm just taking their again now. I'm just watching the image. When I disconnect there, that image is actually really small. That's why it's just looking like that. But the image waas too big. I don't know why this is just visible with a really small size. I'm just going to the note pad again, and it's still you can see that it's having a lot of problems. That means something's wrong there. And ah, this is the tag. Okay. Offered the A tag. Were just pasting or actually creating the dead. And this is the A tag. And, uh, okay, the model is created inside the attack, which is the problem. So let's just cut the whole model and now just paste the model after the a tag, Their pace, the model. Now this is the really good thing, which I just want refreshed that now I'm just looking there. I'm getting the perfect size of the image, but I'm just clicking there. I'm just getting the perfect size of the image now. No problem, is there? Okay. Now again, Just copy dipping. And this after the attack. Okay, Paste the model again. Now, this should be the M three. You know, m three. And the elements should be m three and then just go down. And this should be the image three and the image three and then save. And, uh, this should be the This is the third image. Whatever you want to type, you can type. There isn't any problem refreshed that wall. Now, when it is click on the Tiger image. Now, I'm not getting anything. That means that something more we have to do indefinitely. We have to add the data Tuggle model. Oh, spouting mistake. Now, this is a model data Tuggle. Everything is clear now when I just go to the browser and refresh. And now when I just click on the image, I'm getting the image there. In this way, students again do the same thing like this. Copy this, Modell and then paste off of the A tag in this way and then at just this one as well. This should be m fool. You know, I'm full because the image for is there and I'm for again here. And then this should be the image for And then this is the fourth image for image, and there is the image full we have to use. Okay, as in the thumbnail. So the thing is, we have to add the data total Ezzell. You know about this thing, By the way, the mood l okay, now again do the same things. Hair with the image. Five lettuce inside the M d. And after the tag, let's just base the Modell And this should be five and there m five as the idea it is. And then the image five. And then there should be the M five as its thumbnail. Okay, then they're the fifth image. So this is fine. Go down. And for the last image, which is the I am to six. Let's just face the same thing. And then it should be six. And there the m six. Okay, the I d. And then you know that we have to add the data Tuggle, which we didn't add there a cell. So data tuggle and then add new space. And then we're just getting the poodle hair and just copied it from Modell and just paste this here and Edna ST there. And that the M six m six image six. And the image six uniformed is doing the perfect thing than the sixth image. Everything is clear. Legis refresh Now, actually, over creation has been completed. This is the beautiful photo gallery, which we just completed. Now you can create the other pages and then you can create the contact us page or any page that you want according to the need. So guys in the next glass of you meet again, so stay tuned and goodbye. 50. 48 REN Creating Gallery Using LightBox Plugin: Hello and welcome back. So in this class, I just want to teach you that we can use the life box plug in with the bootstrap by using some of these steps. This is not necessary to use the model here for the photo gallery. You just used the model, by the way. But I'm just gonna go to the photo gallery. And actually, I'm just simply copying this one and then just, uh, editing with the note pad, plus plus Or actually, just cancel this one now, and it's go there. And this is a photo gallery. Dis changing the name is to the nature. Just suppose that I'm just typing the name of the nature and just editing with the note pad . This one is indexed or that team also there's going to the top, the very top area. And here is the navigation. The nature Gallery. I'm just typing nature Direct demo. OK, so this one is the nature that active alive this coffee and it's basting there. The nature that actually mo on, then here it should be the index. The last demo. Okay. Oh, not double one. Now there. Update this one of the index last email and save and go to the brother and then refresh that. For now. It's just simple when it just click on the nature gallery. Now you can see that I'm just getting the nature as well. Well, this is a website. I'll just read about what I'm just going to do with this website. I'm just opening the note pad back and just going down. Actually, I just want to remove the Carroll school with its raw not from the next electable. I just let this mistaken. I'm just going to the nature dashed animal and then just deleting the whole raw from the starting to the ending. So then saved that and go to the brother and refresh that. So this is the nature hate nature. Okay, when it displayed on the home page Now I can see the carousel, but gonna to stick on the nature gallery. Now, I'm not getting the castle here. So, by the way, there is this still the Modell. But I'm just going to remove the model from the major that actually, you know, what I'm just gonna do is so guys, as I say, do that. I'm gonna teach you about the lightbox, the light boxes a plug in. Okay, so I'm just going to the website of location, tackle dot com and then here Let just type the projects slash lightbox do. Okay, look, attacker is the developer who made this beautiful plug in the origin Lightbox scripts. Eight years latter is still going strong. Now what is Thies this lightbox? Actually, when I just click on the image now you can see that the image is applied optional caption. We can get the caption as though and then the clothes. But Nashville. Okay, if I just taken close, it will close. If I just click anywhere, it will definitely close. But the interesting thing and why I'm just teaching you to use the instead of the castle. The lightbox? Because if we just put the full image set, I'm just clicking on this warm Now I got linked to go more, more and then you can see that its adjusted according to the image. And then if I just go there if I just go there the both ways it's working Fine. And then if I just press the x button, it will automatically close and definitely it just supports and cables. Now, there are some methods to apply the the light box on the page. I'll guide. You don't need to watch the getting started help because I'm there to guide you. You just have to click on the download button. Okay? After the dollar button, it wills tour you his tour in your computer. Okay, I just did. Bill. Now I got the thing that the file is already exist on the down list just because I just downloaded the file. But you should download this at this moment. So I'm disclosing this, and it's going to the folder where I just downloaded the file for watching this. Just press windows and D and wait for a while. Why? It's not visible on the desktop. It should be. Delia, I got this. Okay? I just refresh the page. And then there is the file. Let's just took on extract all Yeah, and then this is the life box. Okay, if you can see that here, I'm just diluting the folder because I just don't need this. And there is a light box to master and inside the like box to master. There are several things. First of all is the example. If I just click on the example there, The indexed it actually will file if now just closed that. Okay? We don't need that website anymore. And this is the file, okay? The example. File. Just seem like we want. Okay, Perfect. Will. I'm not gonna do anything. I'm just simply going to the dest distributable files and simply copying the instead of copying. Why not? I just place this hair and just go over the bootstrap image gallery. Okay? And place this hair and then this is a light box. Master of error. We just searched out the example files. Well, you can go anywhere. You can download the files from the SRC. The source folo are from the distributable that is going to the distributable and simply copying in the distributable distributable in the distributable. I'm just going to the CSS folder and they're simply copying the lightbox that CSS going there and just going inside this year's sn. Just pasting the file hair, okay? Just pasted the file of the life box and is going back going back again and simply going to the Jays folo and is copping the lightbox start days. Well, definitely the hardest. Supporting that. We can get the file off lightbox plastic cruelly. But we have the bakery already, so we don't need the version of the light box with the J query. Simply paste this. And now this is a J query. And this is life box. So just close that one thing more. Let's go to the images folder. Okay? And they'll just go to the images folder and simply copy these images because these images are really important because you can see that they print button the next button on lowering an ABC are really important. Let us based all these things here and now. Just close this. Okay, well, just like there and district on the photo gallery. And then just open up the nature of the national, which is already opened here. And then they're just removed the models because we definitely don't need the models anymore. Okay, again, I'm just deleting the whole noodles from the nature product. Imo as I say that I'm gonna use the the lightbox plug in, so definitely I'm just going to remove all the models. Okay. Said this one of ill I think this one in the last one. Let this above the last one as well. Oh, now say that now you can see that it's really perfect. Well, I'm just going to do the will. Be top, and then we just don't need the data. Tuggle, we just need the data light bucks. Okay. Gallery. Okay. I can put any value in the data lightbox, but if you're just trying to make the group of the images, for example, this one and these all of them has a gallery, so definitely the life did a light box. Should be the same for all of them. Okay, the value. I'm not talking about the only the data lightbox. I'm talking about the value. If this one has the value of galleries of this one must have the value off gallery. If you just want to make the gallery with the using, all of them. By the way, let us duplicate all the data in this way and that one as well. Now, save that and go to the brother and refresh that. Now just click on in Nature Gallery on this click on the image. Well, the model is not working anymore, so we have to change. The more things definitely and what we need. First of all, what is the address off the image like this? Copy the address and paste this here. Okay, again. And then again Oh, we have to change something eldest value at this time under duplicating the at refs the hyper references. But definitely this one is the I'm Juwan is one of the two. This one is a three full five and six. So now it's glowed. Well, we did all the basic thing. The only thing which we have to do is to add in the data lightbox for the base. This is this is called a basic thing. Okay, We cannot be the title and a lot of things. But the women with the most important thing which we have to do is to adding the colossus, which we just copied. You should just remember that we just copy the data from the data. Just stop. And this pasted there in this yourself, this is a light box. Stocks here says we have to add that Oh, duplicating now the sting of the bootstrapping type light box that CSS and just to placate the bootstrap and then just copy. Oh, first of all, let's go to this year says and then to the photo gallery. And this is DJ Query. And this is a light box that Jace. So they're just type the light, Buxton. Just now, save and refresh. Now click on any image. Now you can see that weird is getting the image means. Actually, the life box is still not working in the nature. So we have to do some more things. We're going to the note pad back. And actually, I think that, uh, most of the jays files requires to be placed on down okay on the body just before the body . And it's replacing the script of this. Well, someone refers to place de gea query that Jason the boots. Travelodge is also in the button. But I'm not doing this because they're okay. They're at the top. Well, now I'm just trying to click on the image. And now yeah, I'm getting the image. Now you can see that the two off sex, because the Six Elements has the name of the gallery and then new one, the next one and then the next one mawr. Okay, this is looking really perfect. So I hope, interested about the gallery and in the next last you let the caption with this gallery, so stay tuned and goodbye. 51. 49 Adding Caption to the LightBox Gallery: Hello and welcome back. So the last thing is we cannot be. And I said that began at the content as well. So there we just need to type the data title. Okay. In the lightbox way, I'm just gonna typing. This is the second image. Okay? I can type anything. Whatever I prefer. Let us based this here, here, hair there and then there as well. So this one of the 1st 1 he made some just typing the first hair. And then the s should be capital. And that one is the 3rd 1 Okay, that is the 4th 1 Okay, so that is the sheriff. The one and then this is the last one, which is the sixth element. Okay, off the image. So let us go and refresh that back. And then now just click on the any major. Now we're getting the This is the second image. When it is click on the next part. Now, this is 1/3 image. Okay? Any image I click. I couldn't get the caption off that image, so I hope it will stood about this as well. But something where I just want to teach you about the parasols. Sorry, not about the carousel. About the light box. Legis clicker on the next button. Next wouldn't again. You can see that the image is changing, actually. Okay. By clicking on next or previous button, this is the way. And then if I just If you just click on the X button, the course at the image is closing. This is what I just wanted to teach you. So guys in the neck Plus we learned some more things Stay tuned and goodbye. 52. 50 Creating HTML syntax (1): Hello and welcome back. So in this class, I'm just gonna create a new project. Actually, I just created a product for Blawg. Here is a black folder. So first of all, I'm just copying this year says phones and the jays holder, because all these folders have the bootstrap. I'm just going to the black folder, and it's applying these folders. You know, that CSX had the bootstrap, and then the James has the bootstraps of Definitely This is perfect. And, you know, the phone folder, which is actually has the cliff I couldn't fund. So there I'm just creating a new folder of images. And actually, this is the hitter image, which I'm just gonna use my project. So I'm just pasting the header image inside the images folder. The last thing is to make a new file, so I'm just gonna make the file here. I'm just going to the desktop in opening the bootstrap and in the black folder index dot html saved that. And now just type the basics. You know about that. First of all, just mentioned that you're just about to working in the extremely five version of the ducts , the dark type Well, there just had the hate tag, which is necessary. Okay, Now go inside, behave Tag and just put the title tag. And there I'm just gonna had the my blood. Anything you can type whatever you prefer. And then these crypt tag. Okay, now there, adding the SRC and then the Js slash j query dot Js obligate Now here the bootstrap dot Js . Okay, you know that this the scripts is in the folder of the Js and this is the bootstrap, and this is a J querida jay. So the second thing we have to add the CSS before this script, Adam just adding the link relation style sheet and then the hyper reference off the, um CSS slash bootstrap dot sorry spelling mistake is trapped at CSS and then covered that. Okay, now go down after the hay tag said the booty. Okay, Now, here inside the body, I'm just gonna add other things, just like the container. Oh, sorry. Not directly. First of all, the tag on the container that is perfect. Now I think everything has been managed. The sort testing. I'm just applying the death. And then here I'm descending the class off Jumbotron. OK, I'll save and go to the brother. But how to go to the brother. Just open up. The extradition will file. I'm gonna go to the browser. I'm closing the old files, which is open there, by the way. Now you can see that the Jumbotron is visible here. That means the bootstrap. It's completely enabled in my website in this web page. So the other thing is actually just make it the list way. And in the next class, we will professionally start working on this project so we'll actually make the complete blogged with some new styles. Okay, so goodbye. In a stay tuned. 53. 51 Creaing Navbar and Customizing Bootstrap (1): Hi, everyone. So, in this glass, I'm just going to start making the project. So first of all, I'm just gonna have the navigation here. Okay, so let's just make the navigation with the navigation bar and then going inside. First of all, I'm deciding the basic things you know about that the NAFTA bar, and then never bar in verse save and go to the browser and refresh. No, I got enough bar here. If I just put the default instead of the inverse, then save and refresh. Now you can see that this is the inverse. This is a default. They of in a bar. Well, I'm just gonna get it this one as well. But right now and then this creating the Dave. OK, now, in this different that's going to create the collapse off the container fluid. And then I'm just going to remove this one's container because this shouldn't be the navigation. Should not be inside the container because you know that I just want the navigation, um, with free. So this is the thing. Now go inside. The container flowed, and then the first thing first inside the container floated is the And there's going there , And I think the class knave bar hater Oh, that is what that was the perfect. Now, what more we have to do is do you don't this putting the a and the class, okay? And then just covering. And there the knave bar brand. Okay, so they're just setting the drafty hyper reference. And then here we confirm any name as a website. Okay, I'm just typing here. The blawg, the plug. Okay, Now it is going after the Naveda. The other thing is a u l. Then just go inside the class, and there it is. The knave never bar knave. Okay, saved that. Now go inside the UL and put some allies and there, adding in a tag hyper reference cover. And there disturbing the class off the are the address should be right now, I'm not putting any. Edwards is directly adding the at refer the hash sane, and then they're just put the about us, okay. And then the contractors, whatever you want, no save and go to the browser and refresh. Now you can see that the complete website the complete navigation area has been completed. But something more we have to do is the knave bar, right? Save and refresh. Now you can see that the text is there. Okay, on the opposite side. Well, if I just remove the default, have default. Okay, Now save and refresh. Well, you can see that the everything has been changed. I'm just putting the never default and refreshing. Now this is the way. But when I just apply some kind of style with the body, the background right now is putting the gray or silver color to the body. For some reasons, I will remove the color. Now you can see the never clearly. Okay, But right now I'm just removing the nab our defaults tile. Okay, now refresh. Now you can see that there isn't any never bar default style. That is why everything is clear. But there isn't any specific and have bar that the style of the never bar. I'm just going to the hate area. And actually, what I'm just gonna do is first of all, I'm just calling. I'm just typing the never or the Actually, the opening is tile. Okay, so for this class, I have to make this child sheet as well because I just want to customize the bootstrap with our own ways. This class will be really interesting. The or actually, the whole project will be really interesting for you. Color. Okay, white save and refresh. Okay. No, directly on the knave bar. Actually, these are the tags off the name bar. You know the tag. Now refresh. Now you can see that the color has been changed. Looking perfect. Okay. Or actually, what I want this is a very rich I just want. And then you can see that there is the white, uh, later, actually, white gray color on the hover. So what I'm just gonna do is actually just typing that never. Okay, because now I'm just editing this one. Didn't have bar. Okay, now, one thing more that I just can't remove the nap or now or never never. Right? Because all of these things are not just belong to the color or the background. Color day depends on the designing any styling, so we cannot remove them. But there I'm just telling. Never bar the ally Richard inside didn't have or okay, Van Aartsen over then These title should be applied at the place of the Hauer. I'm just applying the or any for now. Refresh. Now again, The same problem we have means add in space and type A means these tiles directly applied in the A in the bootstrap. That's why they're just asking us to put the A so refreshed that now just hover the mouse. Now, you can see that when I didn't hover the mouse here and the thing happening because I'm not calling that the never A I'm just calling that the knave and the ally and the A, which is inside the navs Ally should be like that. Okay, so I hope you re stewed. How do it didn't the bootstrap with an easy methods. So I just edited that. And now what I'm just going to do with actually creating a new file and saving this file in the CSS fold. Oh, okay. I'm just going to diseases folder. And here I'm just renaming the file is child at CSS and just clicking on the save button and then just removing this as and going there and simply cutting and pasting there now saved that and just rearrange this save back. And now say that one. Removing these tile just link up the file. The position is really matters. I'm just gonna guide you wormed its talking about relation style sheet and the h r e f hyper reference CSS slash style dot CSS Say after saving, go to the brother and refresh that now when I just hover the mouse, it's working perfectly. That means the style that CS is applied. But as you can see, that the style dot CSS is just after the boots traveled. CSS file. I'm just cutting this and pasting just before the bootstrap means this title that season first and then the bootstrap. So now refresh that now, when it is over the most, No, you can see that the bootstrap is applied on that elements, not the Sorry bootstrap is applied, not the style that CS is. So the file, which is the custom file, should be must be after the bootstrap, that CSS file. Okay, so in this way that you save this and refresh this back, and now you can see that everything is now back on the course, which I just did here in the style that CIA says something. We just wanna clear you that actually I just remove the background effect by removing the never default or the Nabbout in verse. But if you just want to add the background effect, it's still then just type. Didn't have bar default. Now save and refresh. I got the NAB our within our bodies tiles, but let just go there and simply type the dot nev bar default. And then you can apply these tiles on the Nabaa directly, like the background color. Just suppose light green save and go to the brother and refresh. Now you can see that it's light green now. So in this, say you can edit the, uh, the bootstrap and I hope understood how to it it didn't have our default immediacy, but right now, I just don't want any effect like necn everybody fault or the words or any other. So refresh that back and now simply we have applied these tiles on the never bar and the never. In the next class, we learned some more things. Stay tuned and goodbye 54. 52 Creating Header and Search Bar (1): Hello and welcome back. So in this class, I'm just gonna teach you some more things for our project. If I just go to the brother, then you can see that when I didn't refresh the thing. Now you can see that we just edited these things perfectly. But there is a more things we have to do. So first Apollon is going to the index relaxed email and actually there just after the navigation, OK, after the navigation, I'm creating the hater, the Hillary's in html five element, You know about that And then just going to the starting tell of the hater and then putting the background. What is the background? I just want to put is if I just go to the project panel, here it is. And then there is a blawg. There were the image name. The image is actually the hatred of jpg. And then I'm just going to the note pad, and actually, I'm just going apply that image here, Okay? What? I'm just putting here. Just typing in majors slash, Um Haider Dodge a PGA Just forgot the name, by the way. Now save and refresh Nothing is ah available here on the screen because I'm just going to the stalled on CSS. And first of all, we have do create the CIA says for the hater. Okay, I'm just only putting the head here. The heights or not, the head height should be automatically so ghd and the height is 400 PX. At this moment, begin changing high. Definitely refresh. Now. I got the big bar here. Okay, which is completely you can see that, um responsive. So going back there. And actually, I just want to add some more things. First of all, the position. Okay, the position should be absolute. Salute. Now, save and then refresh. Where is the element? Spelling is perfect. Yet now the top from top. It should be zero. Refresh that back. And it's not applying. Um, yes, because I'm removing this one. The position absolute and everything. Actually, I should have lied the things to the knave bar. Okay, this now. But I just want to get the image. The hitter image from the hitter means I just want the image at the back off this this navigation area. So why I'm just changing anything on the hater? I should change everything from the navigation area. So there I just added the class off nab our custom. Okay, you do. You should add the class off. The never customer. We cannot any name, for example, on this typing never bar mine or whatever. I just preferred and have our custom. But because it is just looking like the customers class. So there I'm just creating that class that knave bar and costs Tom. Okay, so for now, I'm just going inside the novel custom and then just typing the position. Absolute save and go to the browser and refresh. Now you can see that the element is on the back off this big giant. I'll get the hater and looking really perfect. You can see. But something more which we have to do is actually you can see that the block and the home . When? When we just said it's close as the inevitable, right? You can see that we decided the class of the never buy right here. Then why it's there? Because now there isn't any specific height because of the position absolute. I'm adding other things the top from zero, which is automatically but I'm just fixing. And then I'm just putting the head 100 PX and 100% then refreshed that now, because of the 100% it has got the space of a kite and looking really, really perfect for now. Well, there is the other thing is the nab our hitter or the nab LeBron. I'm just calling the name bar hater dot nev bar hater. Okay, on deformed size should be Prodi, PX save and refresh decides is not changing because of the same game. Okay, I have to mention the A because you know that the block is in the a tag. So let's just refresh that. Now you can see that the size has been increased and if I just typed it 25 here instead of the 20 Now you can see that the blawg is completely changed and looking really perfect all of these things. So what more we have to do is changing the height. I'm just putting the 504 50 this testing and refreshing. Oh, I just put it if only 50 instead of the 4 50 So now this is looking more perfect. So when then here in the hater, I'm just gonna add some text, so I'm just going inside the hater and the Etch one. First of all, I'm just putting the X one here and is typing the d blogged. Okay, Save that and refresh. Now there is a text. You can see the block and putting some specific padding. Okay, I'm just putting the 50 p x for now. And refresh that. Now you can see that the blogger. We got the data here. The blawg. Now we have to change the background color. Definitely the color. Definitely into white, because that color is not perfect for us to see. And then there's going to the index irrational and applying the class off the text to center saving and then going to the brother and refreshing. Now I got the text here and upgrade the size off the Etch one. So hater at one. And then the for size 30 p x. I have no idea which side is there. Okay, 40 p x. The fresh the 50 p x refresh. Now this is looking the size and looking really perfect. And the other thing is, I'm just going there back and just clicking on the HMO and then just pressing inference of flying. The other thing is the the best blawg ever. You seem you can type anything, you know that it's upon you and leading the class off the lead. Well, one thing we can do that when you know that all the text should be in the text center, which we are just getting there. So why not we just at the clothes off the text Central one time, um center and dangers cut this one paced there the both of them, actually, not the only one. Or refresh that. Now you can see that the best block you ever seen. Now go there and just go there to the petting area and then add some spaces. 50 p x again. OK, now for the top and bottom, I'm just adding the 100 PX and refreshing. Now you can see that the text is in the central for now. And I'm thinking to add one more thing, Vera, I think at this area just after the whole I'm just gonna add the in the navigation area, okay? Just after the head hitter ending the dev Another Dave, okay. And actually, just applying all the things that this applied there now, just left. Didn't have by right and cover that. And then they're just removed. That one. And what I'm just gonna do is an insight. This I'm just creating a new div. Okay? And deciding the class off the input group and then going inside Input group again for the 1st 1 under setting an input type text covered that and then add some close it, form control to applying the boots, traveled that. Okay, so then just after this input group, I'm just creating another day input group. Oh, sorry. First of all, they do. Okay. And then here is that the clause input grew Gideon. Okay, Now go inside this infant group and then here the button. Okay, So for the first ones button, I'm just adding some Colossus Vivian and beauty in default save. And for the value there are deciding the I and class Cliff, I can't And I know about this icon, which I'm just gonna uses the search vilify concerts. Okay, Now save and cover and dangers go to the browser. Refresh. Now everything has been disturbed. We have to manage the problem. That what it is and how to manage that. Actually, this is the input group. This is the United bar. Never. Okay. And this is the the other thing. First of all, I'm deciding the form in Lyon. Save form in line and refresh. Now the form has been in lined. The other thing is, I'm just gonna add off. Actually, I'm just gonna cut this one and just have to paste this inside this input group. Okay? Now refresh that. This has been cleared, but it's still there is little problem off the whole sizing. Well, what is the problem? I have Ah, We'll wait for a while. This is I. Oh, my God. I didn't complete the I tag. Actually, that was the problem. 100% refreshed that now everything is clear. You can see that. I just made the problem off the simple thing that I just didn't complete the attack. That's why I was just in trouble. So, by the way, the thing is that this is the input group And why This isn't group. Because you can see that there is a rounded butters from the left and from the right side off this thing, The text field there isn't There are these quite Butters. And the same like the button. The search button. You can see that there is a rounded butter only from the right side. Right corners. And the other thing is, you can see that the input form control for making the input and the for the form element of the bootstrap and then the button group BD. And makes this just like this element means only the right corners off the border. The rounded border. By the way, this is a search button, and there isn't anything. Well, I'm just gonna add other thing, adding any space and adding the NAB bar, right? And then, actually, we have to do some more things. First of all, just, uh and just this. Okay, now this is adjusted. And then I'm just cutting this one and pasting after the UL, okay? Just why I'm just gonna teach you. Because now save and go to the brother and refresh. Now you can see that the home is there and the button the search area is on the left side area is on the really top. It should be in the center of these elements. So how to manage this? I'm just going to the note pad and actually adding these tile okay and typing the petting. 10 p x save and check in the brother. Now it is looking really perfect for me to actually work on the website. Well, what do you think the search area should? But there are there. If you just want the search area on the right side. So let's just pick this up again and just paste before the u l. And then you will see you know, fresh that Now you can see that the search area is only very right. I think this is looking more perfect. Onda, the other hitter is completed. And then if you just want this one the d block more down more buttons. So go to the style that CSS and apply They're the instead of the 100 wine already supplied the 1 20 the first that Now, when 50 and refresh, this is looking more perfect. Well, this is a way which we just make the website. Now in the next class, views make some more things Stay tuned and goodbye 55. 53 Creating Posts Area (1): Hello one. Welcome back. So when this class, I'm just gonna teach you some more things. I'm just going to the index to Rashed email and over. Evan is going back to the style dot CSS There is the great color. I think I just mentioned the glory color in the body. OK, so, actually, I just don't need the great color. This great color or silver color is only for the only for identifying that there is when we just He was just creating this area, if you just remember. So now here. I'm just going to create the posts off the blogged from now. So then just going down. And this is the hater after the hater. I'm just gonna create some more things just a far longer is going to create the day within a space of it. Colon size you? Well, before the colon, we have to create the class, you know, Cole MD and then MD six. Okay, now save. And then for now, I'm just creating the I'm just putting any specific style. I should actually just putting the background color to clearing that. How much side off silver off this MD has refresh now here. Is the Andy, okay? There isn't anything, so I'm just putting something in the refresh. Now I got the space. What I just want. So the second thing is, it shouldn't be like the six. It should be five refreshed now. Perfect. The other thing is, I'm deciding the another class call MD off set and one okay from it. Starting from one and ending from 11. That means one from there. And then from there. Oh, from the five. Okay, this is not the 10. I was just thinking that it is. Stand by the way. 54 and refresh. Now it is looking approximately perfect. So now I'm gonna put the data inside this one. Just putting another Dave or the Each one is more perfect, I think. Well, their inside the such one. I'm just getting the text. Just like, uh, there are are thousands off stars around all the on the universe, whatever. Now, save and just refresh that you can see that there are thousands off stars around the universe. Okay, so I'm just typing three year and refreshing. Now, this is looking more perfect, by the way. So what? I'm just gonna do is removing these tile, the complete his title and saving and then refresh King like the title. But, uh, adding something like, uh, this tile fund the bold. Okay, this one, the board's child save, and then go to the brother and refresh. Now, this is the bold one, which, actually, I just want Well, I'm just going to put the a tag as well, because I just want them to make as the tag Here are the hash. And there I'm discovering. Okay, No saving Now refresh. Now it is just looking like the blue one mental dismounted that, first of all of this cutting and is going there in this tell that CSS end is pressing an interim. This typing. Um, yeah, this is the simple column. But I have to ask at some other classes or the ideas there. Just like i d and the posts. I can dive anything, whatever I want. So there, first of all, the posts, okay? And then the etch one inside the post should have This is style. The boldness. Then remove the child attribute from their refreshed that okay, this is perfect. The other thing is, I'm just pressing an interim this typing posts and ah, at one and all. The A's, which is inside the H one should be like color black. I can put any color. Okay. Actually, I'm just customizing the bootstrap. Refresh that. Now we can see that it's totally black. But when Let us copy this one and paste there. And what I'm just going to say is when the a and e hover mode, it shouldn't be like the black it should be like, for example, red Oh, not the bread only read, save and refresh. Now it is just looking like what I just want. Well, I can update any color, for example, of the red, the brown save and refresh Nall, this is the other color. And the last thing is I just don't want the text decoration, so it should be none the fresh now that is super perfect, which actually I just need So now the time is to put the data which should be here. I'm just creating the p tag, okay. And I'm just typing here that, uh, a new research has found that there is the water on Mars, so I think I should type the same thing there instead of the day or something. I'm just simply typing the water on Mars. Okay? And refresh that now water on Mars, And then they're just at the class off the lead. Save and refresh. Now, this is looking really perfect. So now I'm selecting the posts. I d there. And I just want to you one more thing with the post. So the selective post directly and what I'm just going to do with the posts is saving and the border. But, um, one PX solid lack save and go to the brother. And check that now. I got the line there. Okay. Why not? I just put the gray instead of the black color. So refresh that now this is looking more perfect. So now I'm just going to the index trash general and simply copying the whole thing. Um, actually, I have to do one more thing that let us create a new thing, Dave, and then just cut this post paced there, okay? And then press at the line. Break there. And this Copy both lions and paste. This here save and refresh. Now everything is saying nothing new there, but this copy this one, and paste and paste and paste and paste and then refresh. Now, I got a lot of a lot more posts, as you can see. And then one more thing. I'm just putting here just to placate this and then air. I'm just changing this the new research and something into the 21 July 2000 and 16 and save . And then the out the actually out of shares aid comme l and save that now. Actually, I just don't need this one. Save and refresh Now it is looking really perfect. Okay, so what I'm just going to do is simply copying this one and pasting there. We have to pace this with everyone and with every post, actually. So instead of just pasting this a lot more time, just simply duplicate that moon and then save and refreshed that now you can see that it's looking more perfect. Now, the other thing is here, um, this tasting there are thousands off star in the general er's Okay, whatever. And there I'm just typing some other things. For example, technology is moving to it's final round. Anything you can type as a post, you can see that now, this is what I just wanted to create. The perfect glug with the new and latest is tile. The other thing is, you can see that the size is too small. So why not? I just change the size instead of the column. Five. I'm just putting the column. Seven. Now, this is looking more perfect. The column seven. And the offset should be only to refresh that. And it should be eight. So save and refresh now that is looking really perfect because of the state of the huge size and the perfect management. So this is called the Beautiful Blogged. Now, the last thing which I'm just gonna add is the food or and the button off older posts. So I'm just going there at the very down just after this column, Um, it should be inside the raw. Okay, so there is a class off raw and then just paste the whole column inside this raw, okay? And then just do this, go down and then create the new rock and then just at the class offer all again, and then go there and actually just tab press the tab and then just dead or instead of that . Why not? I just add the class after the posts here, the button understanding the button. Here. Okay, so there I'm just typing older posts, saving and refreshing. So there is a button off the older posts, and then just adding any space and then just creating two days starting and the ending and letting the class off text. Right. Okay, now, just put up this button inside that one, okay? And that in the space. And just refresh that. Now you can see that the button is there. Perfect. Did. This is just like we want. And then I'm just creating a colossal here. And actually, for now, I'm descending the default, the 1000000001st of all, and the d very in default saving and refreshing. Okay, that is looking perfect. But something more we have to do is just that, um, this is the text, right? So why not? I just other things just like older 1,000,000,000 okay? Or the Actually, the older can be confusing. So the downbeat ian go to the style that CSS Oh, I just closed all the things. So I have to go to the bootstrap again. The bootstrap folder and there is a file. I just mistakenly closed all the files, which is not not not a good thing, by the way. So there is the CSS folder. Oh, no, they're this season's Fuller. Let's open this style that CSS and I just opened that. Well, this is the index, the national file off of a project. And this is the 1,000,000,000 down 1,000,000,000. I'm dis clicking on this tile. That's yes, isn't there dot down median and then adding the thing which should be in the down the BD in just like the heading 50 pixels save and refresh. Now you can see that the button is there. But this is not the preferred way because I just don't want to put the button from the left and right. So zero from the left and right. And only, um this is what I just want So perfect when I just refreshed that it's looking really perfect. But actually, this button is not looking like really cool. I'm just going to these Talaxian system is still on this tall look. CSS So there I am. Distressing it interim typing dot median default. Okay, I'm just updating these talented beauty and default here. Or instead of the 1,000,000,000 Dufault. I'm the selecting this one and then just typing the border radius zero. I just don't want the border radius that. Just refresh that. Now you can see that there isn't any specific border, okay? And then I'm just type. I'm just moving and then I'm just here. I'm just typing, obedient, do you fault? And now, yeah, I think I should do something when it's in our mood, they're the background color should be. And to supplying their bootstraps Primary color 337 a V seven. Now save and go to the browser. Refresh Now, when I discovered the most, this is the bootstraps primary color which is applied that they're perfectly well, just pressing an inter and then or instead, off pressing an interim that's going dear. And that 1,000,000,000 do you falled okay. And then I'm to supplying the border zero. I just don't want any kind of border without border. It can be confusing. So I think I have to add the border. So again I have to go there and then border zero. Okay, I want the border. But on the hover state, there isn't anybody right? Need Okay, That's looking really perfect. And the other thing is president and at the color should be wide now refresh. Now you can see that it's the white Did the white color looking really perfect. So the other thing is, why not? I just at the video and algae class and then refresh. Now you can see that the older posts are looking more girl. The other thing is, why not be decidedly if I couldn't to this button to make this more beautiful Song is going to dignify con's Cheechoo. You know the bootstrapped you cheats, whatever. So here. I mean, I am in the website. I just need the Gulbuddin just like the go button I need. So there is a perfect front, which I'm they're searching for. Um, they resent the resent now. Yep. Chevron right is perfect. Or if there is any other the arrow. I'm just copying the arrow testing. Maybe that this will be cool. I'm just trying. Or if there is any other, um, play, but no, not cool. This is looking more cool for the button. So I'm just going there and actually here. I'm just heading these pan and adding the class here. Okay, The beauty in starting at the beauty and egl If I can't and then the cliff, I couldn't Manu. Right. So now refresh that. Now you got the link here, which I just want. So definitely it's working perfectly. And in the next class, I'll just teachers have more things about the about this design. Actually, people make the food or so guys stay tuned and goodbye. 56. 54 Creating Footer (1): hello and welcome back. So when this glass, I'm just going after this raw and refreshing, This one. Now we're excited just saying. Well, what I'm just gonna do is actually creating new did here, okay? And then setting the class off container and then just first of all, to setting the HR and going down. Now, this is the actual line which has been, uh, linked here, which, which is actually visible here. So I'm just using the flowed instead instead, off the simple containers. Refresh that. Now, this is a flutist tile looking really perfect. So what more? I just wanted you is just creating a new day here, getting the Kloss okay. And then just, uh, actually hitting text center and going inside ing the jewel, okay? And then just pressing injury and and just adding the ally. So what I'm just doing is adding in a tag hype reference hash there and then covering the a tag. And then I'm just typing the whole duplicated, duplicated cricket. And then this should be the technology According to the latest off, which we need for the blogger. Okay. The technology and the held science, nature. Anything you can type here. Whatever you prefer. Nature Now save and refresh on the page. Now, this is the thing which we just created. But actually there I'm just setting the class off. Never now save and refreshed that now. Actually, we got the navigation here, which is not the preferred way for now. Heading this space again. Never bar. Now, save and refresh. Now that is what I just want. But actually, these things should be in the center so you can see that detects center is not working there. That means we have to create our own Koloss from the, um CSS. Oh, there. I'm just typing the knave bottom or didn't have center. Whatever left center is more perfect because I can use the class anywhere because off the common name. So first of all, the dark, never center. And now let it go inside it. First of all, I'm just removing the floating and simple float non and the display. I'm just changing to table, okay? And then pressing in true table layout fixed. One thing we have to do but there I'm just showing you refresh the thing happening. I'm disclosing this one because I just really don't need that. Well, by the way, what more I have to do is just pressing. Enter now, by using the display table and table layout to be fixed, I just make it possible to use zero and auto there. Okay. You know, this is a simple CS International trick By using zero and after weekend central, lighter content. And in this way I just make this centralized. The other thing is, you can see that there is the orange color, which we just apply to the NAB. So I'm just going to the top, and there is the another. Now, there it is. There it is. So I'm just adding the new thing here. The lab top. Okay. And then saving. And then let just change it to nab top. Save that and refresh that. Now it's supply. It's not applying there and there as well. So that means first of all, copy that. And, uh, or the better solution is to save that back and refresh. Okay, that's Ah, this is just like normal. But there never center. I'm just getting the background color to white save and refresh. Okay, That's why because remove that. And the president are in now, center Al I a However. Okay, now inside the however, I'm just setting the background color, white saving and refreshing. Now there isn't any color. This is what I just want. Now if you just want to say change the color, you can change by putting the value in it. And I hope and really stood all the things about the creating the blawg. One thing where I just want to teach you in the next class, actually, how to make the the static page and how to make the page where we can see the post. For example, if I just clicked there are there. Have you learned this in the next plus stay tuned and goodbye? 57. 55 Creating Posts (1): Hello and welcome back. So, guys, we're still in the index retractable. Paves. I'm just copying the whole text, which is inside the index to arrest GMO and pasting to a new page. And we're in the blogged. I'm the saving the paid by the name off post dot html. Oh, copy this again Because I just saved only the STM, which is not the perfect way the post dot html and saved that. Now what I have to do is, first of all, I'm just going to the top area, and they're understanding a new man. You were I'm just typing posts, Okay. And there I'm just getting the paid of post dot html. Now save and simply copy the whole ally. And this canceling this and just going to the index traditionally male. And it's pasting this here. Now, save and refresh that when it is click on the post. Now I'm in the post that Ashley, and now you can see that, but they're inside the poster. HTML What should be their first of all? I'm just removing the whole posts. Only one post I'll just left. So they are under the leading and the absolutely the button as well. So this is the justices a single post hair in the post electable end by mistake. I just deleted the data from the index Torres team. Also, get back that save and go to the post arrest demo. And now delayed the data from the Post died. Actually move. It is actually the requirement. Now, save and just refresh. Now you can see that a new research and whatever. Whatever. Actually, I'm just going to the lips some dot dot com So the lips in dot com is opening now and then it's about two. Now there. I'm just going down. And this is the tax time Just picking. I can pick any text, whatever I prefer. So I'm just picking this text and just pasting there instead of this only re soldier, whatever phase faced, and paste and paste and save and refresh. So this is the text. I just put it. So actually, this is a lot, much text. I'm just removing some of them and then getting to be or here. Okay. Another br Well, well, we can put the margins as well whatever we prefer, but there are deciding the new class lead and then just pasting the same thing here, here, and I'll save and refresh that. Now you can see that data. This is what I just wanted to create. So the other thing is, I'm just that indeed we are here as well as you know, that you can use the margins. So, by the way, this is what I just wanted to create an under scree ating. I am just gonna add the image between these two areas. Actually, after the after the first ones paragraph, I'm just gonna put the image here. I'm g SRC and there I'm just putting. I'm just going to the bootstrap. And this is the bootstrap folder. This is a black folder. This is the images. And this is the red wallpaper. Whatever. I'm just typing here the i n g one and then just pasting this image. I n g one dot jp d With the class off. You know the thumb nail now. Sorry, not the terminal. Only the i m g thumbnail, save and refresh Nall the images there. But actually it's not showing because I didn't added the images slash image and we wonder deputy now they made the images there and looking really perfect. And it's cut this one paste this after the image and covered this up and refreshed that. Now this is what I just wanted to create and I've done this. I hope in rescued how to put the image and how to create the simple page. Well, the other thing is, I'm thinking to go down, and it's cutting this one and pasting this to the top just after this. This before they be, are actually here. The fresh. Now this is looking more perfect because in this way we are just clearing that. This is The Post's page, and this page is just about the about us page. But I'll just close creative about this page again because something to be noted, I'll use the multi quarter techniques, so stay tuned and goodbye 58. 56 Creating About Page (1): Hello and welcome back. So, guys that I say to you that I'm just gonna teach you to make the about us page and as I say to you, that there is nothing really new, but definitely because they're just learning a project. So you must know to create a whole things off a single project. So I'm just removing the image from there and then just go to the brother and see what's there. First of all, I have to do one more thing I'm disclosing this year, some disclosing this. And now I'm just clicking on the note pad and actually what I just want to teach you. I'm just going to the post arrest email. And this is the about US page about dashed email. Okay, Simply copy this one, the who lion and displaced this in the index delectable page there and then to the about us pay about a spade. Yes, save. And then refresh. Now, when I just click on the about us now, I'm getting the page there. So for now, what I'm just gonna do is this is about paid. So first of all, I'm just removing the date because definitely, which is Don't need the date here saving and refreshing, but something where I just wanted you there, uh, which is new here inside this raw. I'm just actually putting the new Dev. Okay. And that's just adding the close off the page, Haider and then this Cutting this h one or just removing that hatch one. And just here just creating the new H one. Okay, that I would have some kind of foot bluff tax, which we just don't need. So here I'm just typing about us saving and refreshing. Now, what about this one? Looking perfect. But actually, what I have to do is do type the class off center save and then refresh. Okay? It's not came to the center. Oh, there's because I just didn't have the text center Refresh. Now, the text, which I just want is in the center, and this is a perfect thing. Okay, The about this text is really perfect and suitable, but something more we have to do is first of all, there is something especially in the post. So were the posts area. Okay, there is nothing really special. So I'm just gonna delete in India about extreme alarm just deleting the post. The idea of the post looking. Remove that and then remove that save and refresh. Nothing new because I'm in the post That about the rational there, We just don't need the post. So what more I have to do is to just actually placing their and removing the removing the whole extra space and refreshed that? So now this is really perfect, which I just want, But there I'm just adding another class with the lead. I'm just getting the the oil m coal means multi Coolum. So I'm just going to these child out CSS and then just adding the dot m call. And they run this typing read kid because I know that it needs the kid. Multi Coolum. It's spelling. Should be right. Um um in multi colon three save and refresh. What the wrong is this? Oh, I just use the model. Name the truth in his column count. I did actually used the model name, which is the multi column. So refresh that now you can see that this is divided on the tree column than this In this way, there about is looking more perfect. Okay, so if you just if you're just using the Moors, the Mozilla Firefox to use the Moores column count. Okay, modes column count and the spelling. Okay, we have to use the hyphen there as well. Now, type three as well for the Mozilla and just mentioned the simple Coolum off spelling column count. Okay, for the by default value. And this must be in the last refresh. Now everything is fine. And this is the about a spade, which I just wanted to show you. And I think that we don't need to create the contact us page because you already knew that . How to create the contact us page for your need. We have made the contact us page a lot of times in some previous topics. So guys, stay, tune and goodbye. 59. 57 Creating HTML Syntax and Navbar: Hi, everyone. So from this class, I'm just going to start teaching you to create the e commerce Web design using the bootstrap. So there, first of all, um, that's going to save this fold of this file. And before saving the file, I just have to create the new folder named E Commerce. Okay, so there is a fuller named e commerce, and the file name is index dot html and the save that file and now just designed the indexed arrestable file. Okay, so this is the haid file cover, then save and then go inside this hate file and this is a title. And then there I'm just going to the body area. And there this is a title area, as you know. So there I'm just putting the e commerce design. Okay, Now save and just go to the body area, and then I'm just gonna put some things the body O'Dea. But before that, definitely we have to put something in the Haiti area, which is hit area, which is seriously required to work on the boots rap. So I'm just opening the e commerce file and this is the Commons design, which means that I just opened the perfect one. Perfect file. So there I'm just going back. And actually, first of all, um, that's copying the I'm just going inside the book blogger. Okay, I'm just copying this find should be related, okay? I'm just copping the Js images as well fonts and CSS. Why? I'm just copying these images because it has some files and some images which can be needed . I'm just going to show you now. There are two files you can see that this one is a hater. And that one is the simple image file. So we can use these images in our project if need. So for now, I'm just gonna apply the bootstrap elements to the red side. So here the link relation should be, You know that this is the Stahl issued. So then a jury of the hyper reference and then they're the style started at this child the boot strapped dot CSS cover, and then just the script. Okay, so they're just putting the SRC sold stag, and then the not the image is actually the Js and then the J query that Jay's first you know that then duplicate than the other file. Must be The boots is trapped. Dark days. Well, you know that the bootstrap about CSS file is not directly in the in the direct path. It's in the CSS fold. Oh, so all these files has been connected for this chesting purpose? You know, what I'm just going to do is just creating a class off the Jumbotron. I don't know why, but I just like the jumbo trying to test the bootstrap. By the way, you can see that the Jumbotron is visible and covering the full area. That means that the bootstrap has been applied to our website. So the other thing is, I'm just creating some gives here. And then, first of all, definitely I just need to remove this one. And then again, I'm just creating the navigation area by putting the now bar and the nab our default for now. Now, save and or why not? I just type the never bar in words, save and go to the brother and refresh. This is the Navarre inverse area, which I just created and applied perfectly there. I'm just creating some Dev's on in the 1st 1 day. I'm just creating the never, Um never bar hater. And then there the day. Okay. And in the class off the spelling mistake. So the problem is removed. That one? No, never bar brand. Okay. And have our brand. So there I'm just gonna put the parade of the native bar or actually the name off the website. So they're under simply typing e commerce. Whatever you wanna put you can. Well, I just put a DVD covers in a wrong place. This should be there. And the e commerce should be here between the A tags. Okay, so this is perfect. Now go outside of the Navarre header and just create the UL and then apply the close off the knave. Never bar never bar never. Okay, now, save that and then go inside the UL and just create the Airlie, which is the necessary element. And there I'm just getting in a tag hyper reference and then cover. So here this is the home. And then the hash tag again as Dagon than their the stuff they're duplicate. And then hear the music. The brigade contact us. Saving, going to the brother and refreshing. Now you can see that the e commerce is hair and then the home and idiocy. But there is something wrong. I did. That's why, as you can see, that the e commerce is not truly applied a lot about the e commerce. Actually, never bar is not truly applied. I didn't never hitter. And, uh, okay, I did a simple mistake that I just have to copy the class and paste to here. And then this death should be removed without sending tag gazelle. So now well, I just go to the browser and save and then refresh. Now e commerce is perfectly apply it. Everything is perfectly applied. So now I'm just applying the knave bar, right? Saving and then refreshing for just sending this elements to their right side. But you can see that this is going to the very right to solve this problem. You know that what we have to do we have to put the Deb a new Dev. And in this device is gonna create the class off the content Now what type of content do you want also? You know the content, the container. So what type of container do you want? The container are the container flowed. But right now I'm not going to decide this thing. First of all, edges cut the whole Navarre and applied inside the container and refresh. It's perfect, but I think that the float is tall is more preferred, save and refreshed. Now you can see that it's looking more preferred. And then we have in a specific gap there in the space around the element and the padding. So this is looking really perfect. So what more we have to do is do just going after the knave bar and wanting more, which I prefer just just changed navigation, the depth to nab Because this is a knave area. The second thing which we need to do is this creating the down area. First of all, we have to create the hater than the other things. So, guys, we just created the navigation area in this car. So in the next last needle creating hater and other things, so stay tuned and goodbye 60. 58 Creating Carousel: Hello one. Welcome back. So in this class, I'm just gonna teach you some more things about the navigation or actually about the e commerce website. So there I'm just gonna create the hater tag. Okay, This is the hater area for Project our e commerce project. So they're what I'm just gonna do is But before creating the hitter, I'm just thinking to divide the website or the the theory after the navigation into two parts. Because I'm just thinking to make a pattern. This should be the raw. Okay, now there, I'm just creating the dead, okay? And then just creating another class. Cole M d. I'm just typing for their duplicating. And this should be the eight save and then actually just remove the hater tag from there, and they're just type the hater instead of the, you know, the death hater. And then this should be aside area. Okay, because this will be the sidebar from a reb side. OK, so, actually, I'm just copying these time, like, just watched on the internet. So first of all, the talk type is really important to clearing that we're just talking about the estimate. Five style refresh. No, nothing is new happened here. Well, the raw is not really important. So I'm just living the rock because they're the Andy for an MD eight clearing their position. So, by the way, what I'm gonna do is going to put something in the in the call. India 8/4 and in the header area. I'm just going to apply the Carol soul. Okay, according to the theme which I just watched on the Internet. So, by the way, this is not necessary to apply the same team. But actually, I just liked that thing very much. That's why I'm just teaching you in that way. So what I'm just doing is adding the class saroso. Oh, spelling mistakes. So it should be carousel slide now going there. And then the data ride. Okay. And then the Carol sill Okay. The data, right. And then the carousel, and then adding any space and then the i d. My or I think the see one. Okay, The idea is the C one for this carousel. Some just going inside this carousel and adding the well, So what? I'm just putting in this ol or what? The class I'm just giving to this well is just the carousel indicators. Because you know that I'm just gonna create the indicators for my council, which and it's creating there and then the ally how Sparling should be escapee should. This shouldn't be case Saturday, but you should clear what you're just putting Well, there is. Another important thing is the data target and then the in the data target, I'm just typing C one and then there data slide to equal to and then the zero. For now, this is this is only zero. Okay? And I'm not putting anything, and I'm just creating three or four slights. There should be one. This should be to the should be three means 0 to 30123 These are four. So, by the way, and is going after the o tag of sorry oil tag and just creating the death and which David is this is actually the, um, council, inner parasols. Inner. This should be like that, Carisa Lehner. Now it is going inside this mawr, and then creating the Dev Spelling should be clear. And what I'm just gonna put in this Davis is that adding a clause off the item and then the first item should reactive. Well, this is on you that do you want to actively forced? Colossal? No. So there, inside this one, I'm just getting the i n g the image. Um SRC And what? The image you want to put from the I in in majors. I'm just putting the hater that J pd, OK, I'm just I would just duplicate the head of that piece from multiple times for the whole website. Well, the other thing is lead to simply copy or the other thing should be. I'm just gonna put the caption as well. So what? The caption. I should put their, I think, pressing to first and then Mm do. I was just thinking that what I should put as a caption than the Koloss Carol cell caption . Okay, now go inside the council, captain, and just put the at three ranch for I think four is more preferred. Whatever you prefer, you can use. So, by the way, there is the text off the I N g or the slide one. And then just simply copy the whole class, the full item close with its depth there and this pace, there's after the 1st 1 second there were Actually, these are four slide 123 and the full. Okay, save that. Go to the brother and refresh that. This is a slighter. Oh, actually, there were some A lot of problems you just got. So definitely these things are not working perfectly. So what is the problem? First of all, we just have to you put the specific science for the images which were just calling there on in this way, actually. Yep. I was just putting the value as an attribute because we mostly used this title as attributes. So I m g and I'm just putting the size of the i N g is up too high it 101,000 p x is prefer . Well, David, not more than what the did I should put is 400 PX. Okay, save and then open the browser roof. Well, I did a funny mistake, because this should be the 400 on this should be the 1000. Okay, save and then refresh. This is what I just want. And and now we just need to do one thing that we just have to get the problem and then we just need to solve that. So there, what is the problem we just created? Well, there was something wrong. I'm just doing their first of all. I just added the EC of class with every element. So the move, all of them Okay, the active is only for the 1st 1 and then the second mistake is okay, This should be e not a so no other than that refreshed that now I'm getting the perfect ones. You can see that it's changing at Vail. The last thing which I'm just gonna do is actually just going to the top and just changing the hi to 300 refresh that it's not applying there. Well, I'm just thinking to do one thing that why not? I just remove the whole style when I just applied the specific Coolum Andy's. Then refresh that now it's the perfect one style, which I was just thinking for. So now I'm just going to do some more. Actually, I was gonna do I'm just gonna make the side area in the next class, so stay tuned and goodbye 61. 59 Adding Caption to Carousel: Hello and welcome back. So from the previous class, I just forgot to add the complete caption with these pictures. Actually, we should at the Peter Eggs that will to wearing the detail. For example. This is the lighter to whatever this is really necessary. So let's copy this because you're gonna be the text according to your need. But there I'm just typing, which should be there. Now refresh. Now, this is like, two or whatever you can do. The other thing is, we have to have the next on the previous button. So for this purpose, we have to go down. Okay, So, dear. And there is the item area, and this is the Cherestal enter. So just get down, get out of the council area and press enter a hyper reference in the hyper reference. I'm just gonna put the hash, see one, because I'm just referencing the I d and I. D. C. One. You know, that carousel has the idea of C one. So there I'm just getting some worth it. I'm just creating some more things. For example, some classes, the left carousel control. OK, now, then, let's just put some more things for example, the data's lion and then the Priv. Okay, the previous one and then inside this I'm just gonna put the span, you know that. Whatever. I'm just putting this plan because I just want to mention the glass off the Cliff Aiken. Well, for now, I'm just thinking to add some other things. Why? I'm just continuously adding the chevron left. So there. I'm just going to the glyph Aiken boots, rap cheat sheets, whatever. You can go anywhere. You just need to access on the web site. Oh, are, actually you just need to exits on the to cheat of the lift. Aiken said there I come. And now I'm just continually adding the icann off the chevron, right? Okay. Why not at this time, I just change the Eiken. So I'm just searching for some new Aikens here, Jeff. These are the perfect item, Aikens. The menu left and many right. So I'm just gonna go there. And actually for the left, I'm just typing life, Aiken. Many you left. So then just simply copy this one and paste there and there it should be left to right. And then the data slight should be the next perfect. And the menu. Right? So refresh and go there and refresh. Now I got the buttons there. Google, if I can Shiv Wrong left. Okay, save that. And now they're simply copy this one. And then this paste there And then you know what we need to change left to right. Okay. And proved to the next. There it should be next. And then there it should be right again. Okay, so say even go to the brother back and refresh that will. No, I got the buttons to go back and in the previous one. So this is the perfect slighter I just created. So then you know that this is a site area and we need to get this area. Actually, we need to put the data in this area, so I'll do this in next class. Stay tuned and goodbye. 62. 60 Creating aside and Product Area: Hi, everybody. So, in this class, I just want to teach you something there or get in this area is gonna create something so going to the note pad and there I'm just gonna press some interest and then let just create whatever you want to create, Okay? Adding the class. I'm just setting the thumbnails class. If you just remember that we just use the thumbnail for creating the gallery. So there I'm just creating the inside this element. I'm just going to create some pictures. Okay? The i m g s r c and then here the Indy. Essentially, what I'm just gonna put is I'm just going to the folder. There is the folder. So this is the e commerce, and this is the images fuller and the I am Do you want a jpg? I'm just gonna ply the I'm d one dot jp demon. So I am do one dot j p g. I have been applied and then just saving Well, doing one thing more. I'm just typing 100%. Okay. Means the sides Oh, not only 1% actually. We have to put the video. They'll know David actually, 100% for their settlement. This element on the 100% of the element. The company. Oh, So what is the size of the thumbnail? I'm just going to check in the browser by refreshing taste the terminal we just created. The second thing is, we have to provide the full laterals. You know that without this, we cannot access on the image. So refresh that. Now we got the image here, but the size is too big to see. So I'm just creating some columns there. Louisville. I'm just typing six. It means the area which had the full columns. I'm just dividing it into 12 columns, and I'm getting six column off that area, and this is what I just wanted. And I have got well, okay. And then they're just after the image. Just add a new deal with the class of the caption. Okay, Caption. You think you this putting the caption for the image so well, um is going inside the captions clause and we just need to put two things there. First of all, I'm just typing edge for EJ four and covering and pressing Intron adding api tag relevant duplicating this one. And there I'm just adding the value. For example, I'm just typing 100 dollars. Okay, I think the dollars dollar signs should be on the left side. So there is going down and just putting sample product save and go to the browser and refresh. So this is what we just created. And then I'm just gonna do one more thing that I'm just adding the a tag around this sample , Okay? And here I'm deciding the simple hash covered that and then save that and actually there for the 1st 1 I'm just adding a class off Pull pull. Right now, you know that the $100 will be on the right side. Refresh. Now, you can see that what I just wanted to create and what I have created there. So the other thing is, I'm just thinking that the size is too small, So why not? I just type 10 refresh. Now, this is actually looking the perfect one. Okay, so what I'm just going to do is adding another thing. The coal MD offset one. Okay, Now save that on refreshing that now you can see that one from there and went from there and 10 from the central. Definitely. It's on the 12 column grid. So, by the way, just after the sample product, I'm just gonna have the text there. So for this purpose, we have to go to the lips and dot com. And they're the website of the lips, um dot com. I'm just simply copying the text. I'm just gonna copy the text of the lower um, Epsom. And I'm just only copying the single line and this pasting they're saving and refreshing. So this is the products. Ah, in for writing that in this way, we can simply had any product, uh, to the the equal step site. Well, one thing more and is gonna do actually and is leading the extra text from there and saving and refreshing. Now, this is looking more preferred. Actually, I was thinking to add to products here, but I think it's impossible for me to do so. I think instead off adding to products. Why not? I just at the more products or more tax there to cover the whole area. Okay, save and ah, the last thing is go down there at something just like that. So what? I'm just going to do is actually just copying the whole thumbnail, okay? And it's going down there this after the hater. I'm just creating another day in this way, okay? And then just creating the Kloss. And then I'm just gonna create the column. So how much column we need or instead of creating, did call them directly? You know that we have the column here in the do so definitely refresh that. Now I got the item there, which is actually too big because off the cola Membe 10. So I'm just putting the only four, not 10 refreshed that now the item is there. Okay. Looking perfect. Well, the other thing is, the sites should be more small. I'm just going back. And this should be three. Save and refresh. Now, this is looking more perfect. And now I'm just deleting the extra tax text from there because I just really don't need save and refresh. Now, this is what I just wanted. So go back and this is the hater and the hitter is inside the Coolum Onda. Actually, there isn't any container. Well, one thing we're doing is to deleting this offset because we just really don't need that refresh that one. Now it's on the really left. But I'm just gonna put this data inside the you know, the container. Because just after the Haight around is gonna add the container as l so container and inside the container. I'm just gonna put this thumbnail. Let us copy this one and then just paste there. Okay, That is really perfectly managed. So now save and refresh. Now you give me that. The the element is there in a perfect manner. And now what did you move? Just simply copy this one, and we can add full writings there, you know, 234 Now save and refresh. Ni got the four items there, but you can see that the whole products are a little congested. There isn't any extra space, which should be as the colon great has. So the problem is I can understand the problem. Actually, you can see that I disappointed the column class. Ah, vidi, Tom nail cloth. So actually, this is not a good way. So we have to create another day and then we have to create another colossi a and then simply cut this one's cloth and paste there, okay? And at some enters and simply copy the whole thumbnail. Or actually cut that and pay still and at a tab and remove the extra space. And actually, right now, let us remove the other ones because I will duplicate that one. The new one. Okay, so in this way, I just removed all that and the simply copy this one paced There, There. Now, in the last one refreshed that. Now you can see that there is an extra space we can get, which I just wanted. So for now, I'm just thinking to make this call them for okay, call them for and then last one should be delayed ID. I'm delivering the last one and then refreshing that. Now you can see that the items are too big, but the perfect ones. So let's copy this one, because the previous copy has the colon before empty three. So now refreshed that now you can see that there are more products as we have the products there. So actually, this is just like the top product or Topsfield product. And these products are the common products, which we have a never um, website to tell. Okay, So if you learn small things in the next plus stay tuned and goodbye, 63. 61 Recreating the aside Area with New Style: Hi. Everybody we need to create the food were in this class. But I'm just thinking to change the side area, not all that blocks. Only there's ideally because I just want to put some interesting things there. I'm just going to the note pad. And actually, you can see that this is the index rational paid, which is inside the bootstrapping e commerce. So there is the A side area. I have to search that out. There it is. The aside area. Okay. And in this general, this thumbnail, I'm just gonna put the another interesting thing the list group there. So first of all, I'm just removing the whole time deal with everything which is inside this, or why not? I just make the group first. Then I will remove that. Okay, so I'm still inside this every 10 and coal and be offset. One because this is the alignment and the grid, which I just want some going inside this Dave. And then here it's creating the class off list group, okay? And going inside this on their own. Just putting the attack and heifer reference covering that and then going inside this a and their you need to put something some data and is gonna put it. But before that, I'm just getting a class there. List group. Hi, Tim. Okay. And then they're just at a tab. And then whatever do you want, you can do. Their first of Ireland is creating the Davy here. Okay. And in this day, I'm just creating two columns. Cole M d three and duplicate Cool Amdy nine. Okay, so they're what? I'm just putting the i m g s r c and in majors fuller. And then I am Do you want that J p d. Which is the fire name? And then they are deciding the class or these tile directly style 100. Sorry, The bid should be 100 percent save and re first that Now, this is what I just wanted to create and I've done this, but this is not the way, which I will. I just want So actually, I'm just doing something more. First of all, the height should be 100%. But the vid should be smaller. Or why not? I just go there first and then put something and save and refreshed. Now, this is the A s you can see that. And then this is the Oh, I got the problem. Actually, this is the MD hyphen three and I'm the hyphen nine and save and refresh that. This is the thing which I just wanted to create. But the shape is not completed because I just done some mistakes. So I'm just going to the note pad again and actually duplicating this one, Onda, we don't need to duplicate that. Just remove this on, then just remove this as well and just simply type the Claire fix okay to making the level again, because that items the image they actually column. The both columns are floating so by the baby just got the columns back. And then what I'm just going to do is just adding some interest. And then there many types of more things. First of all, the image sizes too small. I'll just do something for that. But before that, I'm just creating the edge. Four hair, okay? Or before the edge for Why not? I just created day, and this death should be the Los list group I don't hating. Okay, so inside this the edge for okay. And there I'm just putting the value as $100 duplicating this on there. I'm just putting the sample and then there for the 1st 1 I'm just getting the collapse off . Pull right. Okay. Save and go to the brother and refresh. This is what I just want, but something more I have to do, because off the balancing, I'm just putting the pull left at them, saving and refreshing. Now, this is okay and in the balance. But when I will just when I just put the p here the pitak for paragraph ing and then at the class off lift grow I Dane text. And then here I'm just putting the same thing which we have already, for example, this copying this one text pasting there and then saving and then going to the Rather and refreshing. Now you can see that the text is actually messed up. So how to solve this problem again? The copy this clear fix and just paste after these to pull left and right elements. And then refresh that. Now we got the perfect ones, which we just want as we required. But the only only problem is the image we have to solve this, You can see that the maid side and 100 picks 100%. So if I just convert this into 100 pixels and refresh that now you can see that the image is looking perfect. But the actual problem is for the images, the only the image is not perfectly managed for this pattern. These pace. So actually, I'm just putting the hideout ville. But when you create your project, then you should do the food shopping for the maid to making the midsize perfect for you need. And then here I'm deceiving the 80 okay? And refresh that well, and then going to the note pad back and actually here. In the first of all, I'm going to the column and adding this tile off, padding zero and margin zero, saving and going to the brother back and refreshing. Now I just remove the margin and the padding, the extra margin. Well, im just copying this text and it's pasting there and refreshing. Now, actually, this is what I just wanted. So now you can see that the item is looking very perfect. So I'm just leaving this thumbnail which we actually don't need any more I just deleted that. And then this one is a complete list group. I'm just copying the A tag and pasting there and then refresh. Now there are two items, as you can see, if you just want to create. If you just want to put the space iffing balance between them, then you know what to do. I'm just showing you how to do that. For example, I'm just letting these two ones we just created and simply copy the whole list group and paste after the this one there and refresh. Now you can see that there is a small space which is looking perfect for me. So I'm just relating these spaces now refresh. Now you can see that there are four items I just had adjusted there, which is looking super, I think. Well, instead of the hashtag, you can add the Pacific link for any page. So, by the way, what I'm just going to do is actually adding the link to a page and then I'll create the page as well. So guys stay tuned and goodbye 64. 62 Creating Product Page: Hello and welcome back. So they're as I say to you that I'm just gonna make thes space if IQ page for these hashtags actually for the products. These are the products, and I want Teoh make them product accessible. So what? The name for the product page? Actually, definitely. I'm just choosing the name off the product. I'm simply copying the e commerce indexed arrestable page and pasting there. Okay. And saving this. And actually, he did. This is a commerce page on this typing product or the detail page. Whatever you prefer, product slash animal, and then save the product page. And what I should do as next is I'm just going to the, um, very easy area there. Is it pro duct dot html? Okay, so, no, let it lead the other things. The list groups, all the list groups, except of the 1st 1 Because I'm just gonna date that one. So, actually, I have deleted the extra things. Now just simply copy this list group and paste this duplicate duplicate. Begin now. I did implicated it four times. Now refresh Now, when it is click called anyone. I'm not getting any of your That means something wrong? I did. Oh, I see. I have to copy the theater half and have to paste in the index. Tashjian Lascelles Because this is the main page. So, by the way, I'm just going from the top and just duplicating the yet refs here for the product on national page. You know, this is and I've covered all that things. Now these are the products the these are the council products, which is actually not necessary. So these are the other pages, the all products Syria. So definitely I'm just updating this, uh, atrophies ill as you can see saving. And it's refreshing. Now, when I just click on any product, I'm going inside the product, that estimable page, which means I'm doing going down. So here in the product that actually paid what we have to create a first of all removing the through the hole and before an m. D. I'm not going to believe the end before the aside area. I'm just only deleting the hater area. Okay, I'm just updating the hater area because I just don't need the hater. Or at least the leading. The who we were is the carousel because here in this class. I'm not gonna make the carousel, so let's just refresh that now. There isn't any council. You only can see the products. So, by the way, what? I'm just going to do mawr. I'm removing the page header. The old products are other things. Actually, they're around. It's removing the container for now or not the leading, But but just actually copying the single panel. Okay, any panel? I'm just copying this one. The Andy four thumbnail and whatever. Just pasting inside behavior. I just want to make something new. I'm just gonna show you what I am. Just I just wanted. Now you can see that this is the image. But why not? I just type the 12 instead of the four refreshed. Now you can see that the product is listed very in Arabic size. Okay, that is perfect. And what more I have to do is do adding more tax there. So actually, instead of making more tax time to simply copying and duplicating this one, save and refresh now because the mood taxpayer and now I'm just simply removing these elements, the old products and other things. Okay, you can see that I'm just removing this one. All of them. Actually, there is a big reason to do that. And also remove this one because I just want to add some interesting thing there. Oh, now save and refresh. So this is the product panel paid. When I just click on the home, you re hitting home Button is not working. So just directly go to the commerce and there is in extraditable page. Now this is index page when I just click on any product. Now, the product is in the immediate area and there isn't any other product we can see. So the thing is that what I'm just thinking to do is to creating a new day here inside the corner, Maria. And then just the creating, making it a column court. Sorry. Without class, it's impossible to implement a new column here. Cool, MD Um eight. Okay, I'm just typing eight there. And then what I'm just doing is and creating depicted here. If we just remember that we just learned about the bootstrap of Ells in some previous classes. Simply type wwl and then just type anything and just go to the browser and refresh that Now I got the bill here. You can see that. Now let's just a justice build by adding something like coal MD offset. Um four. Save and refresh. No, I'm I'm getting the thing here. After the four elements to adjusting the place, you can see that there is an extra space. I'm just at this time I'm just removing the container because definitely we don't need the container there. Well, I just remove the extra space and save and refresh now. Ministry, move the extra space. The other thing is, it's it's Ah, a little big now. So how to manage that? You can see that in the Coolum mbH. There is another column, the empty 12 to manage the extra space. I'm just gonna creating the same to making the same layout. I'm just typing the same thing here, adding the class off coal Amdy 12. Inside the nd eight, there is a class of M V 12 and simply copying or cutting this fell and just facing there, save and refresh. Now you can see that it's totally managed, which I just want. So what I'm just going to do is actually and then I'm just going inside this nail and actually, why I just created the bill. Yeah, inside the well, I'm just creating another day you can see and then adding the clause here. Okay. And for the first ones class, I'm just creating something like first. I'm not creating any class. I'm just putting the text directly. For example, I'm just typing the shh that I ve comme l just like the user name. Okay. And then pressing, enter and adding these pan here and inside these phantom just typing two days ago, okay? And then there, in these pan tag, I'm descending the class off. Pull right, save and go to the browser. And refresh that. Now you can see that the text and the two days ago, which is not truly truly pulled. Now refresh. Now you can see that the two days ago, Mr shouted Kamal has put it something. And what the thing is we have to mention in the p tag. So P and then I love this product. You should definitely I've doubted in this Palin golf t Definitely. By the way. Well, refreshment, I love this product. You should definitely by this one. I recommended save and then go to the brother and professional. I love this product. You should buy this one. Definitely. I recommended. Okay, So going back. And actually this is a simple name. So what do you think? We should have some kind of fist child with it. Or does directly go there and simply at the edge. Full save and go to the brother and refresh. Now you can see that the name she's a camel and a life. This I love this product. You should definitely by this one recommended. Well, I'm just thinking to have the p tag there or these pan tag is more perfect because I just want I just don't want to disturb the alignment this pan and then saving and going there and in the class lead, save and go to the brother back and refresh. Now you can see that this is bold. I hope every student, definitely you can make this one's for you. And then I'm just copying this cell again and again. Pasting, pasting and pasting. Save and then refresh. Now you can see that there are a lot of comments you got. And for the 1st 1 I'm just creating another real Okay, for the 1st 1 and they say then here I'm not putting any text, but is directly adding and adding a button here. Oh, the button is button should be inside the death. Okay, there is a dead. Okay, I'm just creating the body. And then here I'm just, uh adding the class off 1,000,000,000 very in danger for now and then adding the text off Leave, I reply, save and then refresh. Now I got the button off lead the reply. The perfect way to create the leave A reply button is the right side. OK, The perfect place. So what I'm just doing going there and letting the class text right, Saving and going to the brother and refreshing. Now I got the button there. So when anyone clicks on the lever reply, then you can see that what will happen. So I hope interest do that. How to create the beautiful, um, e commerce website with the product panel. But I think there I should create another thing. Last thing. That hair, um, is going to the note pad and there is the product link, the caption, And after the caption, I'm just creating another dead and what I'm just going to do in this day of actually creating the button. Okay? And inside this button, what I'm just doing just typing buy this product saving and then adding the rate for a while. I'm just going to add the class off specific obedient, you know, beating. And then BD in, um, success. Okay, at this time, I'm just choosing the success. Then maybe I'll change this color. Well, living applies there, which is perfect. So why not? I just choose the primary color instead of success, because success is not looking really perfect. Primary save. And then go to the brother and refresh. Now, I got the button off by this product. Hair looking really perfect. So then I medics of unspecific classes with this button while I can create the seasons for this as well. But right now I'm just creating the class because there isn't any other button. So the border radius. I just wanted to add some changes. Okay, Border radius. You know, I just don't want any radius there in this button. So now you can see that it's headed the button. All I think that I should do some other things because they really removing the radius is not looking really perfect for this body. So what I'm just gonna do is just, uh, eating some space. Yeah. Wait for a while here, I'm just actually adding some margin left. 50 p x saving and refreshing. No, I got the margin space, not the 50 p x is too much the 10 p x refresh. And then you can see the 10 p x is perfect. And then also understanding the margin for to the bottom. Okay, I'm just putting their the 10 p x again. Saving and refreshing. Now there the little space. So then, in the next class, I'm just gonna create the button to buy the product. Stay tuned and goodbye. 65. 63 Creating Related Search Area: Hello and welcome back. So this is the product that actually will page, as I say to you, that we will learn to create the buy these products, page, or we will actually create the form for this purpose. But for now, you can see that there is the last thing is only the text, the comments. So why not? We put something like related posts there just after the comment. So what I'm just going to do is actually I'm just going to the note pad. So first of all I am is going to the index to rational page. And there you can see that we just created the aside area. And then after the aside area, there is the another. Cool. I'm actually I'm just gonna copy the container area. I'm just copying the company container area. OK, so there is a container copying and pasting in the product of vegetable page just after the , um, the column MD eight there, pasted and going to the brother. And refreshing. Okay, so now you can see that there are the product area looking perfect, But at this page, I'm just thinking to make four columns instead of three columns. So there is a container area. First of all, let us adjust the post. They're in this way. Okay, this is managed Adam on inter. And then just type the related products. Definitely. You will use some kind of programming to get the perfecting which you want, but their religious is tunneling. Three. If the tree will go down. Mule apply refreshed. Now three is looking more perfect. So, by the way, just copying this one and pasting after the last one. Saving and refreshing. No, I got three related posts there. OK, so the last thing is, you know that there is a lot of text we should delete them. Save and refreshed. This is looking perfect. Okay, so why not? I just do this thing with the whole products, okay? So just simply remove the extra text, which is actually not suitable for the related posts. Refresh. Now you can see that this is looking more perfect. They're related products and then the complete chapter. So, guys, this is the time to make the product. Sorry, not the product page. Actually, you can see that every product has a link of the product page, so definitely this is simple. But now the time is to make the buy this product page. So I think we should make this page in the next class Stay dune and goodbye. 66. 64 Creating Modal form Form: Hello and welcome back. So, guys in this class, I'm just gonna teach you to create the buy this product page. Actually, I'm not gonna create a new product, A new page for this thing. I'm just gonna use the model if you just remember. So where is the binding by this product? Page link. Where is it? You comers, and then the sample lower maps. Um, and then there is the neighbor reply. So there is a button. Okay, So what I'm just gonna do this is the simple Dave. Well, I didn't use his Dave yet. I just at this link this Dave, by the way, I'm just gonna create the model there. I can create a model any very where I just want, but I'm just creating the model at just the bottom of the button because I just want to make sure that this model for Rich Button first of all, um, that's creating the class off model. And with the model, I'm just using the fade technique. As you knew. Then we need to create the i d. So I'm just typing m one or by model. I can type anything, whatever I prefer. Okay, and you want, You know that What decided can do you, actually, by using decided you make the link between the button and this. Dave, the mood out there, I'm just gonna create the variable. The attribute of the data target. Okay, Now what? The data you on a target is the i d off by Modell. Okay. And then the data Tuggle, What do you want to troubled by this money, Modell? Okay. And now this is the time to go there, and I'm just gonna create some organs. Hair? What's to follow them? That's going to create the class off the Modell con tend or the model dialogue. The content will be second. Now, create another day. Okay. And there on the screen. Kloss on in this class, I'm just creating the Modell content, okay? And now go inside the model content and let's create some other days and for the first column that's creating the clause off model hater and then duplicate that duplicate again. And this should be the model body. And this is the food, or Okay, so I just created the model. Okay, save and that I'm just going to the top area. The hater. And there I'm just creating some other days, okay? And they're just creating the class off the model title in the model title. I'm just typing here. The by the product. OK, well, I didn't show them actual name off the product by using some PHP or the A s P that night or any programming languages trick. We can just show there the product name actual, the actual product name, and then I'm just going to be body earlier. So, everybody, we just have to call it the complete for, But they're in the model food. Er, I'm just putting the food or area, actually, in the food around this creating the button, the another button and what this button rules should be. I'm just going there and getting the class off close, okay? I'm not I'm not typing the obedient or something, because this button should do only one thing that close and data dismiss Modell. Okay, so there, on this typing times. Okay. This is entirety. Oh, sorry. There are just don't need to show the entirely this should be closed. Save and refresh that. Now. I just click on the by the paid by this product and they're the close button. When it is click on Close its closing were lighting. What I just typed the clothes hair instead of the time is the science of there should be obedient, very in default. You can't put any color, whatever you prefer. Now just click on the Buy this product and there is a closed button looking perfect. Well, I'm just copying this button and is going to the top in the hitter area before the title. Just putting this one. And now this shouldn't be the median or something. That should be the simple clothes class, and they're on the setting, the times, entire east getting the closed sign. So now when I discuss calmly, buy this product button, you can see that there is a close button and there is a close written button. I'm just looking there, and I'm disclosing from the model. So guys in the next glass, we actually fill the form. Or actually, we will create the form for the buy the product page and then the e commerce. This type of e commerce website has been completed well, definitely when you when you create the professional e commerce website using some programming languages. So there are a lot of techniques you have to create the shopping cart. You have to create a lot of things, but there we're simply creating the online shopping website there. We just don't need to create the shopping cart. Just click on the buy this product and put your information and then get the product so guys stay tuned and goodbye. 67. 65 Creating Order Form: Hello and welcome back. So they're in the middle body, and it's gonna creating some more things like they do that. I'm just gonna create the form here. So I'm just creating the form mean tag, and then they're just setting the class off. Well, I was just thinking to put the horizontal form close, but right now I'm not creating the horizontal forms, so just simply go down and just create the Dave hair, okay? And Darryl is creating the cloths off full control. Okay? Going inside the form control and then just put the, um Well, we don't need the label now because they're just creating the form for buying the product. So I don't think that we need the label. We will use the placeholder for this case and foot type text, Okay. And then the glass off whom control? Well, there. This shouldn't be the form control. This is the phone group. Okay, so then there I'm just covering this up and saving and going to the brother to check what I just made. Refresh, click on the buy this product button. Now you can see that the full element is there looking really perfect. Well, there. I'm just putting the placeholder Brazil And what I'm just putting inside the placeholder Eve, the insert your name save. And then just copy this one The from group place Their place there. One thing where I'm just thinking to add the input LG save and refresh. Now click back to the buy this product or you can see that you're insert Your name is has got the big size So why not? I just copy this input algae and paste there they're saved. Well, we just put it some extra spaces. So save now. This is another one text group there. What? I'm not putting the text. I'm just typing the email area than there. The insert. Your email. Okay, so there. So there. I'm just putting the mobile number in Saudi removal number to contact the client back. Okay. And there it should be the at Russ address. Okay, Now save and go to the brother. And now refresh that and click on the buy this product. You can see that everything is perfect, but there is something wrong with the Edwards. Something's going back. And actually, what is the problem? Okay, cut this. Remove the extra space, which we just got. And this Copy the whole farm group and paste this here. Well, the other thing is, I'm not gonna use the input for the for taking the address, so I'm just making the text area. And there I'm just putting the class off this in class and is using the full control there . We don't need to use the infidelity or something. Legis delete the whole thing. And then here just type the address, save and go to the brother and refresh that back and click on the Buy this product button. Now you can see that everything is really perfect. Well, we can we have to adjust the address. But before this, I'm just going there and adding some specific Ross approximately 10. Or I think the fiber roles is perfect. Refresh. Click on this. Buy this product button. Now you can see that this is totally at just dead. So how I'm just