1
00:00:00,500 --> 00:00:04,100
Besides the set of predefined classes for
creating grid columns,

2
00:00:04,100 --> 00:00:08,940
Bootstrap includes options for aligning,
reordering and offsetting columns, and

3
00:00:08,940 --> 00:00:13,380
responsive utility classes for
showing and hiding contents by device.

4
00:00:13,380 --> 00:00:16,630
So you can easily swap the visual
arrangement of columns

5
00:00:16,630 --> 00:00:21,180
without affecting the source order
using reordering classes, for example.

6
00:00:21,180 --> 00:00:25,350
And the classes are responsive, so
you can set the order by break point.

7
00:00:25,350 --> 00:00:27,980
For example, at different break points,

8
00:00:27,980 --> 00:00:32,650
I can make the first column switch
places with the second column, or

9
00:00:32,650 --> 00:00:36,550
have the third column switch places
with the second column and so on.

10
00:00:36,550 --> 00:00:40,050
This column ordering is
done via the order class.

11
00:00:41,520 --> 00:00:46,100
So, the About column in my page
contains the image of Portland, and

12
00:00:46,100 --> 00:00:48,860
probably the most important
content in the row, so

13
00:00:48,860 --> 00:00:54,250
I want to display it as the center
column on large and extra large screens,

14
00:00:54,250 --> 00:00:58,765
while still appearing first on extra
small, small, and medium screens.

15
00:00:58,765 --> 00:01:03,406
So to rearrange the column order and
the large break point and

16
00:01:03,406 --> 00:01:06,776
up, I'll give each column an order class.

17
00:01:06,776 --> 00:01:11,992
So first, I'll give this second

18
00:01:11,992 --> 00:01:17,040
column a class order-lg-1.

19
00:01:17,040 --> 00:01:21,040
And this will reorder the column
to the first position in the row.

20
00:01:21,040 --> 00:01:25,610
But because of how Flexbox ordering works,
we must also specify the order of

21
00:01:25,610 --> 00:01:29,910
sibling columns, otherwise the column
order will not display as expected.

22
00:01:29,910 --> 00:01:34,265
So now, I need to set
the first column to the second

23
00:01:34,265 --> 00:01:38,322
position by giving it the class order-lg-2

24
00:01:41,537 --> 00:01:48,993
And keep the third column in the third
position with the class order-lg-3.

25
00:01:51,500 --> 00:01:55,928
I'll give this a Save,
refresh the browser, and

26
00:01:55,928 --> 00:02:00,461
we can see that the About
column appears first, and

27
00:02:00,461 --> 00:02:06,250
at the top in the extra small,
small, and medium ranges.

28
00:02:06,250 --> 00:02:10,700
Then it displays as the center column in
the large and extra large viewport range.

29
00:02:10,700 --> 00:02:11,680
Perfect.

30
00:02:11,680 --> 00:02:16,610
So this is a great feature you can use if
you want to structure your HTML for SEO or

31
00:02:16,610 --> 00:02:21,300
accessibility first, then rearrange
the content without ever editing the HTML.

32
00:02:22,500 --> 00:02:28,020
Similar to the reordering classes, you
can use offset classes to move columns.

33
00:02:28,020 --> 00:02:32,510
These classes set the left or
right margin of a column to auto,

34
00:02:32,510 --> 00:02:35,610
which forces sibling columns
away from one another.

35
00:02:35,610 --> 00:02:39,720
You used the mx auto offset class in
the previous section to center the sign up

36
00:02:39,720 --> 00:02:44,120
form in the container, so we'll use
a similar offset class for our site.

37
00:02:44,120 --> 00:02:47,900
First, I'm going to add a new
content section to my page

38
00:02:47,900 --> 00:02:52,100
by pasting a code snippet right
below the schedule heading and

39
00:02:52,100 --> 00:02:56,130
content, and
just above the closing container tag.

40
00:02:56,130 --> 00:02:59,828
You can copy this exact code snippet
from the teacher's notes of this video.

41
00:03:01,865 --> 00:03:06,848
This new markup displays content about
Treehouse, the conference organizers,

42
00:03:06,848 --> 00:03:11,995
and the same sign up form component we
used earlier in the coming soon page.

43
00:03:11,995 --> 00:03:16,970
In the code, I'm using the grid to
display two equal width columns,

44
00:03:16,970 --> 00:03:18,910
starting in the medium grid.

45
00:03:18,910 --> 00:03:25,360
I also added horizontal rules, and
gave the row a padding class for spacing.

46
00:03:25,360 --> 00:03:27,840
And I changed the text color with

47
00:03:27,840 --> 00:03:31,030
the text-muted utility class we
used earlier in the headings.

