1
00:00:00,660 --> 00:00:06,810
The bootstrap three mobile first grid system allows you to easily control how your website layout will

2
00:00:06,810 --> 00:00:10,590
be displayed on different types of devices.

3
00:00:10,590 --> 00:00:15,540
This diagram provides an illustration of how the grid system works.

4
00:00:15,930 --> 00:00:23,700
The grid system is a series of up to 12 columns that scale contract and reposition themselves based

5
00:00:23,700 --> 00:00:28,590
on the size of the devices screen or viewport.

6
00:00:28,980 --> 00:00:33,440
We can see in Figure 1 the viewpoint the viewport size is large.

7
00:00:33,780 --> 00:00:42,270
It accommodates for large columns in a single row in figure to the screen is small it accommodates three

8
00:00:42,270 --> 00:00:51,170
of the columns in a single row bigger three and four are mobile devices the tablets in figure 3 can

9
00:00:51,170 --> 00:01:01,670
accommodate two columns and the phone in figure 4 can accommodate a single column in one row.

10
00:01:01,690 --> 00:01:07,840
The purpose of the grid based system is to lay out the content of a web page for optimal viewing on

11
00:01:07,840 --> 00:01:09,850
any device.

12
00:01:09,850 --> 00:01:17,620
Since the bootstrap grid system allows up to a maximum of 12 columns across the page the sum of the

13
00:01:17,620 --> 00:01:20,880
great column numbers must equate to 12.

14
00:01:21,460 --> 00:01:24,550
You'll see an example of this in a moment.

15
00:01:24,640 --> 00:01:27,640
Let's take a look at a two column layout to start with.

16
00:01:28,780 --> 00:01:34,060
First we need to create a row that will contain our two columns.

17
00:01:34,060 --> 00:01:37,570
This row will be nested within our container

18
00:01:41,820 --> 00:01:43,440
next will create our columns

19
00:01:46,740 --> 00:01:49,490
so there's a first call them or copy and paste the second

20
00:01:54,160 --> 00:01:55,060
here.

21
00:01:55,140 --> 00:02:07,290
The call dash LG dash 6 refers to the type of column we want to apply the seal L is an abbreviation

22
00:02:07,290 --> 00:02:08,440
for column.

23
00:02:08,820 --> 00:02:11,760
LG is the column size.

24
00:02:11,760 --> 00:02:15,850
This value depends on the device your web page will be viewed on.

25
00:02:16,050 --> 00:02:25,020
LG is used for large desktop screens M.D. is for smaller computer screens such as laptops as M is best

26
00:02:25,020 --> 00:02:28,620
suited for handheld devices such as tablets and phones

27
00:02:31,760 --> 00:02:39,950
since we have two columns each will need to spend six columns across the twelve better available in

28
00:02:39,950 --> 00:02:42,790
the bootstrap grid system.

29
00:02:42,810 --> 00:02:51,970
For this reason we see the value 6 displayed after LG for each div now enter some text into each column

30
00:02:56,330 --> 00:02:59,130
now that we have the columns set up with text content.

31
00:02:59,180 --> 00:03:02,070
Let's preview this file in our web browser.

32
00:03:02,270 --> 00:03:08,980
As you can tell we can't see the columns because the background color is transparent let's create a

33
00:03:08,980 --> 00:03:15,570
background class to apply to both columns so we can see the columns on the page.

34
00:03:16,540 --> 00:03:19,090
So go ahead and create a style sheet in your head take

35
00:03:25,840 --> 00:03:27,830
called the First Class B

36
00:03:32,690 --> 00:03:34,370
and give it a background of cyan

37
00:03:40,760 --> 00:03:48,250
Sorry we'll just change the BJP to BJP one and give the second class the name of BJP to

38
00:03:52,610 --> 00:03:53,660
the background of yellow

39
00:03:58,400 --> 00:04:01,810
now apply these classes to our columns.

40
00:04:09,900 --> 00:04:14,250
So column one will have the science background in column two will have the yellow background

41
00:04:17,810 --> 00:04:22,630
now save the file and refresh your browser

42
00:04:26,820 --> 00:04:29,010
now are columns are visible.

43
00:04:29,010 --> 00:04:31,740
You can see the first one with cyan and the second with yellow

44
00:04:35,050 --> 00:04:41,390
we can see that both are displayed in a single line because our screen size accommodates it.

45
00:04:41,460 --> 00:04:49,300
Let's see what happens is we shrink our browser so if we were on any other device a mobile handheld

46
00:04:50,650 --> 00:05:00,870
tablet our screen size would be a lot smaller just observe what's happening to the right column when

47
00:05:02,130 --> 00:05:12,970
the viewport gets to as we shrink the size of the viewport the right column is force is forced to the

48
00:05:13,530 --> 00:05:20,580
to the bottom of the left column and this is an example of how the grid system works to accommodate

49
00:05:20,700 --> 00:05:22,200
smaller screen sizes

50
00:05:26,220 --> 00:05:29,550
in the next lesson we'll be working with three column layouts.