1
00:00:01,220 --> 00:00:07,370
Hello, in the video, we are going to cover laying out your form, so it's obviously already laid out

2
00:00:07,370 --> 00:00:15,070
by default, but everything is just sequentially after each other on top of each other.

3
00:00:15,330 --> 00:00:20,480
Might want to organize it using the amazing bootstrap column system next to each other.

4
00:00:20,480 --> 00:00:23,610
Whether you want one component, I mean two components next to each other.

5
00:00:23,810 --> 00:00:29,600
Three, four doesn't really matter if you always consider one too many because depending on the screen

6
00:00:29,600 --> 00:00:33,030
size and in general it can, you know, just not look too good.

7
00:00:33,030 --> 00:00:38,220
But again, that's personal preference and what size the size of each item is.

8
00:00:38,540 --> 00:00:43,820
There's various ways that you can implement, you know, the layout system.

9
00:00:43,820 --> 00:00:49,550
And they're all covered here in a horizontal home, the size in order, size in the size.

10
00:00:49,550 --> 00:00:51,170
And it's pretty cool as well.

11
00:00:51,410 --> 00:00:58,760
I will provide a link to this in the description so you can check that out.

12
00:00:59,180 --> 00:01:03,450
And the we're going to use a basic example.

13
00:01:03,450 --> 00:01:06,990
So essentially what I want to do is these two checkboxes.

14
00:01:07,040 --> 00:01:08,620
I want to put them on the same line.

15
00:01:09,050 --> 00:01:13,070
So if we go here, the checkboxes are right here.

16
00:01:13,100 --> 00:01:22,670
So these are the checkboxes inreality to do that, what we should be doing is sort of changing everything

17
00:01:22,670 --> 00:01:23,110
else.

18
00:01:23,390 --> 00:01:29,690
So we want the we don't want this in a row anymore and we don't want it in a column anymore.

19
00:01:30,230 --> 00:01:37,150
So that is a different way of doing this and lets us sort out the indentation while we're here.

20
00:01:39,580 --> 00:01:39,680
The.

21
00:01:46,930 --> 00:01:50,260
OK, so there you go.

22
00:01:50,290 --> 00:01:54,210
OK, so indentation is sorted on the phone itself.

23
00:01:54,220 --> 00:02:02,270
We want a class of row and on all of these component, you know, form component dips.

24
00:02:02,420 --> 00:02:09,040
This is where we want our columns to kodesh, 12 for all of them for now, just because we're going

25
00:02:09,040 --> 00:02:12,300
to have them all on top of each other.

26
00:02:15,760 --> 00:02:21,870
But I will show you what we're going to be doing with the checkboxes momentarily.

27
00:02:27,220 --> 00:02:30,770
If you save that refresh, this is what we get so far.

28
00:02:31,030 --> 00:02:39,020
So let's put these are next to each other and what we actually need to do for this one.

29
00:02:39,040 --> 00:02:40,060
So find it.

30
00:02:45,610 --> 00:02:48,310
It has to do.

31
00:02:49,960 --> 00:02:55,020
Just like so we can get rid of this and be free.

32
00:02:55,060 --> 00:02:57,340
We do not need that anymore.

33
00:02:58,900 --> 00:03:00,300
Get rid of this here.

34
00:03:02,740 --> 00:03:03,230
There we go.

35
00:03:03,250 --> 00:03:04,600
It is on top of each other.

36
00:03:04,630 --> 00:03:10,810
Now, you can add a bit of styling to let's say the last one or two is horizontal.

37
00:03:10,810 --> 00:03:21,010
You might also notice the horizontal row is a bit wider if because we need to put a div because it's

38
00:03:21,010 --> 00:03:26,030
literally just a very simple no element.

39
00:03:26,050 --> 00:03:32,490
I will put it all on one line and I'm going to put a glass of cold that's 12.

40
00:03:32,950 --> 00:03:37,860
So that refresh, as you see, this is now fixed and is looking a lot nicer.

41
00:03:37,950 --> 00:03:40,320
Now this we need to also fix.

42
00:03:40,540 --> 00:03:44,260
So let's copy this paste here.

43
00:03:44,560 --> 00:03:46,500
Five refresh.

44
00:03:46,550 --> 00:03:47,380
There we go.

45
00:03:47,740 --> 00:03:50,100
Edit or looking great now.

46
00:03:50,120 --> 00:03:52,060
So that is all you have to do.

47
00:03:52,270 --> 00:03:54,940
And you can add as many of you want.

48
00:03:54,940 --> 00:04:02,080
What I want you to do as a next test is put a couple more the regular for a text field and maybe a first

49
00:04:02,080 --> 00:04:08,490
name you the name and I think first name, middle name, a user name and have them all on the same line.

50
00:04:09,340 --> 00:04:10,930
So that's a little tough for you.

51
00:04:11,380 --> 00:04:15,850
If you have any questions, feel free to pour me a message on discord or on my website.

52
00:04:15,860 --> 00:04:22,000
So learning the Harrick plus all the other ways they can contact me using the description and I will

53
00:04:22,000 --> 00:04:29,920
provide a link to the the bootstrap page so you can check out all of the different features that I look

54
00:04:29,920 --> 00:04:32,050
forward to seeing you in the next video.