Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Adding to the grid

Learn more about this course
Login or purchase this course to watch this video and the rest of the course contents.
0:00 So we saw this little grid layout HTML in action here.
0:05 We've got our grid layout, and now let's go and see
0:08 how we define this grid layout itself.
0:12 So maybe we'll do a separate container here.
0:15 Do an h2 and in PyCharm you hit tab and
0:17 it'll expand stuff, that's great.
0:19 So we'll call this new section
0:24 This can be starter section.
0:27 So down here, the way this works
0:29 is you need to have a div that is a container
0:32 and then for each row, you have a div that is a class row.
0:36 Then you break your piece among these divs
0:39 by partitioning the 12.
0:42 So here, 8 and 4. 4, 4, and 4.
0:45 6 and 6, so on.
0:46 PyCharm has a cool zen coding feature
0:49 that lets you write stuff like this more quickly.
0:52 So watch, I'll do div.
0:53 Then how do you say the class in CSS?
0:55 You would say, ".container" right?
0:57 Then you say, "immediately contains" in CSS like this.
1:01 That's a div.row.
1:04 Then what if we want to have three divs
1:07 that have this class right there?
1:12 We can come down here and say, "div dot that times three."
1:15 Now if I hit tab watch, boom.
1:18 It's pretty awesome. So div with the container, div with a row, three things.
1:23 So this will be, thing 1
1:29 thing 2, thing 3.
1:33 Now if we open this up
1:34 we got thing one, thing two, and thing three.
1:36 Remember these are medium, so they're going to break
1:38 at about medium size screen there.
1:42 Okay, so pretty awesome.
1:45 We want one more row, so we could come here div.row
1:49 and maybe want div.
1:53 That multiple always needs to be 12, right?
1:55 So we'll have
1:56 let's say 6 little horizontal slices, like that.
2:00 Now if we look at it, you can see there's those slices.
2:03 By the way, I put a CSS style in this page
2:05 to make it have these little gray borders
2:07 so that they stand out.
2:08 If you didn't add on that extra style
2:15 and you just run it like this
2:16 you would not see those pieces stand out nearly as clearly.
2:19 But the grid is still there, right?
2:21 Notice the behaviors happening is just super hard to see
2:25 so I of course put that in here
2:27 so it stands out in a really obvious way for you.
2:31 Okay, that's really all there is to the grid.
2:34 You can pretty easily use those to design the stuff
2:37 so we come look here.
2:39 You can see we have a container, we have a row
2:42 and then we have a column md 4.
2:45 md 4, md 4, that's how we get our thirds
2:48 right there on that page; super easy.
2:51 And of course, the responsive design bit
2:52 just falls right into place there.
2:54 Oh, last thing on the image is worth pointing out here
2:58 since I don't think we're going to talk about it anywhere else
3:00 these images have the class img and img-responsive.
3:06 Those two things are what are in place
3:09 to make them actually change size
3:11 to match whatever container they're in, okay?
3:15 So, img and img-responsive.