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