Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Concept: Grid layout
0:00 Let's quickly review the concepts around this grid.
0:03 We've seen this little section
0:06 from our Temple HTML that we've worked on.
0:08 We've got columns that live within rows
0:12 and the idea is the columns are broken up into 12 elements.
0:16 And we can have columns that are one wide
0:18 or 12 wide or anywhere in between
0:20 as long as that's an integer.
0:21 So the top, we said we wanted a 2/3 to 1/3 split
0:24 so that's column 8, column 4.
0:26 The bottom, we want 12 little bits
0:28 so column 1, 1, 1, ... and so on.
0:30 The other distinction here is we have sm, md, lg.
0:34 But the idea is that tells the layout how soon
0:37 to go from horizontal to vertical partitioning.
0:41 And we saw in the html, we have a div that is a container
0:43 a div that is a row, and then divs
0:46 that have col-<sizing>-<partitio>
0:49 so col-md-8 column-md-4 and so on.
0:55 Then you have as many rows as you want
0:57 in this case four, within that container.
1:00 And bootstrap just handles the rest.
1:02 So this col-md-8 goes right there
1:05 col-md-4 goes right there
1:06 it makes it 2/3, 1/3.
1:09 And if you're wondering about the sizes
1:11 sm, md, lg and so on.
1:12 Here's the exact pixel definition
1:14 of sm, md, lg, xs, xl.
1:18 So xs is less than 576 pixels
1:22 sm is larger than that up to md
1:25 which is 768, 992, and 1200 or larger.
1:29 That's a really large, large, extra large.
1:32 So this is where that breakdown happens
1:34 when you use these specifiers.