Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Concept: Grid layout
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's quickly review the concepts around this grid. We've seen this little section from our Temple HTML that we've worked on.
0:09
We've got columns that live within rows and the idea is the columns are broken up into 12 elements. And we can have columns that are one wide
0:19
or 12 wide or anywhere in between as long as that's an integer. So the top, we said we wanted a 2/3 to 1/3 split so that's column 8, column 4.
0:27
The bottom, we want 12 little bits so column 1, 1, 1, ... and so on. The other distinction here is we have sm, md, lg.
0:35
But the idea is that tells the layout how soon to go from horizontal to vertical partitioning.
0:42
And we saw in the HTML, we have a div that is a container a div that is a row, and then divs that have col-<sizing>-<partitio>
0:50
so col-md-8 column-md-4 and so on. Then you have as many rows as you want in this case four, within that container.
1:01
And bootstrap just handles the rest. So this col-md-8 goes right there col-md-4 goes right there it makes it 2/3, 1/3.
1:10
And if you're wondering about the sizes sm, md, lg and so on. Here's the exact pixel definition of sm, md, lg, xs, xl. So xs is less than 576 pixels
1:23
sm is larger than that up to md which is 768, 992, and 1200 or larger. That's a really large, large, extra large.
1:33
So this is where that breakdown happens when you use these specifiers.