1 00:00:00,230 --> 00:00:04,310 Bootstrap's mobile first grid is based on a 12 column layout 2 00:00:04,310 --> 00:00:09,060 that adjusts according to the five media query ranges you learned about earlier. 3 00:00:09,060 --> 00:00:13,200 With Bootstrap's column sizing classes, you specify how columns display 4 00:00:13,200 --> 00:00:15,669 at different break points, or on different devices. 5 00:00:17,100 --> 00:00:21,620 Currently, our columns are displayed as three equal width columns 6 00:00:21,620 --> 00:00:23,160 in all the break points. 7 00:00:23,160 --> 00:00:27,920 That's because the col class displays grids that are the same 8 00:00:27,920 --> 00:00:30,910 from the smallest of devices to the largest. 9 00:00:30,910 --> 00:00:33,590 Since the grid was built using Flex Box, 10 00:00:33,590 --> 00:00:39,340 grid columns without a set width will automatically layout with equal widths. 11 00:00:39,340 --> 00:00:44,218 Notice when you resize the browser, the columns become too narrow and 12 00:00:44,218 --> 00:00:48,279 the third column even drops down to the bottom of the page. 13 00:00:48,279 --> 00:00:53,550 So I like to display different column widths for different screen sizes. 14 00:00:53,550 --> 00:00:57,250 For example, a one column layout on extra small devices, and 15 00:00:57,250 --> 00:01:00,700 a three column layout on wider devices. 16 00:01:00,700 --> 00:01:05,120 So, Bootstrap has break point specific column classes you can use to quickly set 17 00:01:05,120 --> 00:01:07,727 the size of grid columns at a given break point. 18 00:01:07,727 --> 00:01:11,723 So, the column prefixes you see here indicate the different grid tiers, 19 00:01:11,723 --> 00:01:16,298 and earlier you learned that Bootstrap has five grid tiers, one for each responsive 20 00:01:16,298 --> 00:01:20,480 break point at extra small, small, medium, large, and extra large. 21 00:01:20,480 --> 00:01:25,110 So with these prefixes, you can create columns for different size displays, for 22 00:01:25,110 --> 00:01:28,785 example, .col- for extra small displays and wider, 23 00:01:28,785 --> 00:01:34,400 .col-sm- for smaller displays like phones in landscape view. 24 00:01:34,400 --> 00:01:39,000 Then there's .col-md- for medium displays like tablets. 25 00:01:39,000 --> 00:01:42,480 Then .col-lg- for larger desktop displays, and 26 00:01:42,480 --> 00:01:47,020 finally .col-xl- for extra large desktop display. 27 00:01:47,020 --> 00:01:53,361 So I like to display three equal width columns starting in the small break point. 28 00:01:53,361 --> 00:01:58,355 Thanks to Flex Box columns without a set width, or without a number in 29 00:01:58,355 --> 00:02:03,190 its column class, will automatically layout with equal widths. 30 00:02:03,190 --> 00:02:10,854 So setting each of the three column classes to col-sm, or small, 31 00:02:13,940 --> 00:02:19,336 Automatically creates equal width columns in the small break point and up. 32 00:02:19,336 --> 00:02:22,120 So our layout is now responsive. 33 00:02:22,120 --> 00:02:25,774 We see a one column layout in the extra small break point, 34 00:02:25,774 --> 00:02:30,875 then it switches to an equal width three column layout in the small break point, 35 00:02:30,875 --> 00:02:33,779 all the way up to the extra large break point. 36 00:02:33,779 --> 00:02:39,290 Keep in mind that you don't have to add column classes for every break point. 37 00:02:39,290 --> 00:02:44,413 Bootstrap's responsive classes are additive, for example, the sm prefix in 38 00:02:44,413 --> 00:02:49,960 our column classes means that the column width applies to small devices and up. 39 00:02:49,960 --> 00:02:54,625 That's why the three columns appear stacked in the extra small range, 40 00:02:54,625 --> 00:02:58,860 then when viewed in the small range the columns line up horizontally, and 41 00:02:58,860 --> 00:03:02,110 continue to scale up all the way to the extra large break point. 42 00:03:02,110 --> 00:03:05,860 So because there are no other classes, with size prefixes, 43 00:03:05,860 --> 00:03:11,050 this side by side layout will apply to all devices from small to extra large. 44 00:03:11,050 --> 00:03:16,271 Now to indicate a specific number of columns, you'd like a column to span, 45 00:03:16,271 --> 00:03:20,442 out of the possible 12, use a number in the column prefix. 46 00:03:20,442 --> 00:03:25,096 So for example, if I want this first column to be wider, 47 00:03:25,096 --> 00:03:30,244 in the small break point range, I can add the number I want it to 48 00:03:30,244 --> 00:03:36,208 span here in the column class, let's say 6, with "col-sm -6". 49 00:03:36,208 --> 00:03:41,442 And again, because the grid uses flexbox when you set the width of 50 00:03:41,442 --> 00:03:46,694 one column the sibling columns automatically resize around it. 51 00:03:49,440 --> 00:03:53,728 But I really like the compositional balance of the equal-width column layout I 52 00:03:53,728 --> 00:03:56,680 had earlier, so I'll remove the size from the class. 53 00:04:01,474 --> 00:04:05,349 The columns still appear too narrow in the small break point, 54 00:04:05,349 --> 00:04:08,150 making the content difficult to read. 55 00:04:08,150 --> 00:04:12,290 The layout will look better if the columns were stacked in the extra-small, and 56 00:04:12,290 --> 00:04:13,690 small, break points. 57 00:04:13,690 --> 00:04:15,507 Well, this is an easy adjustment. 58 00:04:15,507 --> 00:04:20,245 I can simply change all three 59 00:04:20,245 --> 00:04:25,577 column prefixes from col-sm, 60 00:04:25,577 --> 00:04:29,727 to col-md, or medium. 61 00:04:31,902 --> 00:04:33,276 And that looks a little better. 62 00:04:33,276 --> 00:04:37,439 The columns are laid out side by side when the viewport reaches the medium break 63 00:04:37,439 --> 00:04:40,810 point, given the content a comfortable reading line length. 64 00:04:40,810 --> 00:04:44,413 Now if you still think that the columns are too narrow, 65 00:04:44,413 --> 00:04:47,858 you can set the prefix to col-lg, or column large, 66 00:04:47,858 --> 00:04:53,286 which displays the columns horizontally in the large and extra large range only. 67 00:05:08,653 --> 00:05:10,518 I like that better. 68 00:05:10,518 --> 00:05:15,250 Finally, you can apply multiple grid classes to a column to create layouts that 69 00:05:15,250 --> 00:05:19,810 are even more dynamic, and define grids for different screen sizes. 70 00:05:19,810 --> 00:05:24,614 For example, I can set a different column layout for extra large desktops. 71 00:05:24,614 --> 00:05:29,643 So in the extra large break point, I'll set the first column 72 00:05:29,643 --> 00:05:34,689 to span the width of six columns with the class col-xl-6. 73 00:05:37,827 --> 00:05:43,248 And now on extra large devices, the first column containing the image is twice 74 00:05:43,248 --> 00:05:49,490 as wide as the other two columns, which resize to accommodate this wider column. 75 00:05:49,490 --> 00:05:51,219 You can use this layout in your design. 76 00:05:51,219 --> 00:05:55,120 But again, I prefer the balanced equal width column layout. 77 00:05:55,120 --> 00:05:59,414 So I'll stick with just the col-lg class for all three columns. 78 00:06:02,856 --> 00:06:07,067 Finally, Chrome's developer tools has a handy feature called device mode, 79 00:06:07,067 --> 00:06:08,406 that lets you preview and 80 00:06:08,406 --> 00:06:13,310 test your responsive designs by emulating different screen sizes and resolutions. 81 00:06:13,310 --> 00:06:17,252 To open it, bring up Chrome dev tools by clicking 82 00:06:17,252 --> 00:06:22,075 the top-right menu icon > More Tools > Developer Tools. 83 00:06:22,075 --> 00:06:26,419 And to enable device mode and start testing your layout, 84 00:06:26,419 --> 00:06:31,487 simply click the Toggle device mode icon next to the Inspect icon, 85 00:06:31,487 --> 00:06:35,830 and now you can simulate different device widths without 86 00:06:35,830 --> 00:06:40,266 relying on changing your browser window width manually or 87 00:06:40,266 --> 00:06:44,911 without the hassle of switching between multiple devices.