1
00:00:05,610 --> 00:00:13,290
At the base of Bootstrap, as well as in any other Web page, using the access for its layout, that

2
00:00:13,290 --> 00:00:21,630
must be apparent container, which will be referred to as container, able to give the page the capability

3
00:00:21,630 --> 00:00:24,990
to expand in a certain way or to shrink.

4
00:00:26,660 --> 00:00:35,030
Obviously, according to the device and therefore to the resolution it is supposed to have, we have

5
00:00:35,030 --> 00:00:42,290
seen with the Fleck's boxes in one of the past lessons that there is the possibility for the contents

6
00:00:42,290 --> 00:00:52,820
to adopt in a very simple way, using some success rules which within bootstrap have already been inserted

7
00:00:52,820 --> 00:00:57,230
and can be retrieved into the age html page of.

8
00:00:58,480 --> 00:01:06,630
So the first element we are going to insert will be a container inserted in the following way.

9
00:01:07,630 --> 00:01:10,390
In the container related Dave.

10
00:01:12,580 --> 00:01:20,680
There will be also the heading hello world, which we copied and pasted in the previous lesson.

11
00:01:22,250 --> 00:01:26,870
Doing this way, we set and these through our bootstrap.

12
00:01:28,520 --> 00:01:31,460
Containing some fundamental features.

13
00:01:32,960 --> 00:01:43,880
We are able to set our page to be displayed on all devices, as you can read in the bootstrap official

14
00:01:43,880 --> 00:01:52,580
documents, the containers, as you can see, have the capability to be inserted while also simply in

15
00:01:52,580 --> 00:01:59,600
a generic way, that is with all the base settings, with the simple container attribute, which will

16
00:01:59,600 --> 00:02:08,030
correspond to a hundred percent of the available space in devices with less than five hundred seventy

17
00:02:08,030 --> 00:02:10,520
six figure salaries solution.

18
00:02:10,550 --> 00:02:20,190
So the vast majority of the smartphones after that might have some limits set according to other resolutions.

19
00:02:20,210 --> 00:02:27,480
Of course, there is also the opportunity to define the container based on other types of width setting.

20
00:02:27,950 --> 00:02:36,650
So if I inserted, for example, and the as breakpoint of container, we would see that also for higher

21
00:02:36,650 --> 00:02:44,840
than five hundred seventy six picks, but lower than seven hundred sixty eight pixel devices, we would

22
00:02:44,840 --> 00:02:47,860
have one hundred percent of the space available.

23
00:02:47,870 --> 00:02:55,820
And moreover, the fluid setting would enable us to have a hundred percent of the available space,

24
00:02:55,820 --> 00:03:03,050
even in screens which are higher, for example, than one thousand nine hundred twenty pixel width.

25
00:03:03,200 --> 00:03:07,840
So the Molen screens with very, very high resolution.

26
00:03:08,030 --> 00:03:16,580
That's a case of the full HD screens and upwards with the aim of viewing our container inside the browser.

27
00:03:16,760 --> 00:03:25,790
Let's insert an additional clause in our Dave called Big Primary, which will identify a background

28
00:03:25,790 --> 00:03:35,240
color for our container so that save and refresh and when checking our container inside preview, see

29
00:03:36,140 --> 00:03:43,880
by shrinking it would add up to all the various dimensions we mentioned before, giving 100 percent,

30
00:03:44,360 --> 00:03:49,330
starting from five hundred seventy six pixel downwards.

31
00:03:49,790 --> 00:03:59,150
Obviously the more we widen our screen, the more it will come up with the space limits up to one thousand

32
00:03:59,150 --> 00:04:06,770
two hundred pixels, which would be the limit within which our container will be able to operate and

33
00:04:06,770 --> 00:04:11,480
consequently even incrementing the dimensions to a full screen.

34
00:04:11,600 --> 00:04:16,340
It would always talk to the preset dimension into container.

35
00:04:16,340 --> 00:04:19,400
Then we might insert a variety of features.

36
00:04:20,770 --> 00:04:27,790
We are going to help us create our first page with Bootstrap, which fits all the devices.

37
00:04:29,430 --> 00:04:33,350
That start with adding a simple row within our container.

38
00:04:35,410 --> 00:04:45,190
For D class E Quadro, which we are giving another Coleraine in this case, we cannot insert again big

39
00:04:45,220 --> 00:04:48,820
primary or else it will not be visible.

40
00:04:49,150 --> 00:04:50,530
Therefore, we're in search.

41
00:04:50,540 --> 00:04:57,420
Beechy warning another caller created on purpose to be used within the stylesheets.

42
00:04:57,430 --> 00:05:02,410
Therefore, let's close and let's insert into our row.

43
00:05:03,650 --> 00:05:08,450
A new heading and this case age to which we are calling.

44
00:05:09,760 --> 00:05:10,780
Yes, start.

45
00:05:12,530 --> 00:05:23,120
That say refresh and we see them below our age one and you got inserted with the yellow background,

46
00:05:23,120 --> 00:05:33,020
which after this will follow the same width, setting the container with our flex boxes, which add

47
00:05:33,020 --> 00:05:40,030
up the content, obviously, in addition to the rows, also columns can be inserted.

48
00:05:40,040 --> 00:05:48,500
And in this case, bootstrap will make things easier, giving us the opportunity to insert some classes

49
00:05:49,190 --> 00:05:58,940
which are set for structuring the screen in 12 possible columns within every single row.

50
00:05:59,750 --> 00:06:02,120
Therefore, as classical example.

51
00:06:03,020 --> 00:06:13,970
We might insert a new clause which we are calling code to with a tart coloring, therefore black, within

52
00:06:13,970 --> 00:06:17,060
which we are inserting our deep start.

53
00:06:18,340 --> 00:06:23,320
The lead in here, H2 and inserted a second Kalume.

54
00:06:27,360 --> 00:06:37,350
This time of 10 for a total of 12 spaces, therefore 12 cells, 12 actual columns inside the single

55
00:06:37,350 --> 00:06:46,590
row, which we will call B.S. and and we'll insert a different coloring, for example, subsects.

56
00:06:49,720 --> 00:06:58,060
In so doing, we have insight, our road to collude with the relative contents, saving and refreshing.

57
00:06:59,190 --> 00:07:01,650
We will see that inside our new row.

58
00:07:03,200 --> 00:07:11,090
Obviously, big warning would be ignored as the columns we have their own specific coloring and that

59
00:07:11,090 --> 00:07:13,640
we contain what inserted.

60
00:07:18,070 --> 00:07:26,350
In addition to the method of dividing our continuing to 12 columns, columns identified by call from

61
00:07:26,350 --> 00:07:35,140
one to 12, as we've just seen, there are other useful methods that you can see in detail, checking

62
00:07:35,140 --> 00:07:40,760
the official guide along the whole course when I am talking about bootstrap.

63
00:07:40,780 --> 00:07:49,690
I will personally refer only to this method to avoid you getting mixed up in approaching the framework

64
00:07:49,690 --> 00:07:50,830
for the first time.

65
00:07:50,830 --> 00:07:57,130
In the next lesson, we will see some already mentioned components, such as, for example, the base

66
00:07:57,130 --> 00:08:04,810
colourings inserted from bootstrap in addition to other text peculiarities, which will let you start

67
00:08:04,810 --> 00:08:07,390
drilling down all the functions provided.