1
00:00:00,450 --> 00:00:08,220
Bootstrap uses h t AML and C Ss elements that are specifically to be used with the HMO five Doc type.

2
00:00:08,220 --> 00:00:13,480
For this reason it's important to specify the HMO five Doc type on the web page.

3
00:00:13,830 --> 00:00:18,940
As you can see we've done that on line one of this sample page.

4
00:00:18,970 --> 00:00:24,220
It's also important to note at the bootstrap 3 framework is a mobile first framework.

5
00:00:24,220 --> 00:00:30,970
This means it is designed to be responsive to mobile devices to ensure that your web page is rendered

6
00:00:30,970 --> 00:00:33,490
properly across all devices.

7
00:00:33,490 --> 00:00:36,730
Make sure to include the following metadata in your head tag

8
00:00:40,250 --> 00:00:40,780
in this manner.

9
00:00:40,780 --> 00:00:49,370
Take the width equals device with instructs the web page to follow the screen width of the device the

10
00:00:49,370 --> 00:00:56,060
initial scale equals 1 ensures that the web page does not automatically zoom out of the page in the

11
00:00:56,060 --> 00:00:58,650
devices content area.

12
00:00:58,670 --> 00:01:02,780
This is best illustrated with an example in this diagram.

13
00:01:02,780 --> 00:01:08,890
We have an example of a web page with no viewport meditate and one with the viewport meditate.

14
00:01:10,080 --> 00:01:17,970
Notice that in Figure 1 the mobile browser zooms the page out so it's compressed into the mobile devices

15
00:01:17,970 --> 00:01:26,190
screen in Figure 2 the Web site does not zoom in follows the correct mobile responsive web page structure

16
00:01:26,490 --> 00:01:28,680
that bootstrap is typically used for

17
00:01:32,200 --> 00:01:39,460
next we need to create a container that will hold the content of our Web page the container is important

18
00:01:39,550 --> 00:01:46,660
because it houses all the other elements of the page it also controls how the elements inside the container

19
00:01:46,720 --> 00:01:52,140
will behave when the page is viewed on different devices generally.

20
00:01:52,170 --> 00:01:59,850
There are two main types of containers fixed with containers and fluid containers also known as fill

21
00:01:59,880 --> 00:02:02,000
with containers.

22
00:02:02,020 --> 00:02:03,540
Let's take a look at an example.

23
00:02:11,310 --> 00:02:15,250
This sample web page uses a fixed with container.

24
00:02:15,390 --> 00:02:20,980
We can see that it does not scale to the full width of the browser windows content area.

25
00:02:23,710 --> 00:02:30,280
This page on the other hand uses what's known as a fluid container or full with container.

26
00:02:30,280 --> 00:02:34,600
It scales to the full width of the browser windows content area

27
00:02:38,860 --> 00:02:39,940
in our document.

28
00:02:39,940 --> 00:02:49,900
Let's start by creating a fixed with container to do so start with a div element and give it the class

29
00:02:50,200 --> 00:02:50,800
Container

30
00:02:59,630 --> 00:03:00,230
and that's it.

31
00:03:00,230 --> 00:03:08,770
We don't have to define any of the style rules for this container because remember the bootstrap CSX

32
00:03:08,890 --> 00:03:11,520
framework already includes that for us.

33
00:03:11,740 --> 00:03:13,300
So everything is predefined.

34
00:03:13,420 --> 00:03:18,150
We just have to give it the class Container.

35
00:03:18,380 --> 00:03:21,350
Now let's go ahead and insert some content into our container.

36
00:03:21,500 --> 00:03:23,180
We'll just start with the heading

37
00:03:34,090 --> 00:03:35,960
and I'll just insert some sample text

38
00:03:43,720 --> 00:03:44,380
and that's it.

39
00:03:44,380 --> 00:03:46,880
Let's preview it in our web browser.

40
00:03:46,930 --> 00:03:48,610
So this is the fixed with Leo

41
00:03:51,530 --> 00:03:56,240
since it's difficult to see the fixed wing container because the background of the container is white

42
00:03:56,300 --> 00:03:58,470
and so is the page background.

43
00:03:58,520 --> 00:04:01,220
Let's add a background color to our container

44
00:04:04,230 --> 00:04:07,320
we can modify the container class by creating

45
00:04:10,540 --> 00:04:11,270
a style sheet

46
00:04:14,510 --> 00:04:14,940
and just

47
00:04:18,250 --> 00:04:28,710
select the container class is your selector and type in the following attributes

48
00:04:38,010 --> 00:04:43,680
and after saving and refreshing our web page we can see that we've added a background color to the container

49
00:04:43,690 --> 00:04:44,840
div.

50
00:04:44,920 --> 00:04:49,140
So now we can more clearly see that it is in fact a fixed with container

51
00:04:54,870 --> 00:04:58,020
if we wanted to changes to a fluid container.

52
00:04:58,320 --> 00:04:59,430
We simply type in

53
00:05:02,090 --> 00:05:03,140
dash fluid

54
00:05:06,030 --> 00:05:11,420
and make sure to also update the selector in your style sheet

55
00:05:14,610 --> 00:05:21,330
save the file and refers to page and we can see that the container now occupies the full width of the

56
00:05:21,330 --> 00:05:28,130
content area so that's the difference between a fixed with and fluid with container.