1 00:00:09,300 --> 00:00:16,770 Welcome back in this course, ANES, where are you going to learn how to import these templates? 2 00:00:19,080 --> 00:00:26,220 These templates in your reactions project, I have made these homeplace in French and Trigonal linked 3 00:00:26,220 --> 00:00:31,980 together how you can import these templates by using reciept bootstrap. 4 00:00:32,730 --> 00:00:42,900 And if you have the basic knowledge of Bouchareb, it is very simple and very easy to import to create 5 00:00:43,920 --> 00:00:48,050 these incredible SREP using your Ariete projects. 6 00:00:48,660 --> 00:00:51,040 And it is very simple. 7 00:00:52,080 --> 00:00:58,680 Let us make sure, as you can see, we have here this is the edit page. 8 00:00:59,320 --> 00:01:00,350 This is Home Page. 9 00:01:00,360 --> 00:01:04,080 And if I try to inspect, let us click on inspect. 10 00:01:06,030 --> 00:01:16,050 This is my means, click on Body, click on Def Idy wrote in it, I see you going to see we have. 11 00:01:16,050 --> 00:01:21,330 This is the homepage and if I click on Edman this is the end page. 12 00:01:21,840 --> 00:01:24,650 Click on each home and I can change. 13 00:01:24,660 --> 00:01:31,650 This is I'm going to put this is uppercase letters back in our No. 14 00:01:34,100 --> 00:01:34,470 Yes. 15 00:01:34,770 --> 00:01:37,860 When I put it when I put this in. 16 00:01:40,030 --> 00:01:42,560 Yes, like this, very good. 17 00:01:43,270 --> 00:01:51,040 This is the home page, this is the admin page, so and if you have some narration, bootstrap the best 18 00:01:51,370 --> 00:01:52,050 knowledge. 19 00:01:52,060 --> 00:01:53,170 It is very simple. 20 00:01:53,830 --> 00:01:55,920 You're going to see what we have here. 21 00:01:56,950 --> 00:02:04,510 And we when you use Bouchra, for example, when you have, for example, in a row, OK, and you're 22 00:02:04,510 --> 00:02:14,950 going to see the width of different columns, that's three miles to have in a row is 12 when you use 23 00:02:15,130 --> 00:02:16,650 USRAP, for example. 24 00:02:16,990 --> 00:02:32,590 And in our case, we have one draw, the one who we've 12 a lack we'd like a 12 like a weed's using 25 00:02:32,590 --> 00:02:33,000 react. 26 00:02:33,010 --> 00:02:36,840 Bouchareb ends in a side of this row. 27 00:02:37,090 --> 00:02:46,870 We have tried to use what we call in, bootstrap the nested roll and the nested columns and each side 28 00:02:46,870 --> 00:02:52,420 of this row which has which has a twelth like a width. 29 00:02:52,630 --> 00:02:54,730 We have two columns. 30 00:02:55,240 --> 00:03:03,460 This is the first columns and the second columns, the fifth columns and has eight, like it reads in 31 00:03:03,460 --> 00:03:10,950 the second column, has a four like a will like it with a K. 32 00:03:11,620 --> 00:03:22,630 So if we try to take a look in this template and I have tried to to underline, you can see this is 33 00:03:22,630 --> 00:03:32,400 the first through OK Erro in which we have 12 like weeds and inside here we have two column. 34 00:03:33,100 --> 00:03:35,680 This is the first column and the second column. 35 00:03:35,680 --> 00:03:36,700 The first columns. 36 00:03:37,120 --> 00:03:45,060 The first column is it's like a weed and the second one is has four. 37 00:03:45,640 --> 00:03:53,170 And here we have tried to create different roles in each side of this column. 38 00:03:53,590 --> 00:03:54,690 It is very simple. 39 00:03:54,700 --> 00:04:02,770 I think that if you have already the basic sense of the bootstrap, you've got to understand that it 40 00:04:02,770 --> 00:04:03,650 is very simple. 41 00:04:03,670 --> 00:04:07,830 So let us begin here and this is what we're going to do. 42 00:04:07,840 --> 00:04:12,030 The first thing we are going to do is to create a filter. 43 00:04:12,090 --> 00:04:20,360 OK, and so we are going to create OK to do something about this. 44 00:04:20,980 --> 00:04:27,430 OK, which has a twelve is a twelve like a width. 45 00:04:28,000 --> 00:04:36,950 And we are going also to do something in such create the two rows and create two columns in which we 46 00:04:36,950 --> 00:04:44,200 give it like a we in the first column and for like a within the Feighan column. 47 00:04:44,560 --> 00:04:50,920 So let us make sure oring if you use your codes and we're going to come in our home, do this and we're 48 00:04:50,920 --> 00:04:58,190 going to go step by step, OK, we're going to learn how we can use these reactions. 49 00:04:58,630 --> 00:05:04,660 So what we're going to do, the first thing we need is to remove Finsterwald This is the homepage. 50 00:05:05,140 --> 00:05:12,340 We're going to remove all this before starting and to create our researcher. 51 00:05:12,340 --> 00:05:18,560 We are going to create different classes containing different classes. 52 00:05:18,590 --> 00:05:21,240 OK, but this is this rule. 53 00:05:21,910 --> 00:05:23,070 We're going to come here. 54 00:05:23,110 --> 00:05:30,800 We're going to say conter, OK, continuer Latisse and continuer is from Riet Bosra. 55 00:05:30,940 --> 00:05:32,440 OK, yes. 56 00:05:32,440 --> 00:05:33,610 Like this container. 57 00:05:33,610 --> 00:05:36,490 And you can see container is not defined it. 58 00:05:36,790 --> 00:05:40,390 So you must import, you must use container. 59 00:05:40,390 --> 00:05:42,940 You must import container from react Bouchareb. 60 00:05:42,940 --> 00:05:49,050 So reason why you need to come here and say container from. 61 00:05:49,780 --> 00:05:55,090 And once you say it like this from you, you tap on contorts piece you say right. 62 00:05:55,180 --> 00:06:01,050 And you're going to see you have react mushroom click on reabsorb put slash and you're going to say 63 00:06:01,070 --> 00:06:01,840 container. 64 00:06:02,470 --> 00:06:04,180 OK container. 65 00:06:04,300 --> 00:06:10,720 And if you try to say contorts piece you're going to find a container inside of three Bosra. 66 00:06:11,350 --> 00:06:17,020 OK, so let us put it like this and let us go back on a repeat here. 67 00:06:18,390 --> 00:06:25,530 Let us reloads, speech, reload here in the homepage, we are in the home page, and if you try to 68 00:06:25,530 --> 00:06:29,380 click on Bodey, click on this idea routes, you will find. 69 00:06:29,440 --> 00:06:33,260 We have a div having a container class. 70 00:06:33,570 --> 00:06:34,870 This is the bouchra. 71 00:06:35,080 --> 00:06:41,340 OK, and here we are using Reetta, right. 72 00:06:41,340 --> 00:06:41,940 Mousetrap. 73 00:06:42,150 --> 00:06:46,500 But in our Radom, it's knows that it is it bouchra. 74 00:06:46,530 --> 00:06:56,400 Plus a reason why you need Frayser to import your mousetrap here in your updo, just like it is very 75 00:06:56,400 --> 00:06:56,910 simple. 76 00:06:56,910 --> 00:07:05,040 And there is so here in our doges we are using Reetta, Bosra, and the second thing we need to do is 77 00:07:05,040 --> 00:07:06,560 to create Iroh. 78 00:07:07,140 --> 00:07:15,630 OK, this is Erro having twelth like with it as big here and how to do that. 79 00:07:15,630 --> 00:07:21,810 We are going to come here and we're going to open in a record Brace's and we're going to say roll like 80 00:07:21,810 --> 00:07:30,840 this and throw Roraima say by default or row heads with a like width. 81 00:07:31,530 --> 00:07:36,230 And if we try to see here you're going to see is not definite. 82 00:07:36,540 --> 00:07:38,070 So we're going to do the same thing. 83 00:07:38,080 --> 00:07:39,050 I'm going to copy. 84 00:07:39,420 --> 00:07:42,720 We must also import borrow from Reetta. 85 00:07:42,990 --> 00:07:48,270 Will SREP roll like this and come here, say 86 00:07:50,700 --> 00:07:51,300 Actis. 87 00:07:51,600 --> 00:07:58,590 OK, and if I try to make here in inspect let us reload page. 88 00:08:00,610 --> 00:08:01,230 Writ large. 89 00:08:01,620 --> 00:08:06,290 OK, click on Buddy and we're going to go a. 90 00:08:07,760 --> 00:08:15,150 Step by step, the container, as you can see, we have the sergant plus the second def having real 91 00:08:15,360 --> 00:08:25,160 world class very goods and what's required to do is to create the nested row and the nested column system. 92 00:08:25,170 --> 00:08:28,400 And we're going to say, Carl, why can't you build on this? 93 00:08:28,400 --> 00:08:29,120 And Wacol? 94 00:08:30,050 --> 00:08:34,210 And so we have the Fifth Column and we have the second column. 95 00:08:34,670 --> 00:08:42,200 And here what we're going to say, we are going to use the bootstrap class, L.G., and here I'm going 96 00:08:42,200 --> 00:08:45,620 to say is equal to eight. 97 00:08:46,260 --> 00:08:46,810 We can't. 98 00:08:48,730 --> 00:08:50,160 Is equal to AIDS. 99 00:08:51,160 --> 00:09:00,990 Uh, I'm going to take this and think I'm gonna take this and I'm going to put here and here I want 100 00:09:00,990 --> 00:09:06,480 to say is equal for OK, and Carl is not defined. 101 00:09:06,690 --> 00:09:08,130 So what are you going to do? 102 00:09:08,190 --> 00:09:14,760 We are going to do something we must imports column from react. 103 00:09:14,760 --> 00:09:17,010 Bosra, let us copy. 104 00:09:17,550 --> 00:09:26,370 It has passed and you can see that the online documentation of reactors and you want to learn more about 105 00:09:26,370 --> 00:09:27,680 the great system. 106 00:09:27,840 --> 00:09:30,150 OK, let us come back here. 107 00:09:30,870 --> 00:09:36,050 Click here you the Federal Open Container Cluster. 108 00:09:36,240 --> 00:09:41,410 Click on it and you will find we have these different these cartels. 109 00:09:41,460 --> 00:09:44,070 OK, it is Bushrod. 110 00:09:44,250 --> 00:09:48,090 I think that it is now very clear and very simple. 111 00:09:49,770 --> 00:09:51,540 And what's he going to do here? 112 00:09:51,780 --> 00:09:57,330 I'm going to advise you to make some background, OK, in order to. 113 00:10:00,100 --> 00:10:01,750 A to see.