Column Sizing

Bootstrap's mobile first grid is based on a 12 column layout 0:00 that adjusts according to the five media query ranges you learned about earlier. 0:04 With Bootstrap's column sizing classes, you specify how columns display 0:09 at different break points, or on different devices. 0:13 Currently, our columns are displayed as three equal width columns 0:17 in all the break points. 0:21 That's because the col class displays grids that are the same 0:23 from the smallest of devices to the largest. 0:27 Since the grid was built using Flex Box, 0:30 grid columns without a set width will automatically layout with equal widths. 0:33 Notice when you resize the browser, the columns become too narrow and 0:39 the third column even drops down to the bottom of the page. 0:44 So I like to display different column widths for different screen sizes. 0:48 For example, a one column layout on extra small devices, and 0:53 a three column layout on wider devices. 0:57 So, Bootstrap has break point specific column classes you can use to quickly set 1:00 the size of grid columns at a given break point. 1:05 So, the column prefixes you see here indicate the different grid tiers, 1:07 and earlier you learned that Bootstrap has five grid tiers, one for each responsive 1:11 break point at extra small, small, medium, large, and extra large. 1:16 So with these prefixes, you can create columns for different size displays, for 1:20 example, .col- for extra small displays and wider, 1:25 .col-sm- for smaller displays like phones in landscape view. 1:28 Then there's .col-md- for medium displays like tablets. 1:34 Then .col-lg- for larger desktop displays, and 1:39 finally .col-xl- for extra large desktop display. 1:42 So I like to display three equal width columns starting in the small break point. 1:47 Thanks to Flex Box columns without a set width, or without a number in 1:53 its column class, will automatically layout with equal widths. 1:58 So setting each of the three column classes to col-sm, or small, 2:03 Automatically creates equal width columns in the small break point and up. 2:13 So our layout is now responsive. 2:19 We see a one column layout in the extra small break point, 2:22 then it switches to an equal width three column layout in the small break point, 2:25 all the way up to the extra large break point. 2:30 Keep in mind that you don't have to add column classes for every break point. 2:33 Bootstrap's responsive classes are additive, for example, the sm prefix in 2:39 our column classes means that the column width applies to small devices and up. 2:44 That's why the three columns appear stacked in the extra small range, 2:49 then when viewed in the small range the columns line up horizontally, and 2:54 continue to scale up all the way to the extra large break point. 2:58 So because there are no other classes, with size prefixes, 3:02 this side by side layout will apply to all devices from small to extra large. 3:05 Now to indicate a specific number of columns, you'd like a column to span, 3:11 out of the possible 12, use a number in the column prefix. 3:16 So for example, if I want this first column to be wider, 3:20 in the small break point range, I can add the number I want it to 3:25 spin here in the column class, let's say 6, with "col-sm -6". 3:30 And again, because the grid uses flexbox when you set the width of 3:36 one column the sibling columns automatically resize around it. 3:41 But I really like the compositional balance of the equal-width column layout I 3:49 had earlier, so I'll remove the size from the class. 3:53 The columns still appear too narrow in the small break point, 4:01 making the content difficult to read. 4:05 The layout will look better if the columns were stacked in the extra-small, and 4:08 small, break points. 4:12 Well, this is an easy adjustment. 4:13 I can simply change all three 4:15 column prefixes from col-sm, 4:20 to col-md, or medium. 4:25 And that looks a little better. 4:31 The columns are laid out side by side when the viewport reaches the medium break 4:33 point, given the content a comfortable reading line length. 4:37 Now if you still think that the columns are too narrow, 4:40 you can set the prefix to col-lg, or column large, 4:44 which displays the columns horizontally in the large and extra large range only. 4:47 I like that better. 5:08 Finally, you can apply multiple grid classes to a column to create layouts that 5:10 are even more dynamic, and define grids for different screen sizes. 5:15 For example, I can set a different column layout for extra large desktops. 5:19 So in the extra large break point, I'll set the first column 5:24 to span the width of six columns with the class col-xl-6. 5:29 And now on extra large devices, the first column containing the image is twice 5:37 as wide as the other two columns, which resize to accommodate this wider column. 5:43 You can use this layout in your design. 5:49 But again, I prefer the balanced equal width column layout. 5:51 So I'll stick with just the col-lg class for all three columns. 5:55 Finally, Chrome's developer tools has a handy feature called device mode, 6:02 that lets you preview and 6:07 test your responsive designs by emulating different screen sizes and resolutions. 6:08 To open it, bring up Chrome dev tools by clicking 6:13 the top-right menu icon > More Tools > Developer Tools. 6:17 And to enable device mode and start testing your layout, 6:22 simply click the Toggle device mode icon next to the Inspect icon, 6:26 and now you can simulate different device widths without 6:31 relying on changing your browser window width manually or 6:35 without the hassle of switching between multiple devices. 6:40