Crash Course on Template Development with Bootstrap 4 Bootcamp | Gerrit Vermeulen | Skillshare

Crash Course on Template Development with Bootstrap 4 Bootcamp

Gerrit Vermeulen, Software Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
34 Lessons (1h 50m) View My Notes
    • 1. Introduction

    • 2. Why should you use Bootstrap 4?

    • 3. Visual Studio Code

    • 4. Emmet

    • 5. How to include Bootstrap to your html template - CDN

    • 6. Set up your first hello world template with bootstrap

    • 7. Introduction to bootstrap 4 documentation

    • 8. Break points

    • 9. Why is the Grid system important

    • 10. The Grid System & container

    • 11. Grid system offset

    • 12. Basic document layout

    • 13. Navbar - most important part of website

    • 14. Slider on Homepage

    • 15. Add some content to the website

    • 16. Adding a footer

    • 17. Introduction to bootstrap theming

    • 18. What is SASS (scss)

    • 19. Koala

    • 20. Install NPM

    • 21. Install Bootstrap via NPM

    • 22. Compiling the custom CSS

    • 23. Changing the default colors

    • 24. Colors and buttons

    • 25. Typography

    • 26. Jumbotron

    • 27. Forms

    • 28. Modal

    • 29. Exercise 1 - building a simple bootstrap product ordering form

    • 30. Solution - Login page with Bootstrap 4

    • 31. Solution - Registration page with Bootstrap 4

    • 32. Solution - Products page with Bootstrap 4

    • 33. Solution - Products Modal with Bootstrap 4

    • 34. Basically bye


About This Class

Why should you use Bootstrap 4?

Let's be honest, creating a template is really hard, especially if you need to create a template that works with all the different screen sizes. From desktop browsers to tablets and mobile devices. It can be horrific, but using bootstrap makes life easier.

  1. It has Fewer Cross-browser bugs

  2. It’s a consistent framework that supports major of all browsers and CSS compatibility fixes

  3. Lightweight and customizable

  4. Responsive structures and styles

  5. Several JavaScript plugins using the jQuery

  6. Good documentation and community support

  7. Loads of free and professional templates

  8. And my most favourite, it has a great grid system

Through this course, I will show you how to use Bootstrap 4 and you’ll be able to customize it.


Why is the Grid System so Important?

The Bootstrap Grid System is used for layout, specifically Responsive Layouts. Understanding how it works is vital to understanding Bootstrap. The Grid is made up of groupings of Rows & Columns inside 1 or more Containers.

In the next class, I’ll give a quick overview of how the grid system works


SASS or SCSS introduction

In this section, I’m going to explain what SASS is and what will be covered in this section


What is SASS or SCSS?

SCSS is basically just an awesome, more dynamic CSS
Sass stands for Syntactically Awesome Stylesheet

Sass is an extension to CSS

Sass is a CSS pre-processor, it basically means that it takes the scss file and converts it to a normal css file.

Sass is completely compatible with all versions of CSS

Sass reduces repetition of CSS and therefore saves time

Sass is free to download and use

Why Use Sass?

Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help.

Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff

Why Use this with Bootstrap?

If you want to change the colour scheme in Bootstrap, for instance changing the primary and secondary colors, SASS will be the way to do this easily.

Before starting any project online, you first need to do a template for it in HTML and CSS.

This part can be really painful, especially if you guys have to make it responsive on every device.

Bootstrap 4 makes life easier and more powerful than ever before!

In this course, I will teach you guys how to use bootstrap and how you can use it to your advantage.

I will show you how to make a basic website in HTML, and how the theming works in Bootstrap.

I will also load more and more content in this course as time goes by.

My Name is Gerrit Vermeulen

I’ve been in online development since 2009 and I have been using bootstrap 4 since 2016

Hope you guys enjoy this course.


