Understanding the Bootstrap Grid System

Quick reference

• 00:05 In this video, I wanna talk about the Bootstrap Grid System.
• 00:08 So I've created a new file.
• 00:09 I've called it grid.html, added our Bootstrap references to the head and
• 00:14 I just then pasted in some lorem ipsum text.
• 00:17 So this is what we have here.
• 00:18 If we head back to Bootstrap and we click CSS.
• 00:22 You can come down here and read about the grid system and
• 00:26 I recommend that you do that.
• 00:27 But just to sort of give you an idea of what's going on here,
• 00:31 a page in Bootstrap is broken into different columns.
• 00:35 And you can see there's actually 12 columns in the grid system.
• 00:39 And we can chop these up into tiny little one twelfth sizes, so 1, 2, 3,
• 00:43 4, 5, 6, 7, 8, 9, 10,
• 00:46 11, 12 or we can do two and this one's 8 and this one's 4, 8 plus 4 is 12.
• 00:51 We can do three, 4 each, we can do two columns that are six inches or
• 00:55 six sizes whatever you wanna call it.
• 00:57 And you can do any combination.
• 00:59 You can do three one sized and then two fours.
• 01:03 Doesn't matter as long as it all adds up to 12.
• 01:06 To use these, we wrap everything in a div with a row and
• 01:10 then for each item we wrap them in each individual thing.
• 01:14 So let's just go ahead and do this.
• 01:15 I'm gonna grab this div row thing, and row is just like in a table.
• 01:19 It's a row across, so if we come back to our grid page and
• 01:22 type this in and let's, I need to close it.
• 01:28 And CSS uses divs so if we do that no real change yet but let's say what
• 01:33 do we want let's we got three columns so let's uses four size, all right?
• 01:39 So to do these we just wrap, whatever we want, in this thing.
• 01:43 And the format is the same, col-md-a number and
• 01:47 the number is the size that you want, 1,4,6,8 whatever.
• 01:51 So if we copy this, come back to our system and
• 01:55 I'm just gonna paste this in for each one.
• 01:58 And we've got an open div.
• 02:00 And technically we should probably do it like this.
• 02:02 Close the div just to make it a little more readable.
• 02:12 Like that and like that, okay?
• 02:20 And we should probably tab these, and just to make it all sort of more readable.
• 02:24 So we save this and we come back here,
• 02:26 boom, these are now chopped up into three little areas.
• 02:30 So that's pretty cool.
• 02:34 We didn't change any of the text, we just added these div tags, right?
• 02:38 And just like that we've bopped them into three.
• 02:40 So we can change this like I said however we want as long as it adds up to 12,
• 02:45 so 6, 4 and 2 let's just see what that looks like.
• 02:49 We'll go to 4, 6, so 6 plus 4 is 10 plus 2 is 12, we save this, boom.
• 02:58 Now, this is two sides, this is four, this is six.
• 03:03 Really cool, I mean, it's just that easy to change the complete layout of
• 03:06 everything using this grid system.
• 03:08 So, definitely come back here and kind of read through the grid system text here.
• 03:13 Kind of read some different things.
• 03:14 It has some mobile stuff you can learn about if you want, but,
• 03:17 we're gonna be using this from now on.
• 03:19 To create our little project that we're gonna work on.
• 03:22 So that is the grid system and in the next video we'll start to look at Bootstrap and
• 03:26 the actual usage.
• 03:27 We'll see exactly how to use all the different elements and
• 03:30 that's all for this video.

Lesson notes are only available for subscribers.