FREELessons: 12Length: 53 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 The Grid System

Arguably the most important part of any front-end framework is the grid system. In this lesson we’ll take an in-depth look at Bootstrap 3’s grid system to set up a solid foundation for almost all of the lessons to follow.

Related Links

2.1 The Grid System

Welcome back to Power Up Your Portfolio with Bootstrap. I'm your instructor, Cory Simmons. And in this lesson, we'll be going over Bootstrap's grid system. In my opinion, the grid system of any framework is the most important part. It's the backbone on which all content of a site is laid out. Bootstrap has a responsive grid system that comes in two flavors, fixed width or fluid. The fixed width grid is good if you have a few roster image heavy Photoshop mockups for various devices. But I feel like the web has moved away from the thick script for some time now. Its much easier to use a fluid grid with vector graphics in CSS three to illustrate one design that works across a plethora of devices than it is to develop a site over and over for every device out there. Nonetheless, Bootstrap offers both approaches. We'll be sticking with the fluid grid for the duration of this course, so we'll focus on it. Bootstrap's grid is comprised of three elements, a container used to house your rows, rows used to house your columns, and columns used to space your content appropriately. It can be a bit confusing at first, but just know you need a container to hold everything, a row inside of that, and columns inside of that. Nesting in the bootstrap grid is accomplished by putting a new row inside of a column, and then you can add columns to that row. You have fine grain control over how many columns an element spans by the use of Bootstrap's grid prefixes. These look like col-xs, col-sm, col-md, and col-lg. Col-xs-6 will show a column that spans six columns on extra small devices, like phones. The same element could have a class of call-md-4 that would resize that element to only span four columns on medium devices like desktops. For most sites, you won't need to make heavy use of this difference and you'll be able to squeeze by with elements spanning the same amount of columns on anything, other than an extra small device, in which case the element will stack on top or below other elements. Typically we can just use call-md classes while designing and the element will look good on both the desktop we're designing on and automatically stack for smaller devices. In this lesson we learned about Bootstrap's grid system, and how it can be used to easily create nicely spaced layouts. For more information on how to use Bootstrap for web design, check out this Tuts+ course entitled Bootstrap 3 for web design, where we teach you all the ins and outs. [BLANK_AUDIO] In our next lesson, we'll get started on actually coding out a portfolio site with the home page.

Back to the top