1. Introduction: Before starting any projects online, you first need to do a template in HTML and Ts is this can be a really odd and painful process, especially if you guys have to make the response upon every device. Bootstrap four makes life easier and more powerful than ever before. In this course, I will teach you guys how to use Bootstrap and how you can use it to your advantage. I will show you how to make basic websites in HTML and held theming works in bootstrap. And we'll also load more and more on that in this course as time goes by, my name was correct. Semillon are happening online development since 2009 and I've been using Bootstrap $0.04, 16. Hope you guys enjoyed this course. 2. Why should you use Bootstrap 4?: So why should you use Bootstrap for? Well, let's be honest. Creating a template can be really hard, especially if you need to create a template that works with all different screen sizes, from desktop browsers to tablets and mobile devices. It can be honorific, but using Bootstrap next life easier. It has fewer cross-browser bucks. It's a consistent framework that's ports measure of old browsers and C is a compatibility fixes. It is lightweight and customizable response of structures and styles. Civil JavaScript plugins using the jQuery. And it has good documentation and community support and loads of free and professional templates. And my most favorite, it has a really awesome grid system that you can use. So through this course, I will show you how to use Bootstrap for and how you'll be able to customize it. 3. Visual Studio Code: So the IDE I will be using is Visual Studio Code. I like it very much and I didn't know that my students actually complained a lot that the text is small when I do it on a no motors dish cell with Visual Studio code, I can also zoom into my code and make things more readable so that when I type, you can actually see what I'm typing. I have to close that. Okay, so where do you find this? Well, i just go to Google. You can just type in. Let's just close all my tabs over here. I just go to Chrome and I say download Visual Studio code. And so it should be the first one over year. Oh, actually the top one as well can work. You can just download it or you can actually just go directly to this link over here. If some unfortunate I can zoom in. So yeah, I mean, you can just go over to this link and it can actually just download it from there. So yeah, this is a very cool IDE and ask a lot of plugins if you go over year. Extensions is actually loads of extensions you can download. And I use this IDE for a lot of programming, different programming languages I uses for flutter, for a lot of, well, for HTML, CSS, JavaScript and everything. It's really awesome and it's completely free. So you can just download it. And yeah, I will also include the link in the, in this course or this specific class. So yeah, and this is it. And, and I will see you in the next clause. 4. Emmet : Another cool thing I wanted to show you guys is emit. So if you go to extinctions and you search for a MET, MET, sorry. You can go to the top one and as you can see, I've already installed it, but it's all similar and explain what it does. So if I create a new fall every year, New File and I say something like this, dot HTML, then I can just hit exclamation mark. And when I press enter, it will actually create a whole document and all the features that's important for a document, including this part over here, that's my favorite because this actually means that this will look points zoomed out in mobile devices. And the other cool thing about this is it makes the syntax a little bit clearer to make easier. You can create tax easier. For example, if I go tab and I say something like just deaf and I press Enter, it creates a Deaf. And we wanted to create a div that says, that has the claws of, let's say container. I can just say def dot container and f of praise tap, it creates that div in that container. I wouldn't be using that as much because I want to show you guys exactly what I do and I'll eigenstate the classes. But it's a really useful tool that you guys can use. And I like it very much. And yeah, it makes creating a document a little bit easier. 5. How to include Bootstrap to your html template - CDN: Okay, so I just wanted to explain this tutorial how you can actually just greater normal document that includes all of the Bootstrap elements that you need. So I'm just going to go ahead and install or create new file. I'm just going to call it index.html. And then I'm going to make a normal standard document. If I go back to the tutorial of the documentation of bootstrap, It will say get started then all I need to do is I can just insert the CSS. I can just copy that were there. That is zoom in a bit there. So if I copy that and I go back here, I can just insert, insert it inside this hate. So I'm just going to that. Let's place it right here and please anybody inside heat. Okay. And it includes.js files because they ease some elements in Bootstrap that requires JavaScript. So you can just copy this part and weigh on the bottom inside of body. You can just copy and paste it with them. Yeah, now we actually created a Bootstrap file. And in the next class I am just going to make some basic Bootstrap elements. 6. Set up your first hello world template with bootstrap: Okay, so my previous class, I just included job bootstrapped in my document. If I go back to my project that open it with Chrome, you'll see that it's an empty document. To see that it's actually the title document. You can just change it every year. And I will say this is at test sample. If I go back, that's actually did this way. Okay, so if I look at this, then it's completely empty. So let's do it this if I'm just going to create a container div class container. And inside there, I'm just going to make a paragraph that says, hello world. And I've faced this. You will see, it looks like that. If I had actually moved this CSS file, you will see it will look different. So this actually works. Jquery Bootstrap is included now within this document and all the features to work well. So yeah, this is basically the container the container fluid that actually would sit way on the sides. But like they're on our expanded but more about that. But yeah, so basically this creditor document, you can actually create a Hello World project. And now we can actually continue with Bootstrap. So see you in the next class. 7. Introduction to bootstrap 4 documentation: So previously, I quickly introduce them documentation on Bootstrap. And it's really, really handy in order to go check this out. I mean, everything you need to know about bootstrap is in this documentation. You just have to make sure that you have go to the correct link. I've seen people making the mistake of going to bootstrap and accidentally go over to 3.2 and try to do use features from Bootstrap three OR Bootstrap two. And that won't work. So just make sure that when you need documentation that you actually go to and form are actually unfold that purchase quickly came back to get bootstrap. I will also link this link over into the description. As soon as you go to documentation, you can actually see a lot of things of ESA flex splendid grid system, the utilities for layouts, the content types and type, type, biography. And we'd just stuff like that. So if our reference, the stuffing that you don't understand or you meet of neural information on that you can actually just visit this documentation. It is very, very well-written and this is actually another lot to explained sample and so on. There is some things that aren't really expand that Good. For example, nav bars is a really difficult things to explain in this documentation. Because especially for Stick, you want if you want to stick bar like this, stick navigation, which sticks to the top. And they can't really explain that in this really good. And so doing some practical documentation is really essential. But yeah, okay. So if you don't understand something and suffer some clear, you can ask me or you can actually visit the documentation is really well written and very detailed. And yeah, just let me know. Chain in next class. 8. Break points: Okay, so one thing that is really important for me to explain before we can continue, continue is that bootstrap has suffering that's responsive breakpoints. So this basically means that sometimes, or Muslims, it tries to detect the texts of width of the browser, and then it acts differently, or it can hide certain elements, or you can style it differently based on what the width is. So what they do is if they see any devices, we will basically be the small device and up as soon as the device is 76 item bigger than it sees it as a tablet. So it says that small and this set of things can happen and so it continues. So they usually call it is as m m the Elgin XL. So you will sometimes see something like I will do something like if col md six for example. And this MD will then basically means that in some medium, so this will act on Medium and devices and larger and not smaller. If I just do call x six, this means that I will continue with any devices and read them on the size. But when I did this afterwards, when this will overwrite this one as soon as its browser is. Let's see. I think it's none and two or more. So just you guys did you guys know that there is breakpoints system and when I reference stuffing that's either ASM, MD, LGN, Excel, I embraced referencing to this break break points. If something is unclear or I explained it completely wrong, just let me know. But dow t next class. 9. Why is the Grid system important: So the one thing I actually wanted to get into before doing some political projects with you guys is the grid system and why the grid system is same porter, I think the grid system is the most important part of Bootstrap four. So what is the grid system? Same potent, the Bootstrap grid system is used for layout, specifically responsive layouts. Understanding how it works is vital to understanding bootstrap. The grit is made up of groupings of rows and columns inside one or more containers. In the next class, I will give you a quick overview of how the grid system works. 10. The Grid System & container: Okay, so back to my project over here. Let me quickly show you how the grid system works. It's very important that you guys know that a good system should be in a container. So there are two types of containers. I'm going to show them both. So I'm just going to pull the one clause container. And the other one is the container fluid. So that gives you an idea what the grid system is. Going to try to explain it the best of my ability is that we can do stuff like div plus. This means that this is in a row. And then I can say div class goal. Let's make it six. And I'm just going to do the same. Another one, the glass equals six. This one I'm going to make I'm just going to tell it what color is going to get to elevate style. I'm going to have no idea. I'm just going to make this one the rate. And let's make this one. Let's make this on blue background with fellow. And that's blue. So if we look at this and nothing shows, I just have to give it the night. So let's do this type of way to do it, but I'm just going to make it a height of, let's make it found that pixels. So as you can see, the equal sizes of columns. So this school things ESL students that started out, it will actually go bigger and smaller depending on the size. So one thing to notice that these all, all these should equal to 12. So we can actually do something like and four plus four is 12. And then you will see that this column is bigger than that one. And you can actually do multiple columns inside this particular row. So I can just copy and place that I can give it this set. It is a different color. Let's just make black. See this now doesn't work because I've completely destroyed it. What did I do wrong? Let me see. The for some reason. That didn't work. But anyway, so this won't work because I plus eight plus four is not equals 12. So what we can do is I can actually just make this less and also this one laser for 12. So this will then work again. So there's the black, the red and blue. So we can also do that for and this 16, and that's four and it will space-like that differently. So this is the column works and F SRS, we stress out the width and Sun will always stay to that size. And, you know, it's a defense. Now the cool thing is that as soon as I go and make say, okay, yeah, but, you know, if it's small, the black size, it's cool. But I want to make this a black size equals to this size as soon as it is to a certain, uh, with I can just do this. I can say OK. About yes. If col md, let's say that's my SAM. So it's not completely small. It's more like a tablet I think. And then I want the to be DSM-4 and goal should also be a sim for. So this means that this one's will always say column four, it will always stay four. But this one and this one, as soon as it's a small devices will be two. But if it's a bigger divisors will be four and this one will be six. But if it's bigger than buys, it will shrink a bit. So let's see how that works. So this seems like it's still working. But what happens if yep. See, as soon as I went a little bit bigger than it's sapped and it's all equal. So yeah, this is basically the system explained. I mean, you guys. Okay, Maybe I should also mentioned this. So grid system cans all to be also being nested. Before I forget, I want to show you guys the difference between these two containers. So I'm just going to copy and paste this over a year. And let's just for my thing is important. Ok, so what's the difference between a tune? Okay, well, this one doesn't have, it doesn't lead sulfide. Okay, so let's give it a height of all the pixels. And that's because we don't have it in a row. So that's actually really important. Okay, so the difference between the content and amo container and a container fluid is that of a normal container. It actually gives this margin over a year, which is actually really nice. As a container fluid stretches all the way from the left to the right. So it's the complete with of whatever document you're using. Also, you can also nest inside containers. So let's assume you want to continue within this part of the gear. You want another container. You can actually do this. And you say, OK, but you'll meet another class had grown. And inside the goal, let's make it Goal 3939 equals 12. So inside, I want the background to be, let's make it something. Lets make it this one, okay? And this one, I'm just going to make aids like it. This we have L over yet. Okay. Save that refresh. And yeah, that's something good. That's my distal. You'll see analogy. We have this x inside here. So I see that it's shrinking. You'll see it will kind of disappeared a bit. And that's just move this container through it because it's distracting him bit. So this is now what's happening. Just make this bigger. So it's free 64 and let's make it 444. This seems to book nice. Let's make it the four and then eight. Let's make it a 66. Okay, for some reason, it actually doesn't seem to work that very nice if it's too loose, small, but yet it still works. So if I do the same over here, let's meet it out over there and there and check it out. Now that actually looks nice. So as you can see, this is a, this is an actual grid system of integrated system. I just wanted to show you the basic thing, that system because I will be using it a lot. And if you guys monitor will equal and responsive website, it's really cool to have. Because one of the cool things about it is that you can also say something like this. This will happen often. So if you guys want something to actually full, leave each other as soon as it's too small, then you can do that. So if it's col, md for Let's actually make it isn't small, so you guys want to make it full next to each other as soon as it's over either a big, big ish device. But as soon as it's getting too small, you guys want to make it fall underneath each other, then it will be something like this. So you see the snap, it was working now and now it's falling underneath each other. That kind of looks like a flat map anyway. Yes, so this big grid system is awesome. I think it's the bass part about bootstrap. And if you guys you guys understanding that system, I think you're halfway there. 11. Grid system offset: Okay, so another thing that's also really important for Bootstrap grid system is actually the offset itself. Because sometimes you will find yourself that you want. And let's say a form inside in the middle of page and should not be on the left side and on the right side. And you probably don't want to create, I mean, you can do both ways. You can do something like this. And, you know, just make sure this empty and this part is empty. And then, oops. And then if you refresh has been saved yet, then it will just be in the middle. So you can actually say something like 22 and I, and just steal your stuff here in the middle. But that's bad practice. So this is what happens. But there's something called offset. So you can actually just empty that you have the small medium. That's, let's just make it right. And you can say the offset is, let's say you wanted to spices from the left. So now if you look at this, it will always be in the center. So you can actually also say that, okay, but I want it to be actually 12 and the offset should be nothing. But as soon as it's a bit bigger than, let's say, if it's a normal desktop size, then I want it to be only for the size of four. And the offset then should also be four because you want it in the middle. So if it's small, sorry, offset and also MDG4. So if it's small, then it's the full size. But as soon as it gets bigger, then it only goes in the middle of the page. And so you can actually style it. I'm just going to remove that. So this is actually pretty neat. As you can see, the offset is also very important. You can find on the documentation it also explains exactly what you can do if the offset and all grid system itself. Like I said, inside the grid. Also always be a container. Inside a container simpler row and inside role is the column she worked with. I can't stress enough how important the grid system is as soon as you have the system under control and you understand it, then like I said, you can create any component that's really responsive to any device. 12. Basic document layout: Okay, so in this section I'm going to create a new document. I'm get, I'm going to create a basic web site using Henri Bootstrap elements. So the first step, what I'm going to do is create a new file. I'm going to call it index HTML. And then what do, what I want you guys to realize and make note is that as soon as you create a new document, a document has basic things. You have to insert the flight, for example, it has to pay their DAC, then the main tag, and then the footer tag. So there are two different things here. That is usually, if you look at a website, let's look to see if I can open a website. So basically in this document, this top part, the navbar every year is the better. Then everything inside here is the main death of all the main tag. And if you go to the bottom, that it doesn't look like this website does have that that typically see another example. Let's see, let's look at these examples. So if we open up this one and you see this is theta, this is the main, and this will be the footer if you look at them. Okay, so you can see there is the footer doesn't seem like they actually used hated on this particular example. But always best practice is to use the either main and footer tags. Ok, so the next step is I'm going to insert Bootstrap. So let's do that. Let's go back to the beginning. So get started. I'm just going to insert this link over here in the head. And then for the js files, I'm going to insert it in the way bottom, like in splint with B2B as just the error. So you start off disability should look like. Okay, yeah. Let's call it pixel code. This is the title of the page. So if we go back to the example that's opened, example logit one index, you'll see it will say on that title year, books, a penguin who learn coding. And seeing the next class. 13. Navbar - most important part of website: Okay, so the first part of EVA website is to get awesome navigation bar. If you don't have a good navigation bar, then your website is useless. So on this documentation, it does a couple of samples here, what we can use for navigation bars. So you can see this is the logos or the name, but you want there and this will be the, it's actually the item that's active or this link. And this is how it would look like when it's disabled. For mine, I want something more sophisticated like this one. So this one has a drop-down added as a search bar. So I'm just going to copy this whole thing over here and insert it into my hey, that over a year. So if I go back to my so penguin, you'll see I have the nav bar over a year, but I would like it to pretty much I wanted to be a darkest color and I want to insert my logo over year. So let's do that quickly. So the first step is that's quickly. Within a couple of things, I'm going to delete this one. Actually, I'm going to live in this search for now. And in the drop-down, I went some things called classes. So I teach two classes. I'm just going to throw away the navigation. And so this is my div with class and I'm going to call F2 clauses. And it's going to call it is bootcamp. And by other causes. Grass grows. Bootstrap four. So I'll go back to my page now. Let's just do this way. Get ok. That's a draw already. Okay, so if I open this, you'll see it says clauses and the clauses. It's this that I want to move this disabled. I'm just going to do that quickly over a year. And it's able to disappear. And you can see. But since my navigation is not that much, I don't want this draw to appear so quickly. And how this actually works is that we have a button of a year. Let's just open up this quickly. So we have this button over here that is the menu bar. It is actually the collapsible. So if you click on this button, it will actually collapse. This target that we say. As soon as you click on this, it will expand this ID. So let's quickly see. And you say C over here, as soon as the navbar is expanded, if it's only on the last advice, then it will not display the menu bar over year. So I'm going to do is I'm gonna change that to do small. Ok, let's actually just try to make it medium. Let's go back. So soon as I make this MD, We will see that. Let's go back. That it actually causes a little bit when the bus width is less. So what I wanna do is that I wanted to make this like extra small. So my navigation should, it should show small is that I've seen. It should actually show up until it's very, very small. To the navigation, I mean disappears when it's actually really small. Ok, so next part is a gaffe clauses. Let's just make another link. I'm just going to call it a belt us. Let's quickly do that. And so it's just going to be an ally with the clause nav. Item. That inside then I just have a nav. Nav. I'm just kinda from now, they'd go No way. And I'm just gonna call it About Us. So this new button, so I've hone classes about us. So I just want them nice logo here, Okay, first off, I wanted this nav bar to be a dark color. I'm just gonna go up here and see now polite, I can say not enough bottom dark fatty fish items that the takes itself is white. Then this background like I want to make it dark. So now it's look absolutely nice. So it's a dark navbar. And I'm gonna insert my logo quickly over Europe and yep, okay, so that's good to find my logo. Okay, inside here, I'm just going to quickly collect an image source. And this is the link to my logo that's online at Club unary. Let's quickly see what it looks like. It can maybe can be too big, had seen way too big. Let's make it smaller. I've gotten really, I can actually just change the image size is smaller or you can actually just change the attributes, but that's the deaths rather. 18. I think 50 should be the right number. 14. Now let's make it like that. Maybe 15. Okay. Let's see if this two. Now it seems like it's breaking astronauts like closure to do much. So let's run them then, change the, this is in two ND. So this means that as soon as it's at this size, it automatically collapses to the menu bar over year, which still works really nicely. Okay, so yeah, no, we created nav bar. Next class on good shared inside a slider and see you in the next class. 14. Slider on Homepage: So we created the navbar and normally a website that has some kind of slider that goes over the page. So I'm just going to use his bootstraps slighted. I know there's a lot of jQuery plug-in slide that's, that's fancier and can do some more stuff and so on. But for this class, I'm just going to use the normal slider that Bootstrap office. So I actually like this. But if you want some text with it, you can actually use this slider here. So I'm just going to go ahead and first, let's create our nav bar Andre there. This will now fall under the main. Essentially all the components you want. Little bit displayed an h, but every page so that for template development, this and this should stay the same on every page you create. So that's why this is addressing the footer tag and an h1 tag and the main tag when you create dynamic websites, you only want to change this part. Ok, so to get that out of the way, I'm going to create a container fluid def contain data through it. So inside here, I'm going to paste in this code that we give. Let's see what this looks like at the moment. So it can't find it images. Let me quickly this instead of my own images over a year. Okay, so I'm just inserting images in this source attribute of a year. I could copy that one image link of a bear. Let's copy this link over here. And this one over here. I'm not gonna do that now, but for best practice should always add an alt attribute because this actually helped a lot of ACO. But I'm not going to cover that now. For now, I just want this to work nicely. I'm also not going to change the text of a year right now, but this should appear on the thin plate. That's me. See. He said this kinda works is we have padding on the vitamin lip item. Like let's just quickly see very moved a container that looks better because I think that the container is maybe storing that. Lets me see. Yes, that looks a bit better than you think. So if I open this up now, it almost looks like a decent website. The problem is, and I haven't actually mentioned this in the previous class. As soon as I scroll down, I actually don't want the navigation that is appear, but we will tackle that later. At this stage, I just want to do some content of wheel as well. But yeah, so this is the slider and books. Well, you can add as many slices you want. So as you can easily see electors, there's this one slide of from here to there. This will be the next slider and next slide. So for argument's sake, if you want to add a new slider, you can just copy and paste and you can say no state at all. If you have a dynamic component, you can just go through look fluid does and gluttony sliders, fluff, BHB. But this is a bootstrap class class, so I'm not going to go into that. But this is a basic slide that I created with Bootstrap. And as you can see, it's super-easy. Berlin and inconvenience. 15. Add some content to the website: I send it to this glosses I created this navigation bar that looks awesome. I'm probably will change the color later on. And I have this slide over here, that's very nice. Now I want to list two of my classes on the knee, fear. Okay? So if I want to create a new container, so it's def gloss, contain letter that will expand. And now what does inside yet I want to get a new row. And inside this row, I'm going to create new columns, two columns that's exactly the same size. Let's do this. Let's first select the first one I got. And so as you can see, nothing really happens. Let's quickly create a new image, the soldier, we quickly get the image source. Okay. This is actually not working what it's supposed to work. Oh, yes, because let's just make sure the image is always on a percent. And now it's under, will always be in the middle except if it's small. So let's open this up, like this. Go down here. It will be always built off of the beds unless it's smaller than the size of a year. So now we're going to create a new heading. I do. I'm just gonna call it a fresh. Look at this. It says CAS close level sediment and Vijay is bootcamp. For good. They'll near it will look like this. Okay, so the next step is, I wanted to create another one that has another clause. Said this class is the gas goes development. Boot strap for. Let's see what that looks like. Ok, so as soon as I expand the bill fold next to each other, and since it's smaller, it will fall underneath each other. So as you can see, this is we are bother. Oh, yes, and let's change. That book. Says Well, let's quickly just. So I need on top of this, I want a little bit of a margin on top so that it's not so close to the slide itself. So I need to do here. If you look at the dogs, there's something called containing can say margin top is let's make it for today said boulder down, let's make it bigger. Let's make a team. And think 70 still IS 65, okay? So five is ionised. Again. As soon as you go down. This doesn't look really nice at all. And it's a bit more structure. And let's also make a margin bottom to actually say margin, why it is for bottom, top and bottom. M15. Then it will also have padding on the bottom as well. Right? So this, actually, when I did this actually not written with a nice second axis, say that it should actually fall underneath each other it, when it's large. So let's make it m LG large. So only if it's big, it will unfold next to each other. But if it's too small, smaller than full underneath each other. So only on the big screens it will look like this. We can also do something like make it into a container which he called cards. So let's quickly the, that I'm going to give me this. God said, that's inside here. See? Padding? Padding. 55. Yes, that looks a bit bit of do you think? So let's do the same thing for the other one. Okay? Let's just make sure my syntax is correct. Ok, let's do this. Fish. Okay, so now it looks a bit better at seeing an opening it up. It'll fall in some kind of cards. And full screen, it will look better, but, okay, now we have the same problem we have previously is that my text is a bit too large. So I'm just going to make sure that this is smaller. Okay, for now, I'm just going to override the font size of style. Let's just call it font size. And let's make it 24 pixels. See if that works. Let's quickly firstly on this one, okay, that's too small. Let's make a little bit bigger like 45 K and that supply that style over to this one as well. So now this should work fine as soon as I open this, okay, it's still a bit different because this name is completed longer than this one. We can actually also try to fix that. Okay, so I'm just going to align them all to the button. Let's see if that looks better. Okay, so with this Cole, I'm just going to say align self end. And it's going to copy and paste this and looked at this one as well. And let's see if that looks splitter. Ok, so now it will expand this images. That's actually nicely a tidy, but now this xy goes up, so it actually still looks at it, read it. So let's do that. So let's just make it 5013. And then we go to six and big data. Okay, so I'm just going to insert another container or the new Vienna with another row. And inside this row, I'm going to make two different sizes of columns. So the first column is going to be col md. And another one that's goal in the circuit four. So let's do a lot of times that's magnetometer, it, know it. Epson. And I'm just going to add that inside a paragraph. And inside this column over here, I'm just going to insert the same image copayments. And if I open this up and you will see this, this, I'm just going to make sure that image isn't. You can actually do an image class. Okay? Just looks okay. So if I go to the bottom here, that takes is on the left and the image on the right. If I do make this smaller, it will then fall underneath the text. As soon as it's on a certain width. So now I can go, for example, like an H3 and say, why is this so important? And then wipe my details of a year. And you could continue with this. You can create another container. And let's just let the syntax and do the exact opposite. So let's say you want this 1 first and this 1 second. We then do this. So now you have this. As you can see, this is a bit too close to each other. And so you can also say, I'm tenured. Margin top. Let's make it five. Yes, Lipitor, spacing. Cool. And let's make this one about the discourse of ego. So let me just copy that image. There'll be image and place them year. Sago, okay? And so basically that's how you can, actually, instead of content, I mean, if you want oh, and note images at all, you can actually just do another container with actually no data images and just say the column. And now you can say something like about this lecture. And then lorem ipsum, say if you go down here, it will say something like this. And if you wanted this about us to be centered, you can just go and say takes center. And there you go about this lake shooter and data takes a good, basically that's all for this class. In the next class, I will see you again. 16. Adding a footer: So next, what you wanna do is add a footer. Footer is actually really cool. I'm just going to add the container again, container to contain them. But instead a container, I'm just going to say a clause for the fruit itself, that's And in the content itself, I'm going to create a road, usually a foot rest, always free things. I'm gonna pick a safe, clean example year. Examples of a year. Let's take this one for example. So you can see it just as something like this. This one actually seems like a desk for column sits as this bootstrap icon here with the logo and stuff like that in features and resources and then a belt. So let's create something similar. Okay, so I'm just going to gossip kinetic gloss around. Inside the row. I can actually just say glass. I'm just going to own all sizes. Maybe Nepal sizes. Make it on the small device bowl. Full of its full write-offs, and let's make it free so that it is four columns. Inside here. I'm going to add my logo. Lets see that this is quickly all done. Okay, so I'm just going to quickly insert my image over here. I'm going to give it a class of image, thumbnail. Okay, let's quickly see, let's refresh this. Just delete that so that we can continue with the other documents. Okay. So I'm going to check why this is all white and background. I think they suffer more from image. But yeah, let's quickly do something like this features. And to add here, the sources here and the belt. Okay, so let's just quickly spell this correctly. So I assume that this will be an H4. Okay, let's just quickly style this. Oh yeah, I forgot something. Yeah, let's make it X4 and X4. One thing I'm gonna do is I'm going to give it the padding to the food that has a huge padding. Like normally it has this nice big padding on the top and at the bottom. So I'm gonna say padding lie. And five. So yeah, this looks nice. This small problem. I'm wondering if it's the image fontanelle, that's the program. Let's see how that actually is the problem. And okay, so this state is now black. No, I don't know why it's black. It actually, I didn't know y's black, but we wanted white. So let's change the text color. I've just say text light. Let's quickly see how that works. And that works beautifully. Okay, so you can see now we have created the food term. We can do stuff, more stuff, but yeah, I mean, you can make this linkable. This is just the basic gist of the foot works. If we go too small, it will actually fall underneath each other. If you do not wish to detect that, then we can just replace the SEM with completely just coal. Coal coal. And coal dust means it will always fall next to each other when something broke. I think it's because I of course I did to it will always fall but you see it over false with versus another. So that doesn't work well. So that's why I actually used as the goal. And so this is the, this is the basic website. And the last part I actually wanted to show you guys, which is really important is you want a sticky bar. We don't want this website to scroll down and you can't access this navigation. So this is actually the cool part on the top of the arrow. And then that ball itself. All you need to do is add a new clause that says sticky. And if you refresh now, what did I do wrong? Okay, I found a mistake since we actually have it inside this container over here. We actually have to make this a to the nav bar. So I'm just going to copy that and then I'm going to delete an F And we get as well. So this head of actually acts as the navbar itself. So it has all the clauses of a year. Since we would refresh. You'll see two sticky boss with them is to actually go inside. You can actually calculate something like this. Let's say we create and let's call it. Let's just make it the paragraph. And we say something like, oh yeah, that you can actually just write into another container that says div class container. And inside this container we have rho. And what am I doing? Okay, this is completely overall amature them div class row. And inside this row I'm going to create two new polemics. And inside you, normally people have like a cell phenomenal invalid raise. So let's make it infer at pixel. And if we refresh, we will see this info type expanded combatant fiscal doubt. It sticks so it disappears as Nietzsche scroll down, I can make this a little bit cleaner. You can say, hey, padding y 32. So it sounds like that and violent saving. Okay, and if you scroll down it sticks side, it's actually very cool. Now it, it's like a decent website. Very nice. And yeah, so I basically made this website from scratch within a short time. And and you can actually make it much more cleaner. The job. This is the basic gist of how to create a basic web site. 17. Introduction to bootstrap theming: In this section, I'm going to explain what sassy, but we also know as ac is, is and it will be covered in this section. 18. What is SASS (scss) : So what exactly is SAS or SPSS? Sas is basically just an awesome more than mimic sees is SAS stands for systematically awesome style sheet says is an extension to seize its. Sassy says he is pre-processing. What it basically means is that it takes an SESS file and converts it to a normal CSS file. Sas is completely compatible with all versions of CSA's. Sas reduces the repetition of CSS and therefore saves time. It's free to download and to use. So why should you use SAS? Style sheets are getting larger and more complex and harder to maintain. This is where CAs is. Preprocessor can help sends let you use features that do not exist in CS as slack variables nested the duals, mixins, imports, inheritance, Bolton functions and other stuff. Why use this in Bootstrap? If you want to change the color scheme in Bootstrap, for instance, chaining the primary and secondary colors, SAS will be the way to do it as easily. 19. Koala: There are a couple of ways to actually converted SCSS files to see a system all CSS files, but I'm going to use koala I will add this to the resource folder. So if you go to koala, you can just download for Windows. And as soon as it's done downloading, you can just go eat and still it. Seeing the next clause. 20. Install NPM: Okay, so the next step is to actually get npm. What is M, M wall, like it says on the website. And it makes it easy for JavaScript developers to share and reuse code and make it easy to update the code that you're sharing. So you can build amazing things for this basically means that as soon as you install bootstrap through NPM and you update NPM, then it will automatically updated to the latest bootstrap should do. You don't need to do that manually. So just go ahead and install this and yeah, I'll see you next class and I will show you how to install bootstrap with npm. 21. Install Bootstrap via NPM: Okay, so now we're actually going to initialize a new NPN inside our project. So this is my folder. I just created the project one and inside your ISM index file. So on Windows you can hold in shift, left shift, and right click on the mouse button and you can open up about shall we know, as much as you do that you say npm init for insulation. And let's see if I can actually, OK, anyway, that's an issue. Press enter. It will say a couple of questions like Pakistan, I'm just going to press Enter for all of them. I'm not gonna go into any of that. And it says Is that okay? I'm I'm just saying yes. And if I click Enter, you will see a new package.json fall inside here. Now in order to install bootstrap through npm, you can actually go to the downloads page and we'll tell you how to do that. So unit says, I just need to do an npm install bootstrap. So let's go ahead and do that. So as soon as I open this back and I say npm install bootstrap. And I say npm install bootstrap, I can just press Enter. And then you'll notice it greater than New Folder over year unless you just click on Node modules and you go into Bootstrap, you will see the files that you need is the js files and the CSS. And I will in a moment just show you how to use these CSS files inside your index.html file. See you in the next clause. 22. Compiling the custom CSS: Okay, so how do you create an AC essays file? Well, okay, I'm going to start first by creating two folders. Let's go back to bootstrap, a Visual Studio. So let's say New Folder of CSS. And I will call the other one is CSS. So in the SESS file, I want to create a new file called, let's call it main.js is inside. I want to import bootstrap. In order to do that, let's just say not to do that. I'll just say at import. And then I need to navigate to this fall over year. So it's going to be evaluated at the ecstasy, but it's actually Node modules. So it's one back Node modules. Bootstrap, SC is, is. And then I want Bootstrap. Css can actually leave out the extinction and we can save. So now we open koala. Just opening it up. Here we go. Okay. So I'm just going to add and go navigate to my folder. And it's wave workspace budget one, okay? And it's CSS. And it automatically specifies it in the same directory, but I don't like that. So I'm going to just go put on a next state output both. I'm just gonna say it's on CSAs and it's going to be called main.css. So as soon as I save that, now this runs. I'm just going to go ahead and deleted this main.css file because that's not the one I use. If I look at this directly over a year at the CSS, lets me it's like I didn't finish main.css. We finish. Let's just to update. Ok. And so they created and have no wife, took so long anyway. So as you can see here, this now abundance of things included in this main.css file. And all we need to do is edit this fallible yet. So in the next class I'm going to show you how to change the default colors of things anywhere before I forget. So now instead of using this city in Bootstrap, all you will need to do now is go and let me go to seize, watch slash main.css. And we can actually get all the other stuff send. Now, it will still work. And it's now linked to the and now it's linked to the local bootstrap file. Okay, so see you in the next class. 23. Changing the default colors: Okay, so theming is really cool because with SAS, we can have to have the ability to actually change the theme colors of the page as seen in documentation. So basically, how this works is, let's say I change this. If you look at this navbar, we let Sam made it the primary color. So let's quickly do that. So I'll have you go to the top together. You'll see I said nav bar, dark, let's say background is primarily the face that it's this weird blue color. That's my primary color. And let's say this button is my secondary color. Lets quickly see others by secondary color. Let's go back to the button. Ok, cool. Is that success? I'm going to say, let's look at the folk of not outline. Let's make it depth and secondary. So if I faced this, the second economy is, is we'll graze color and the problem is this Bloon. So what we can do now is if we go back to our project folder and we go to our says year, just in front of willing actually import bootstrap. We can now define the primary and secondary colors. So I'm just going to say OK, I secondary there. Now, I'm, I like the color audience because that just, just like it. I think it's always the coolest color ever, but my second degree should be let's see. Let's make it a more grayish color. Let's make it like that. And we save. He is as nice to see it actually, gen is that. Let me click you see if this automatically updates. Now. See if I change this main.js is then at that one the CAC essays see AC is, is, and I change this to another color, let's say to the green booklet. But and I press Save, it should automatically update. And let's do that. And that's green now. So the secondary color and so you can give theming now correctly. And let's make this button at danger button. So if I go under here and with that button that we see, it is said sentence, danger. Now, at the moment, danger will be a red button, but let's assume you actually want it to be some kind of a more dangerous for you is more blackish. Let's say that. Then you can actually just add another one and say equals black. If you go back and you produced a fish, that's black. Okay, cool. So yeah, that's basically it. And if you guys have any questions be slipping. No. So this is a cool way to film your bootstrap without Do you messing around with the CSS and these aloft stuff more than I can cover with what makes CACS is of all says so much more powerful. But for now that's it. And I will Yep. 24. Colors and buttons: Okay, so in this class I just want to keep on the go through, you know, both buttons and the colors of its button. And colored, colored in general. As you can see, there's always, if you look at the documentation, they are always it's the default colors like primary, secondary success, then get a warning info, light, dark, and link. So as you need to create a button, let's quickly create one. For example, let's just make a container. If I create a button over here and it's primary, then you will see it will be blue. Let us quickly see a blue colored l. So if I go ahead and change that, let's say the fault. I think it will be like a white scholar. Yeah, I don't think you can actually see that. This is going to zoom in. So you also have the secondary data. Second is distributed lag of the greyish color, I think. Yeah. So there's a lot of colors that go through and so on. And like I showed in the previous section, that you can actually be defined as colors so that your color scheme books for your website. So the other thing with the colors as all the buttons, as soon as you go down you can see there's other types of outline. You can actually outline the color. So if I just change this and say alkaline in between here, you'll notice that this looks a bit different now, only outlets and already if you're our overeat, then it actually shows though color. Then you get something like so. Yeah, okay, so if you want to create a button, it's always first you have to create the class button. This means that there's going to be a button and then you specify what the color of the button will be like this instance I'm just gonna say, let's say tangental. So it's the rate. If I go back over a year, it's a red button. And let's assume I want three buttons and we'll do one small, medium, and large. Then I can just go ahead and look at the documentation here. You can either say button LG or button is m. So default is the normal size. So if I want this one to be Button small, it's going to be let me quickly see. Sometimes we get, okay, I'll be in algae. Bt n as m for small and medium and then btn, LG from large. That's PSG, that works. And you can see it actually small, medium and large. You can also make it a block and we need to documentation. I could actually explains to him. A in depth is a lot of things you can do with buttons. I'm just going to show the basic overall. And you can say the buttons a block, that means that it bound. Fold next shoots out of that and see if I say for example, this one is B tin block. Then this small button will over these two will be next to each other. Let's see if that works. Like you see now this one is the complete full width of the container, and then the other two are acting as animal buttons. This can be ending this button block, especially brooklyn form. And inside a form you want the button to be complete with. I don't think people actually use that a lot of, but you can use that. Then there's something like grouping of the buttons. Status can also be pretty neat. And give you an idea that's just copying pilots these all over the place here. So we have this normal depth that contains this toggle here. And then you can actually show which kind of act of so, let's say the middle one is active. And since this active, and we see, say this one is option one, option 23. So you have this nice stack. You can see that the modal one as opposed to be active. I don't know why it's not cod fish that actually goes to the middle and back to the start. And this see why that is, let's put that first back to active VAW. I think this is supposed to because of a JavaScript function that actually might see that default option. Okay, so there's a bunch of stuff that documentary or they can actually take something specific you guys don't understand, just like No. And I will do my best to explain that. There's a bunch of stuff. And like I said, it's always best to use the default colors because you can actually change that within Bootstrap. When you change the theme of your website, then everything changed in one plane place. It's bad practice to override colored, you can, but it's bad practice to override the colors. So if you have a, let's say a button here, Vienna laws button thing. And you say, let say its engine. And the override that color and say I can background equals blue. If you do something like this, it works. But like I said, this is bad practice. You shouldn't do this at all. Rather, keep it on the default Dan, general order, devote, primary or whatever, and change that. Spss, SAS. Then it is easier, if, especially in the future, to manipulate the theme colors. Because if you guys have any questions, let me know. And I will try my best to explain this. 25. Typography: Ok, so this part is actually the most boring part for me because this is just a topography. And this is basically just take style, the tics layout. You can use new website likely to stay in the documentation. They after the full tailings. If you go place this inside here, you will see that it just has this normal bootstrap A1's that's different than the Joan. Let's just quickly, I do. I always like to put it in a container div. Well, let's just insert the container. So if you remove bootstrap, you'll see it looks a bit different. It doesn't look the same. Bootstrap does style it a bit and make it much more cleaner. But it's not something that's that major. So if you look further down, you actually say that you can actually style this. I don't know why you would shoot would do that. But typically, in a HTML document you should only have one header, one. And then it can have a couple of edge choosing then move into H2 is you're going to have edges fleas. It's extra cup of rules that are to the dog-gone days layout that I'm not gonna go into. If you guys want to know more, you can actually asked me. But for SEO purposes and so on, it's always best to have 11 in your document. So if you want to have to H1 style in your document, you could do something like this and say, okay, you know, if you have a normal polar program that says, this is a normal paragraph. And you go back to this, you will see this is not just normal paragraph. Now you can actually give it the class of H one. Then it will look exactly like the edge E1. So if I say class 19, go back in your document. You'll see it's exactly the same style, something I'd never used. Then there's a couple of other stuff you can do. You can use the small clause, says, well, the suit looks something like this. I'm not going to type it all out. I mean, it is pretty straight forward. I'm gonna documentation actually tells it all. It's good to know this stuff because then you can actually feel like your document correctly. One thing I do actually use a lot is this. But over here. Okay, so before I go to that place, there is a couple of other sufficiency, like he is the lead paragraph, I should copy and paste that. Let's see what it looks like. I'm not sure if expanded, delete or late. Again. So this is the format of that. And let's make the container and bg color. Let's say primary. And let's just see what that looks like. And that's didn't actually change anything. Again. If you go for the topography, you will see this stuff like this. I mean, you can highlight certain texts with Mark. You can go through the lead. You can actually add a delete tags so that as a strikethrough, AES is also strike through. And this is our u is underlined text. Small despotic takes small DAG that takes just smaller. And with strong stone. And B is also the same thing. Just make the text bold. And also, I think did mock-ups Jensen, but, But it or copy and paste this, i think e, m and i is also the same thing as strong and B is also the same thing that will just make sure I'm correct a v here. So if we go back over this document and you place yeah, you see this is exactly the same. These are exactly the same. And so if you're used to and not strong, these are exactly the same tags. I mean, this is just basically the tags you can use in your sided documents. So I always refer back to this open data. Always remember this stuff. So you can just check it out what you need and then use that. As soon as you scroll down to one utility I liked a lot is this block boats. Because a lot of times I want to say something like, you know, let's say this course is important because the document is the list. And first petition. Someone will see. And now I say, OK. Then I can say something like the developer. And for me, you know, go back to this. This is nice. It looks like a quote, like a famous quote that looks like I'm like, I'm someone important. I use a lot of testimonials, especially on websites where people want some testimonials, India website. You can just go down is a lot of stuff you can see here this ordered and unordered list, that's basically this. This list-style, looks like this. If you copy and paste this, I'm just going to show you with this one. If you added like this list unstyled there it means there's no breakpoints and stuff like that in normal extent l. So it will look like this. And on that the first bu l of the god first order, there's a second you'd only it will show the bullet points. And you can also do something like a inland lightning-quick can just remove this. You can also make it the inline so that that takes full next to each other. So list in line, so we just change the list to inline. And this should fall next to each other, which can be a lot of times. Why did it not listed 90 that spelling mistake? Well, yeah. And the clauses inside here should be listened line item i must that be List in line item, every one of them. And then they're next to each other. There's a lot of stuff you can go foun is simple. If there's something you guys need to know or understand correctly, just let me know and I'll do my best to help you. But this is pretty straightforward stuff. See you in the next class. 26. Jumbotron: Okay, so the next part is jumbotron. Especially a favorite of mine is basically v. If I want to lead some part of the Whipple's website stand out. This is actually a good example is it says Hello World, this is the simple you Barbara, and then you can say learn more and click on that. And the syntax is very simple. Lacking the topography is relation. I showed you the topography display for that actually show you or change this text and we buy it anyway. So if I change this instead of this over to my container, now, it will look exactly the same as in the document helloworld bubble blog. So you can do a lot of stuff. Now. H is the horizontal rule and it does a margin. Why? It means that it does have margin, top and bottom of four. We can actually extend that and make it smaller. Smaller is one, then five is the most safe. I actually increase that. You can see it's now bigger than before. And again now say something like this. Okay, let's see. You can actually also change, I think the lack of color. Let me quickly see if that's even possible. It can make a bg and dark and text document like we've dropped out. So let's see. Maybe yes, it's symmetric, takes light now. That'll make more sense. Yes. So you can change the color with the button. You can also change the color is I see it's a loss got buttons if you want it to normal button. And this Jason like that, you can make the buttons colour of secondary or danger or inner. Let's make a danger because this is actually something important. You can just change that. I mean, there's some slight forward. This is actually also very cool. But anywhere in your website, especially phone, if you wanted to attract attention to something specific. But John, I mean, this is old stuff I'm seeing in the next class. 27. Forms: Okay, so now we're at forms. Now forms is actually one of my favorite things because it's so important and it's used all of the time to create the form is relatively easy, especially of the grid system. It's important to have forms for grid system most of the times. So I'm just going to copy this form of a year that will look normal like this. And certainly if I click on yellow and you'll see it has a form element, every form element as a formal group. So as you can see, there's the email password and there's the tick went out. I'm just going to remove this chick because I'm actually I didn't want to concentrate on that too much data model. So I remember I actually showed you with that, let's make something cooler. Let's also add more fields that say, okay, IF and a name. I'm just going to remove the small here. And to just make this text, because this is a text input field. And we have C19. So what I wanna do now is I want to actually make it zoom in the middle of this. I want this form to appear. Let's make it. And the second is loss around. And within that div class row, I'm going to save the if clause, coal. Let's make it MG, ICT and offset. In the two center, it's almost in the middle. To finish, let me see if that works. This all formats to be inside of here. Yeah, so it seems like it's lies incentive model, but now we have another problem. Let's just make it the lockup background, beautiful background so that you guys can see that, say that's deep in this one. I'm just gonna say BGP primary. And that same modulo m, y is five. Let's see, let's see if that looks a bit bitter. Let's, let's look at the padding. Okay, this is actually the best looking form button gets tapped out. Okay? So now I wanted this name. You know, all the splits says it says name and send them in the same field and the email and password in the same row, you know, so that it's a safe space. So now we can do something like this. We can say div class row. And then inside here we can say glass goal six. And now we can actually just do this over, let's see this 1234 fields. Let's make it 1234 fields. Okay. And I'm going to assume that year and that year. And yeah, let's see if it works. Nice. So now we have nine same name, email Andres balls with I'm just going to change the background color because that is so horrific. And let's make a secondary. Always done. I spoke directly, ok, so this is beta. We can actually put the aiding over a year and say something like registering. And if I go here, this register, we're gonna say, say the same thing. And it's, it's, it actually doesn't work. Because I have to say class. Okay. I think this is work that we see. Yep, but works because that will we have It's actually form, but it's done fairly quickly and in a bootstrap makes, makes it nice and easy. And it's very cool. You can't see this text that we said we can actually just make that takes light. Let's see. It says takes muted. So let's check it, takes light and then you can actually see it. Beta will never share your imago of anyone else. We promise. Okay, so this is a basic formula out. And if you guys have any problems or questions, let me know and I will see what I can do. 28. Modal: Okay, so models, models. I'm not sure how you model obvious cookbook doll, Moodle, non-idealities saying the circuit. But anyway, and we're going to call it a model. And it's actually useful tool. It is a popup for Bootstrap, which can contain any kind of information. So you can actually just do some information like that. And all you can do, you know, it's mostly like it can save changes of clothes or whatever. But the cool thing about this is that you can actually sell it the way you want. It's actually relatively simple to create the model. I'm just going to copy this one over here and show you how this works. So if I have the model, let's delete my form over year. Let them to yourself, the container itself. So this part here is the model itself. This is hidden as soon as you open a document. So let's, if I delete this button, you'll notice that if I go back to my document and the fish is nothing and there's no way to await to access the model as soon as I enable this button. So what this button, it toggles model and the target, the target, this is this island over here. So this is how it knows. It needs to open this modal over here. So this model is very simple. Let's make it, give it a title. Let's say, for example, muddle. As soon as you close, open that and show that, that says launch daemon model. So if you click on there, then it actually opened. Since they've changes, doesn't do anything but goes does something you, so you can actually assign the buttons to do's what ever you want it to do. So close actually has this data dismiss modal itself. I'm if you, if you actually did that, then you can't actually close it. There's no way all if we assign this to actually both of these files for this SAC for purposes, then both will work. So this expert cool. You can still within the modal body, you can use anything you want. You can create diff, gloss arose, normal HTML stuff. And let's see like that and that I'm just going to make it the normal N and 100. And let's make this one Loren and let one under it. But that's a little bit list. So if I open this, you can see it actually as this two columns every year with and whatever you want and then suture close it goes is you can use this for a lot of stuff. I mean, I use it for confirmations or if sometimes I even throw in a form over there so that as soon as someone actually that quickly, instead the form that I had previously. Let's copy and paste. So let's find the form of a year. And if I go to this and launch, now I have this form media Ogden, No, but this is just lazy, just if it's Inaki can say, Do you want to register? So you can say something like, I want to make a lot of question marks because it's a very, very important question. And if you place on that, then you have this lack a model. It's a really cool model. Ok, this doesn't make sense. You shouldn't have a button with him because the button is already a year. But you get the gist of it. Okay, cool. And if you have any questions about models and let me know. Yeah, and this is pretty cool. 29. Exercise 1 - building a simple bootstrap product ordering form: Okay, so attached to this exercise, you will find that this link over here, that that's this design. It's an XD Adobe link. If any design, you will see as four pages. There's the login page, then there's similar. That is the registration page. And the third batch is where you can actually add products and so on. And you say add new product. It will have a pop-up model where you can actually just select at product and so on. So the main purpose of this exercise is to just do the look and feel of the website. So it's just a template itself. When you're placing login or register detuned, do anything. It is just the template itself you have to do. And as soon as you click in an ad product shouldn't do anything. This should we just be hyperlink. And after you have done, you can check out my solutions to this. It doesn't look exactly like this. This is just an example of how you can do. You can use the default Bootstrap buttons and the fault headings and so on. We will also see if you go into this space of a year, you can actually download the images. So if you want to use this, is this SVG image or this background image, you can actually just download it and use it as well. And what's nice about this is you can actually see the CAS is behind this, like the background color of this button. Is that this? But like I said, you don't need to make it executable look exactly the same. But just that, the idea behind this good. So what I also want to do is that as soon as it's called, Skinner's solution is smaller than this, gets smaller. This to disappear and only this to show sends on smaller devices you didn't need or want that wasted space over beta. As an issue should be on here as well. So I would assume you would use columns here of column five and column seven over there. And for this, you will also use, use rows and columns. So as soon as this gets smaller, it should fall less products next to each other. Okay, cool. So this is the exercise. I hope you guys have a good time doing this exercise. And I hope my solution will help you guys as well. 30. Solution - Login page with Bootstrap 4: Okay, so on the background size, I'm just gonna say Calvin, back down to the pit. So I'm just going to say cs sin theta. Now repeat and backgrounds size Governor. Let's see if that works fine. Yes, that seems to do the trick. Null. I want that other image in the center here, like in this example, yes, I want this BCE water in the middle of this big data. Okay? So then I'm going to do now is create an image. So in this case I could spell in. Then I'm going to use the SVG. Let's see what this looks like. Now at the moment is centered. It should be on the topo. I don't see anywhere. And I'll just make a comment upon the pixels there. But I think this is the image. I think I've downloaded the wrong image itself like that. Let's you download the image. Yes, the image. Ok, done that. Let's just call it login. Guess in fact, go back here and do the minister logo. But I want it in the same that over years. So how can we do that? Well, that's actually a relatively easy, well, it's bootstrap, it doesn't make it actually get it easy to do so. And so first I'm just going to talk about this as well. In this graph, I'm just going to say class and saying that god has also been under it. And D flicks excited to display, flex and line items, symptom and justify. Competent. So this should justify lambda items in this center vertically and horizontally will either way it on linear I think could be see if that works, is that the locus is a bit small, but we can make that bigger. Let's make them width of the image to unzip it. And we had almost there. Okay, so now for the right-hand side. So we're on this column seven now and it's going to move them back and danger. And we're going to say it so one, H one. And let's go back to this example. It's just going to say a welcome. Xy should say something like legislation, but anyway, welcome login. Please enter your password set. I'm going to make it the one that says welcome. And then x2 saying the loading, this integer email impulse hertz. It should not look the same. It is xy and let's St sensitivity connects a center that takes clause. And see that this almost the same constant, this dilute, similar like this, unless B uses a. So that's, that's what I'm going to concentrate on now at the moment. For now it's just the film itself. Ok, so now for the form we can create. Okay, so to start making a forum, let's talk with Forum, close, open. Then you might get clause before on. If cluster formed inside the label. So the first one is F and its name actually gets email. Email address. For email and open call it being my little self is type will also be emo. There's going to be quiet. Claus is formed control using no Bootstrap styling. And now basically this is it. Let's see what it is. It's like, good, that's looks almost Nice. And then scoped in place this little pulse with itself. Positives all the deployment, but it is possible it. So I see with the example that actually used a placeholder instead of the label, we get an only. See this as backed practice normally because it looks nice as a style, but as soon as people enter the details and so on, there's no descriptions of it anymore. So I always recommend using both. Like for example, you see if you say basically you can say something like a habit, add sampled at home and balls to the is place. All that is e, g. And then if you go over year, then it will say something like this is what is the sample should be and that there's not deposits should be this bags. And I just recommend this because I know you can't get lost. Ethnicity is too much information. Okay? So now for the label itself, I'm going to create a button. And the button itself is going to be primary. And it's gonna say suddenly. You can alternatively also make the button already active and say instead of difficult Save button different deaf and say, okay, the type is submit. Then you can kind of see what will happen if we split us up multiple actually tried to submit the form, but to know where exactly, but kind of works. As you can see, you're basically done now. Quickly. Do this, don't definite account. Sign up here. Okay, so and let's make it a paragraph. And then the link to submit a register. And we're going to create a new list and later on for that one. So it's going to be, and I just said and it's a sign up here. Let's see if that works. Again. To make this a bit nicer with Bootstrap, we can actually put a padding of Vienna so that it doesn't look so set up because India, as you can see this in a lot of padding. So I can just say in this, I can actually do rapid or Vout among deaf, say plus. Adding five, that's maybe the maximum. Why it's not working. Okay, that looks beta. Okay? Another thing is as soon as I made the smaller, I actually want this disappear, does actually kinda, doesn't do bad as well. But for this exercise, I wonder disappeared and just show this welcome screen itself. So how do I do that? Now that's also very easy. Let's go back here. Okay? So this is called MD seven centers and this is medium-size of up. So I think it's, I think it's 998 pixels and up it will then only beyond. Otherwise, if it is small, it will be full screen. So gear, I actually wanted to disappear as soon as it's a smaller screen. So I'll do, I do that. Well, I'll I say is display none. So on standard, it's display none, but as soon as it's on the MD, so it's if it's a medium-sized, then it will displayed rural. So let's see if that works. Yeah. So if it's smaller than only dialog gun registration page shows, but if it's bigger than actually it shows that they only dane. So now it's way and now it's back. And now this is basically the gist of it. I am going to sell this with CS is later on so that it looks more like this. And let's see, they said login now and this is the MIT, let me quickly the deck so we can actually do something like this. Fixed symptom. And what was its Gould logo? No, look good. And let me just see if we can make it that element. You guys, you guys enjoy this. 31. Solution - Registration page with Bootstrap 4: Okay. So for the registration page, it's almost the same as a looking page, except it is a few differences, for example. And you can see the label is left hand side and then the text on the right hand side. And so what I'm going to do now is I'm just going to make a copy of look, looking and just call it g. And then on the right-hand side, I'm just going to phone dot-com. I'm gonna delete that. And this is called the C. Let's create an account. Okay? So if I click on the a register, which is taking over that badge, and now we can they it says read an account, but the reform itself doesn't look the same anymore. So what I suggest we do is let's first start with the first one. And it's going to send from Group. And then inside here, I'm just going to click a colon. And inside git diff does go. I'm just gonna make it Cove. That's meant for and the goal. And psi got eight. I'm going to put the input, the field placeholder. And then let's make it a John Doe type text because the text field level itself is going to be name. And if you have a photo field, I'd think I'd forgotten the previous lecture, the previous example, but you have to put an ID of name. So let's see what this looks like. And you can see this looks more like this now, we can make this bigger and smaller. And if you want to do that, you can just say, again, it is free and this is nine. I'm just going to add all of these, but I'm going to skip this bot. Just easier for you guys to follow suit. The view isn't too long. Like I said, I, here we have it. We can actually now say instead of logging, now we can say it, they just do it. Let's do that. And we can say something like login here. And we can actually say gloss Dixon Line digs a symptom as well. So that it looks like this. If you want the loop by adding one to button, which you can just say Gaussian margin, five. And this should be a huge margin around the button buttons. Well, this is actually to just fit. It. Follows the same rules as a login screen as nuisance to little bit disappears. A few guys, one, something like this. But as soon as it's too small, then the name she can top of this. You can actually do something like this is well, let's just do it on the first one. So IF called free. So we can actually say that only from kohl S, M, three and coal. So if only from small, it's full with, unless it's small or more. So let's see what happens. So if it's small, then the name will be on top and that takes a toll on the bottom. It wouldn't be the squished, enlightened Venice. But I'm not gonna do that for now. As far as I am concerned, I am done for this particular example. And yeah. Okay. Fem funny questions, please do let me know. 32. Solution - Products page with Bootstrap 4: Okay, so for the next batch aids and the product description and this type of card system that's in place. Okay, so what I'm going to do is this. I'm just gonna create a new page. And just kinda cool products L. And I'm just going to insert the number Bootstrap elements in C as well. Okay, so the difference here is I'm going to make this the old backbone image. And I'm going to do that with CSS. So there's going to be background boating, loading, QTL plot. We can find the falls over here. Let's see if that works. Okay, so that's a nice full background image. So we're not going to do next is at the table. So first, what I'm going to do is add a goal. And then inside the container, I'm just going to add, let's see, this note columns exactly, but I'm going to insert in one column plus 12. And inside there I'm going to add a table. So it's gonna be table. Table. Inside there is ten will hit side tell it we're going down at a table. The scope of coal self. Let's just see how many columns did all exactly. So it's 12341234. And let's see, over here. It's put the buildup in the description to this way. What's on the right here? Total. Okay, let's see what that looks like. Ok, that's what background. We can let them get rid of that background. Okay? And so we need that. We have the table, table and that table row. And to me that's a tangled data itself. So in this case, we have 505 and then we distilled water. Let's make it the quantity of one. The price of, let's say $10, and the total beam. And we can do the same for this one. And it's going to copy and paste. Let's make it thrown the 50 millimeter still water quantity, let's say two. And if it costs five bucks, and then let's make it three, then it will be 15 bucks. Let's see if that books. So that works. And it's gonna take if I can already make the table. Just wondering when the background is coming from because one of the chick. Does it coming from the background? Ok. So the Bodhi, I'm just kinda same Modi. And we can actually just do this way, but let's get back ground. It's actually hard to see this. What we can do actually is we can let the body RGB and we can actually make it a 1, 0.0.0. Let's make it 0.8. Oh, let's just see what that looks like. A little bit nicer to read and you can actually get the full width of the body can also be saving min-height. Is Khalid saint and say it means that it needs to be 100%. Let's just move it them percent, uh, sleeping min-height. Or we can do is say the bully and let's see, that looks good, that looks beta. Ok. Now we just need to add them button over here. So we can actually say It's one that will go with the full span of four because it's just, in this study is only one, but I want it to be the fool. And inside it I'm just going to add a button that says deaf. But then let them primarily at product. It says at Prada. Ok, and just wait for a moment. Underneath here you will see this a word is onto a rule doubled as well. Underneath it, it should say, what does the text and the subtotal. So as you can see it, a folder underneath the student. And so what I'm going to do is this. I am going to create a new title loan. This first one is going to be empty, empty, completely empty, multiple span of two. And another dynode data. It says dex to 50 and subtotal, that's it. So let's say decks. Do 15. Let's just make it that. And we can do exactly the same thing and say u sub total. But actually we can just say no to less than suppose we say subtotal. And let's say it's one. But actually this, the mafia doesn't make sense. But I mean this, this example. Once you click the little say tags and this total this. And now we can actually add another column. That's, that's again the same like this. We can add it underneath here. But we can say this time that it is satellite. And we can see place on data. I'm up there. And that doesn't work because I think that takes right to be actually inside yourself fixed, right? Why is it not working? I guess, because I said Style instead of class. Okay, so right above that, to place order. So this is basically it. We can actually justify this to be in the center and stuff like that. But since this is very, yeah, let's just make it a bit. M negative margin top here. The same margin, top equals five. And then it should look something like this, but that, that's doesn't look nice. That's led and make it the padding top. Yes. Okay, that makes most sense. We can actually increase the font size as well. And stuff like that. Is I can actually move the lines well or do it in the way of one structure. But yup, this is the basic, just the fit. And in the next lecture I'm just going to show up at the ad product button. 33. Solution - Products Modal with Bootstrap 4: Okay, so in this lecture, what we're gonna do is as soon as you add new product, this thing pops up and you can select the product and you can then close down, or once you click on that product that should appear year. But like I said, there's this template design for bootstrap. It's not the functionality of the Bootstrap itself that amygdala be seen on the other, my other course Anyway. So to create the pop-up modal is relatively easy and let's just quickly check out yet, I'm going to add a ton of products as well. Because since it's on the same page. So in the documentation, if you look at the Bootstrap modal, it looks like doubly easing. As soon as you place something like that in there, use the button to launch them model and the model itself is on the new field IF relation on this, on my underscores. So if I go over here and click on loans modal blog and it is, but actually want this to appear when I click on add new product. So I can just go to acme product and place this all in there. So if I go back now, I guess the aggregate product and the modal appears. So with this, as you can see, if we, if we click on this at the product, it's actually a rather than beak model. So what I'm going to do is I'm going to make them be a bigger, a bit bigger. So I'm going to add class. I'm going to say muddle. It's L. So if I now open the model, it's actually still small. Let me see what I did wrong. Yeah, so it should be on yet modal Excel since GPA at the same one they read is done modal dialog. Okay? So if I open here and I say a product, we will see this actually not a random breakage model itself. So we've got this. I'm going to just, I'm going to download one of these images and going to replicate it because I don't really want to go through all the effort of inserting anyone. But I mean, if you want to, you can do that. So I'm just going to download that. So omni audit inside here, 12345. So I'll make an insert is actually I'm just going to add four next to each other. Five is a bit too much sun in the middle of the year, I'm going to add a new div class row. And then inside in the And this might get this goal. And that's meant to put in the fee. And inside the item, what do we have? We have to image, then the description and then the button. So let's do that. And they said then this one's make sure yep, it's that one is going to make the style height, but smaller, and let's make it 40 pixels. And on the div. Let's see if that works. This is a button didn't work. Let's just do that. But then a second button, look. Gay is too small. Let's give it a height of five hundred and seven hundred, but let's make it, do it. And we're going to make the claws Tifton line of text center. And the same with descriptions will close. It looks a bit more meeting. You can actually make that plus h3 as well. So let's make it be the text bigger. Yeah, once buckling load to it's almost exactly XES a border of a year and let's do that. Let's go on and get off a boulder. You're going to say, let's give it a border light and let's make it round it. Let's see if that works. And I'm going to see a bowl that had all its MAC, the boredom dark, the borders dog. But now it's actually, so I'm just going to add the continued in silicon as well so that you can XY, that's been displacing cause and then said it's not too much to get h. Okay, yeah, that's beta. Hmm. I'm just wondering about this now. And actually there's that little f at different sides here. Does the bullets and stuff like that. Looks something more like this one over here. Okay. Css as well. And it's still this a bit more that looks like this. But anyway, let's see what happens when I actually at a couple of models. So if adequate up now you can scroll down, you will see actually we can actually add them Bolden beneath this. And the other thing is that see what happens when I go smaller. You see if I go to small like this, it doesn't work. I have to do it and just show it to when it's small. And then when it's completely Small and mobile phone, I think this actually works. So what I'm going to do is as soon as it's small, it should only show two next to each other. Okay, let's do that. I'm just going to go back, back, back. And this is also going to save it bottom, bottom. Okay? So the goal should be six, boulder Water Margin water. Thus books, but this is still in India. Dislodge should actually have. So this is fine. This is falling. This isn't looking at all. This is fine niche and this is fine. So I think let me see. Do ie. Go as him and go in week six. We can actually say then LG sit beam logically just, let's say four. So it'd be like a flea on the level. And then XOR large should be, then actually just be folding. So let's see if that works. Well. I product and yeah, I have to make a couple of them. A product because there's two of them. 221222. This is not working disciplines but XLR supply by about now. I think I messed up somebody again. Oh yes. See I did some spelling spelling mistakes is always some problem. You have to make sure that you say col, LG and Gold Excel. Okay, let's see if that works. So derivative of a product for Dennett for density fluid in the row, one row and one in the row. So this is not put in need and you're going to scroll down and whatever. Because I'm not going to actually use these on the bottom. I can actually remove that from the model itself. So as you can see here, I just want to comment that out, but you can actually move that nearly anywhere on your file. Normally you do have to close or open, or you can actually leave that in. And I can just say save China's alpha equals by dies to do something at a product order, elastic close it and actually close on the top as well. All you can close on the bottom. But this doesn't do anything at the moment. And yeah, so this is actually I started it like I said, I didn't do it exactly this way. This document is and because this would require me to do some CSAs and I I haven't covered cities and this is basically just bootstrap. And what do you do with Bootstrap and everything about Bootstrap itself? I've used some CSS, but if there's something you guys don't understand or something is unclear, please let me know. But yeah, I mean, this is now a function thing and you can send this to your developer after you make it a bit more tidy element I think, is a step of couple of stuff you can do to make it look nicer. This is just a fit and go. I'll be guys had fun with this exercise. 34. Basically bye: Well, why is this? So this was just a basic thing about how Bootstrap operates and how usually it can beam. And I will be uploading more and more projects as it goes by. As soon as you guys have any recommendations of something you struggle with. If something new comes up, What you guys don't understand what Bootstrap for, just let me know. I will be adding more and more projects and templates and double, Adam what assignments as time goes by. But for now, this is it. And you guys will hear from me again and you will see new stuff happening in the future. Guys.