Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Grid layout in action
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's dig in to how we create grid layouts with Bootstrap. So here you can see in our repo we have a grid layout set HTML file.
0:07
We're not going to write much here we're just going to get started playing with it. So if we open it up, you can see it has
0:13
this gray tabular looking thing going on here. We have some column mediums, some column smalls and column larges here.
0:22
And I'll tell you what all that means in just a minute. What I've done is I've taken a grid layout and I've set some styles so they appear gray.
0:29
Normally, they don't have any visual style they just wrap content. But so it's super obvious for you see I made them gray with borders.
0:36
Now here's the way this works. We already saw the grid layout in action. As it gets smaller and smaller, the layout decides
0:42
actually we don't have enough room to be in tabular form anymore let's break into slice and stack vertically. So if we do that, what you notice first
0:50
is that LG ones will break right there. But the MD and SM ones are still there. So what gives? So these descriptors that we're using here say
0:59
I would like to act like table or a grid, horizontal grid only on a large or larger screen, extra large
1:07
whatever, screens larger than a certain resolution defined by what large means. These others say, I'd like it to be
1:13
like a grid on a medium sized screen. This one, stay grid like all the way down to small screens. And you could even go to extra small.
1:20
So let's make this a little smaller and we should see the mediums wrap pretty soon.
1:24
Bam, there they go. But the smalls should still be there 'til we get you know, below small. And I'll show you a little table of what
1:29
small, medium, large, and what not is. So that's how we define our work with, these grid layouts.