48
00:03:31,030 --> 00:03:34,440
So don’t worry, there’s nothing
here you haven’t seen or used yet.

49
00:03:35,460 --> 00:03:40,790
Now, the two equal width columns
look great in the medium and

50
00:03:40,790 --> 00:03:42,430
large breakpoint range.

51
00:03:42,430 --> 00:03:48,090
But in the extra large range, the text and
input field are too wide for my liking.

52
00:03:48,090 --> 00:03:52,920
So I’ll add a class that resizes
their width to five columns

53
00:03:52,920 --> 00:03:55,350
in the extra large grid.

54
00:03:55,350 --> 00:04:00,298
So, I'll give the first
column the class col-xl-5,

55
00:04:00,298 --> 00:04:04,287
and I'll give the second
column the same class.

56
00:04:08,180 --> 00:04:12,990
So, we still have two equal width columns,
and the extra large break point.

57
00:04:12,990 --> 00:04:17,990
But we set each column to span
the width of five columns.

58
00:04:17,990 --> 00:04:21,810
That gives us a total of 10 columns
in the row out of the possible 12.

59
00:04:21,810 --> 00:04:25,930
So now, we have a two column
gap at the end of the row.

60
00:04:25,930 --> 00:04:30,750
And I want this second column to be flush
with the right edge of the container.

61
00:04:30,750 --> 00:04:36,695
So to move the column over to the right
edge, I can use the offset class

62
00:04:36,695 --> 00:04:43,070
ml-auto, which stands for
margin left auto.

63
00:04:43,070 --> 00:04:47,310
And because of how Flexbox works,
setting its left margin to auto

64
00:04:47,310 --> 00:04:52,334
automatically inserts the extra space
between the first and second column.

65
00:04:52,334 --> 00:04:54,769
And as a result,
it pushes into a different position.

66
00:04:54,769 --> 00:04:58,530
So now, the form column is aligned
with the right edge of the container,

67
00:04:58,530 --> 00:05:02,120
adding an interesting touch of white
space between the two columns.

68
00:05:03,400 --> 00:05:08,210
Finally, for faster, mobile friendly
development, Bootstrap gives us responsive

69
00:05:08,210 --> 00:05:12,450
display utility classes to show and
hide content at a given break point.

70
00:05:12,450 --> 00:05:17,710
So back in the docs,
click Utilities> Display,

71
00:05:17,710 --> 00:05:21,810
and you can see the classes here
in the Common display values list.

72
00:05:21,810 --> 00:05:24,580
And all the responsive
variations right below.

73
00:05:24,580 --> 00:05:28,230
You'll notice how the classes
are named after many of the values

74
00:05:28,230 --> 00:05:30,380
the CSS display property accepts.

75
00:05:30,380 --> 00:05:35,330
For example, d-inline,
inline-block, block, even flex.

76
00:05:37,000 --> 00:05:43,840
So the image in the about column has
an original size of 1024 by 436 pixels.

77
00:05:43,840 --> 00:05:48,810
So it might be best to hide
this large image in extra small

78
00:05:48,810 --> 00:05:53,010
devices to display the content faster,
since the device won't have to wait for

79
00:05:53,010 --> 00:05:56,186
the image to download before displaying
the main contents of the page.

80
00:05:56,186 --> 00:06:01,440
The class d-none hides content

81
00:06:01,440 --> 00:06:05,920
in the extra small grid and
up by setting its display value to none.

82
00:06:05,920 --> 00:06:08,040
So let's go back to our mark-up and

83
00:06:08,040 --> 00:06:13,080
scroll up to the first column
where we have our image.

84
00:06:13,080 --> 00:06:17,907
And in the class attribute,
we'll add the class d-none.

85
00:06:21,025 --> 00:06:23,270
So now, the image disappears.

86
00:06:23,270 --> 00:06:27,994
But to bring the image back in
the small grid all the way up to

87
00:06:27,994 --> 00:06:32,815
the extra large grid,
I'll set the image's display value

88
00:06:32,815 --> 00:06:37,560
to block in the small grid,
with the class d-sm-block.

89
00:06:40,931 --> 00:06:45,582
So now, we see the image in all but
the extra small breakpoint.

90
00:06:45,582 --> 00:06:46,318
Good.

91
00:06:49,368 --> 00:06:53,614
All right, so our Full Stack Conf
website is starting to take shape.

92
00:06:53,614 --> 00:06:56,948
Now that you understand how
Bootstrap's grid system works, and

93
00:06:56,948 --> 00:07:00,524
how to use the layout options and
utility classes to layout web pages,

94
00:07:00,524 --> 00:07:03,675
in the next part of this course
I'll teach you how to add fun and

95
00:07:03,675 --> 00:07:08,055
useful user interface components like nav
bars, drop down menus, and modal windows.