WEBVTT 00:00.530 --> 00:05.660 So in the previous video, I have mentioned that we're going to be using bootstrap. 00:05.690 --> 00:11.870 I think it's a good time that I explain why I've decided that's a good idea. 00:11.870 --> 00:19.250 Then what bootstrap is, and then we're gonna go through the classes that I have already applied to 00:19.280 --> 00:23.330 some of the views of our starter boilerplate. 00:23.360 --> 00:24.980 So what is bootstrap? 00:24.980 --> 00:32.810 Well, you can call it a CSS framework or CSS library, or alternatively, just what they say, which 00:32.810 --> 00:35.660 is the feature packed frontend toolkit. 00:36.080 --> 00:40.340 So in our project, bootstrap was already set up by me. 00:40.520 --> 00:42.140 It's quite easy to do. 00:42.140 --> 00:45.590 So let me quickly explain how you can do it yourself. 00:45.590 --> 00:52.400 So the best way is to jump to this introduction section on the Bootstrap Docs page and just follow the 00:52.400 --> 00:53.180 steps. 00:53.180 --> 00:56.000 So you just need to add a meta tag. 00:56.000 --> 01:00.620 And then you just need to link to bootstrap CSS and JavaScript. 01:00.650 --> 01:07.700 You need to place this specific link element inside the head section, and at the end of the body section 01:07.740 --> 01:12.690 this specific script tag, you can just copy them right from this page. 01:12.690 --> 01:18.030 So bootstrap comes with some CSS, but also with some JavaScript. 01:18.030 --> 01:23.760 And this points to a server that is called CDN. 01:23.790 --> 01:26.400 That's a content delivery network. 01:26.430 --> 01:34.980 Essentially that's a special kind of server for quick delivery of assets like CSS or scripts that will 01:34.980 --> 01:42.240 make those assets super quickly available to all the visitors of your page baths. 01:42.780 --> 01:50.670 Now, I wanted you to know that a bootstrap has every single framework is a complicated project. 01:50.670 --> 01:57.480 There might be a lot of things that you would have to learn yourself if you'd like to use it, or you'd 01:57.480 --> 02:00.360 like to use it to its full extent. 02:00.360 --> 02:07.140 And just a disclaimer that I will not cover bootstrap in depth in this course. 02:07.140 --> 02:14.010 So we are using it because it's super easy to get started and it's super easy to use some of the interesting 02:14.010 --> 02:19.540 features, but the course itself is about PHP, so I'm not gonna go deeply into. 02:19.570 --> 02:20.440 Bootstrap. 02:20.530 --> 02:26.620 You can just jump and read this docs for any specific use cases that you might have. 02:26.650 --> 02:29.980 Anyway, you should know that bootstrap is configurable. 02:29.980 --> 02:38.050 It comes with some predefined classes that you can call utility classes, for example to work with grids 02:38.050 --> 02:40.420 to create containers. 02:40.420 --> 02:43.030 So for responsive design. 02:43.030 --> 02:49.360 And the most important thing that it comes with is basically the components. 02:49.360 --> 02:53.110 So this is for example full forms. 02:54.400 --> 02:57.130 You can have some pre styled form elements. 02:57.130 --> 02:59.050 And this would be important for us. 02:59.050 --> 03:05.440 That's something that looks much better than all the default browser styles. 03:05.440 --> 03:12.190 Now if we take a look at this example, you can see how easy it is to achieve a pretty good looking 03:12.190 --> 03:16.930 style of your form elements by just applying a single class. 03:16.930 --> 03:25.230 So you just need to use those specific class names which you can figure out by looking at the docs. 03:25.230 --> 03:32.850 For example, you need to wrap a specific checkbox with this form check class inside a div element. 03:32.880 --> 03:35.340 Then you place an input and label. 03:35.370 --> 03:38.970 They also need to receive some specific classes on them. 03:38.970 --> 03:40.050 And voila! 03:40.080 --> 03:41.880 You've got a style. 03:41.880 --> 03:44.400 So this is how you can style the form elements. 03:44.400 --> 03:49.440 But maybe what's even more important to us are those components. 03:49.440 --> 03:54.630 So there are some pre-built user interface elements like this card in here. 03:54.630 --> 03:58.950 It might look a little bit like this, but you can customize it. 03:58.950 --> 04:01.200 And there are different elements that you can use. 04:01.200 --> 04:06.390 So you typically just wrap the div element with a card class. 04:06.390 --> 04:15.150 And then you use inside some of the additional classes like card body or card title or card text to 04:15.180 --> 04:16.980 achieve different styles. 04:16.980 --> 04:18.720 Same goes with buttons. 04:18.720 --> 04:26.940 You can just add this btn class and then additionally style it with the specific styles of the button 04:26.940 --> 04:31.390 like the primary button, the secondary button, so on and so on. 04:31.420 --> 04:35.290 All of those classes can be found inside the docs. 04:35.290 --> 04:38.320 You can see all the possible styles. 04:38.320 --> 04:43.600 So as you can see, this gives us quite a lot of to work with. 04:43.600 --> 04:51.580 And essentially almost all the user interface requirements can be covered by just using bootstrap. 04:51.580 --> 05:02.350 And what's most important in building projects quickly is you basically have good looks out of the box. 05:02.350 --> 05:09.850 So essentially, I think that we actually have covered a lot of bootstrapping this video, because you 05:09.850 --> 05:17.020 just need to set it up by adding the pointer to the CSS file to JavaScript file. 05:17.020 --> 05:23.500 And then you start using classes and you end up with something that looks like this. 05:24.040 --> 05:25.780 Now let's jump to our project. 05:25.780 --> 05:33.970 So I'm quickly gonna go through the components or classes that I have used behind the scenes to build 05:33.970 --> 05:36.220 something that looks like this.