WEBVTT 00:00.170 --> 00:05.720 So in this video we're going to take a look at some of the classes that I've used. 00:05.750 --> 00:11.630 Now you can probably tell that this app immediately looks much better than the previous apps. 00:12.650 --> 00:15.110 So let's jump into the layout. 00:15.140 --> 00:19.100 The main layout, the only one we have in this boilerplate. 00:19.100 --> 00:22.520 So we did all the steps from the bootstrap docs. 00:22.520 --> 00:25.040 I've got this meta element. 00:25.070 --> 00:34.310 I've got a link to the bootstrap CSS file from the CDN, from the content delivery network, and at 00:34.310 --> 00:41.390 the very bottom of the file, I've got the script for all the functionalities that require JavaScript 00:41.990 --> 00:42.620 baths. 00:42.800 --> 00:49.490 Now, after setting up bootstrap, which as you've seen, is super simple, you just can use those bootstrap 00:49.490 --> 00:50.810 classes anywhere. 00:50.810 --> 00:55.640 And as I've said previously, there are different kinds of bootstrap classes. 00:55.640 --> 00:59.540 So there are classes that do something with the layout. 00:59.540 --> 01:02.120 This can for example add a Other container. 01:02.150 --> 01:03.260 A grid. 01:03.320 --> 01:11.270 Then you can have some classes for the forms or classes that have some more complex predefined styles 01:11.270 --> 01:12.740 like components. 01:12.740 --> 01:20.840 But there are also utility classes to work with, flexbox borders to easily be able to change backgrounds, 01:20.840 --> 01:21.710 etc.. 01:22.670 --> 01:30.950 So bootstrap was probably the first library that popularized the concept of using those utility classes 01:30.950 --> 01:39.680 to either just change one CSS property, or just create full components that can apply a lot of styles 01:39.680 --> 01:40.820 at once. 01:40.850 --> 01:48.170 Now, since bootstrap came to be, and that was a long time ago, there are more popular libraries like 01:48.200 --> 01:49.610 tailwind CSS. 01:49.640 --> 01:52.790 Now tailwind is great and I'm using it daily. 01:52.820 --> 01:59.000 The problem with tailwind is that you actually need to design everything yourself so you don't get ready 01:59.030 --> 02:02.700 made components like those buttons or search boxes. 02:03.000 --> 02:06.090 It's just possible to make those. 02:06.090 --> 02:09.270 But you still have to design everything yourself. 02:09.270 --> 02:16.620 And I just thought that for a course like this where we focus on PHP and making websites, I don't really 02:16.620 --> 02:22.410 want to teach you another skill along the way, which might just confuse us. 02:22.800 --> 02:29.160 That's why I think it's just easier to use bootstrap, which is still popular, still fine, and I think 02:29.160 --> 02:33.210 it is still used a lot and is still a very good library. 02:34.080 --> 02:41.730 Now let's just go back to how I have used bootstrap so far, because you can probably tell that some 02:41.730 --> 02:48.330 bootstrap was already applied because the app looks different than what we have in the project number 02:48.330 --> 02:49.050 two. 02:49.080 --> 02:55.710 So I think that the best way would be to open the DevTools and just go step by step by analyzing what 02:55.710 --> 02:58.290 classes do we use and what do they do. 02:58.380 --> 02:59.970 So let me select something. 02:59.970 --> 03:08.550 Maybe the main element Or maybe let's start with the body so we can see that a lot of those classes, 03:08.550 --> 03:12.840 they just change one specific CSS property. 03:12.840 --> 03:13.890 For example. 03:13.890 --> 03:19.530 This one is making sure we've got the view height that takes the whole available space of the browser. 03:19.560 --> 03:29.100 Deflects is making the element a flex container, which makes it much easier to align justify elements 03:29.100 --> 03:31.890 inside such a flex container. 03:31.920 --> 03:40.110 Then inside header we've got a nav element with some classes navbar, navbar, expand, large navbar 03:40.110 --> 03:48.930 light, etc. this is actually a component, so that's one of the kind of classes that bootstrap offers. 03:48.930 --> 03:55.590 That's a ready made component that offers you some set of classes where you can easily add dropdowns, 03:55.620 --> 04:02.280 links, search boxes, buttons, etc. it also comes ready with. 04:03.780 --> 04:11.250 this burger button that lets you expand and see all the menu options, which is super useful because 04:11.250 --> 04:14.760 it's not so easy to do such thing yourself. 04:16.410 --> 04:21.720 So those classes like Flex or Flex column are about the layout. 04:21.720 --> 04:23.430 So is container. 04:23.430 --> 04:26.970 So let me jump to container because this one is useful. 04:26.970 --> 04:31.020 And it's called the same way in every single framework. 04:31.020 --> 04:35.340 So we need to jump to the layout utilities. 04:35.520 --> 04:37.020 There it is container. 04:37.020 --> 04:44.550 So essentially the container class will add the maximum width property at every specific breakpoint. 04:44.550 --> 04:47.460 Breakpoints are essentially the screen size. 04:47.460 --> 04:52.380 So if the screen will get the specific size. 04:52.380 --> 04:54.690 Here are the predefined breakpoints. 04:54.690 --> 05:02.700 The maximum width will be set more or less the same as the breakpoint value, which means the maximum 05:02.730 --> 05:09.000 width of the page, which will always be a little bit smaller than the actual browser size. 05:09.000 --> 05:14.220 You can see that right here, that there is some gap on the right and on the left. 05:14.220 --> 05:21.210 And as I resize this, you can see that the size of all the elements is different, and it is adapting 05:21.240 --> 05:25.740 to the size of the browser, which makes our project responsive. 05:25.770 --> 05:32.640 By default, it should look and work great both on mobile and tablets and computers. 05:33.570 --> 05:42.120 So other than the layout classes like container, we've got small utility classes like mp4, which means 05:42.120 --> 05:44.550 margin at the y axis. 05:44.550 --> 05:54.180 So at the top and at the bottom size for this one here empty five is add a margin at the top size five. 05:54.210 --> 06:00.120 When I hover this element you should see that the margin is orange. 06:00.150 --> 06:06.160 Then the paddings should be green and the actual size of the element is in blue. 06:06.190 --> 06:10.480 So you can see those colors here, but only when I hover over the element. 06:10.600 --> 06:15.100 Next up, the element inside it has the row class. 06:15.100 --> 06:20.440 So you can check what specific properties does it modify on the right. 06:20.440 --> 06:23.890 So row is making it a flex container. 06:23.920 --> 06:26.920 Now I'm not going to explain what a flex container is. 06:26.920 --> 06:29.470 As I've said it's a more complex topic. 06:29.500 --> 06:35.320 You can read that inside the bootstrap docs, but it helps you align items. 06:35.350 --> 06:43.030 Adding this justify content center is centering the elements inside this div class with the row class 06:43.030 --> 06:44.590 well at the center. 06:44.590 --> 06:49.990 So as you see, that's an easy way to center a div inside another one. 06:50.680 --> 06:56.890 Next up we've got this div element which has this mysterious class called Md6. 06:56.890 --> 06:59.320 Well let me try and explain that. 06:59.320 --> 07:03.940 So this is relying on the bootstrap grid system. 07:03.940 --> 07:08.440 That's not CSS grid, it is bootstrap own grid system. 07:08.440 --> 07:10.930 That's flexbox based. 07:10.930 --> 07:19.750 And I would invite you to just go ahead and read about grids in bootstrap in this page and also read 07:19.750 --> 07:21.250 about flexbox. 07:21.310 --> 07:25.720 But to cover it quickly you've got some predefined columns. 07:25.720 --> 07:34.720 Specifically, it's assumed that there will be 12 columns, but you can span multiple of those columns 07:34.720 --> 07:36.340 to achieve effects like this. 07:36.340 --> 07:43.450 To have three equal columns, you can also use the natural width of the column based on the content 07:43.450 --> 07:44.290 inside. 07:44.560 --> 07:47.980 You can make columns wider, smaller. 07:48.010 --> 07:53.020 You can span multiple of those virtual 12 columns. 07:53.020 --> 07:55.660 And also then you've got breakpoints. 07:55.660 --> 08:05.830 So you can define that scenes a specific screen size, which is for MD, for example, at least 768 08:05.830 --> 08:06.550 pixels. 08:06.580 --> 08:12.550 The column should have specific size or should span a specific number of columns. 08:12.580 --> 08:21.220 As you see, I've said that there are 12 columns by default, so if we now go back and try to understand 08:21.220 --> 08:23.680 what is this actually doing? 08:23.710 --> 08:28.120 So row makes this div element a flex container. 08:28.120 --> 08:38.110 And inside this is actually spanning six columns out of 12, but only after the specific minimum width 08:38.110 --> 08:41.380 of the page which is 768. 08:41.410 --> 08:49.930 Because this is a medium breakpoint essentially in plain language, six columns out of 12 makes this 08:49.930 --> 08:52.270 column width 50%. 08:52.300 --> 09:00.700 But if the screen size is smaller than this minimum width, this class is not applied, which basically 09:00.700 --> 09:04.630 would make this element with the form. 09:04.660 --> 09:10.930 Take the full available width, because that's the default behavior when you have an element inside 09:10.930 --> 09:12.280 a flexbox. 09:12.280 --> 09:19.420 So I'm telling you all those things, but obviously it might be hard to remember it all or to understand 09:19.420 --> 09:29.260 it all, especially if you have a little or even zero knowledge about CSS and especially CSS frameworks. 09:29.290 --> 09:33.850 Well, I think that there is really no way around that. 09:33.850 --> 09:40.270 If you have zero CSS knowledge, you just need to bear with me and see me use those classes, which 09:40.270 --> 09:45.850 I will try to explain, because obviously we're gonna be using the bootstrap classes. 09:45.850 --> 09:51.520 I'm going to add new elements to this app, and then I'm gonna explain everything as we go. 09:51.550 --> 10:00.280 But I would invite you to read more from the docs about all those grids and flex boxes. 10:00.430 --> 10:06.860 Otherwise, you might really have trouble understanding this, but I'd like you to keep in mind that 10:06.890 --> 10:12.230 while it's nice to have a good UI, it's not an essential part of this course. 10:12.230 --> 10:16.670 So you are not expected to learn bootstrap or to learn CSS. 10:16.670 --> 10:20.750 We are learning PHP and making backend applications with it. 10:20.780 --> 10:21.890 Websites. 10:21.890 --> 10:28.370 We are not really learning CSS in this course, so if you want to skip it completely and ignore styling 10:28.370 --> 10:32.870 or use whatever you prefer, you are free to do so. 10:32.900 --> 10:35.420 And going back to our app. 10:36.530 --> 10:41.930 If I now look inside this element, we see another div element with the class card. 10:41.930 --> 10:45.560 So this is what gives this rounded border. 10:45.590 --> 10:47.510 Then we've got card body. 10:47.540 --> 10:52.370 That's another set of classes from a component that's called card. 10:52.400 --> 10:54.140 Then we've got a card title. 10:54.140 --> 10:59.060 And inside we've got some classes for the forms. 10:59.060 --> 11:04.310 Also this button is actually a component that's called button. 11:04.310 --> 11:10.880 So I'm not going to go into every single class, as I've said, just to give you an overview of how 11:10.880 --> 11:18.560 it all works, that there are container or layout classes, that there are also another category of 11:18.560 --> 11:24.410 utility classes to control margins, paddings, text, colors, backgrounds. 11:24.410 --> 11:27.020 And then the third biggest category. 11:27.020 --> 11:36.620 That was the most important reason I've decided to pick bootstrap was components like the navbar, the 11:36.620 --> 11:44.390 cart, the buttons, pagination, etc. so I think we're going to create a good looking app. 11:44.390 --> 11:48.440 I think that's enough introductions to bootstrap. 11:48.440 --> 11:54.560 I think it is understandable why we are using it and that it is still a good choice. 11:54.560 --> 12:03.410 And next up we will begin actually working on our app, using our boilerplate framework that we've built 12:03.410 --> 12:03.950 so far. 12:03.950 --> 12:05.120 And bootstrap.