Video: 7 of 54
NOTE: this course uses Bootstrap 3. Dreamweaver has recently updated to Bootstrap version 4. You can change it back to 3 using the ‘New Document > Bootstrap > Preferences'. Please do this before starting the course.
Some versions of Dreamweaver will require you to download the specific Bootstrap version you want to use and link it within the site. You can download Bootstrap 3 here: http://getbootstrap.com/docs/3.3/
So the Bootstrap grid is the structure, it’s the containers of everything so it’s very different from the other part of bootstrap which is the pre-made components.
Lets have a real basic introduction to it in dreamweaver in terms of the grid. So essentially we’re going to put in a container, I’m going to then, inside that container enter in, I’m going to nest a group of 3 columns. Remember this is my 4, you can see it in there, 4 and 4 so that adds up to 12 but that’s a 3 column grid, really easy to do. I can click the row down here and add another row, it gives me a default of 2 columns. the next part of my website might need 2 columns split in half and that would be 6 and 6. Or I could decide actually I don’t want this 6 and 6, I want it to be 4 boxes so I’m going to need 3, 3, 3, 3 is going to give me my 12. So I’ve got this first one here, the second one is 6, get him down to 3. Then I can add another column and another column and I’ve got a little 4 column grid now. And that’s a real basic introduction to the grids, we’re going to go through both components and the grids in a lot more detail as we build our site. But I feel like you really need an understanding of what the hell bootstrap is before we go off and start building stuff.