|

Twitter Bootstrap Grid Tutorial

twitter bootstrap

Our last post gave us a a great overview of Bootstraps 12 Column Grid. Now we can take a closer look at the Grid System and begin making our own rows and cells. In the past we were forced to make use of tables and divs with all kinds of problems in getting elements to get accurately placed on the page. Bootstrap makes it easy by giving us the ability to simply divide the width of the page into 12 grids so we can use any combination of numeric cell assignments so long as the sum of the numbers is equal to 12. Sound confusing? It’s not! Let’s jump in!


Adding Bootstrap Row and Cell Markup to HTML

In this example we’ll start with an imaginary company website called Panda Web Design Company. Panda Web Design Company is a solid web design firm but in it’s current form, their website could use a little help. Let’s look at the current native HTML of the Panda Web Design Company.

If you were to load it up in your browser, it may look like this:

twitter bootstrap grid tutorial

So here we have the base layout, and we can see it’s ok, but probably not ideal. Let’s begin adding the Bootstrap Markup to the HTML by adding some row and col classes to provide a cleaner layout to the webpage.

This is good, we are beginning to see some form factor take shape. At this point, the webpage will look something like this:

twitter bootstrap grid tutorial columns


Controlling Stack Behavior

The screenshot above is when a web browser is at full width. Using the existing markup, when we make the browser size smaller, or visit from a mobile device, what will happen is that those four nice columns we now have immediately stack on top of each other once the medium break point is hit. This doesn’t look all that great. Instead we can add more Bootstrap Markup to those columns to make them go 2 side by side when shrinking the screen size.

We can make this change by simply replacing any instance of col-md-3 with col-md-3 col-xs-6 in our class assignments. We can do this because, HTML tags can have more than one class assigned to them. Another thing to keep in mind is that in the Twitter Bootstrap, you usually need to make your column numbers add up to 12 in any given row. The one exception to this is with the xs column size. In this case, they can add up to 24, so this is why we use a size of 6 for this example. Now that we’ve made that simple change, we have a nice 2 column stacking effect as the browser shrinks:

twitter bootstrap grid tutorial stacking


Containing Page Elements

One thing we have not done yet is to add a container to the page. The use of a container is a personal preference, but I like to use them almost by default as it seems to be a best practice. Without the container in place, we can see that the elements on the page tend to float in an almost aimless fashion, while text that meets the side of the page can sometimes get clipped by the browser. We can fix this easily by adding a div with a class of container to the whole page. In addition, we’ll add the Panda logo and Websites to their own column in this revision of the HTML markup:

This is great and now our page has some nice padding and space, while allowing page elements to be more contained. Here is what the page looks like at full browser width now:

twitter bootstrap grid tutorial container


Control Column Widths with Offsets

We’re now going to take a look at another page of the great Panda Web Design Company. The source of this page can be found here:

Before we make any adjustments to columns with offsets, the page looks a bit like this when you load it up into a web browser:

twitter bootstrap grid tutorial column widths

Something to note about the source code here is the continued use of multiple column class assignments to the same div. In this case we make use of both col-lg and col-sm on the same element.

The key is that for each row, all of the numeric col-lg assignments add up to 12, and all of the numeric col-sm also add up to twelve. This way as the browser hits certain breakpoints, the dynamic positioning of your divs will happen correctly in both the large and small grid sizes. I found this concept a bit tricky at first, but spend some time with it, and you will find that it makes perfect sense 🙂

Now the two columns of text are a bit close together. Let’s say we wanted to put some breathing room in between those two for a bit of a design improvement. How could we do that? Well by adding an offset to the row class assignments and adjusting the number division, we can accomplish that goal. We can swap out col-lg-9 col-sm-8 for col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1. You can see we borrowed 1 column element from both the large and small sized grid, and used that element in an offset for each. Now that we’ve adjusted our offset, we can see the increased spacing between the two columns below. This spacing will also scale nicely between breakpoints.

twitter bootstrap grid tutorial column offsets


Adjusting Stack Order

New in Bootstrap 3 is the ability to change the stack order of your columns using the push and pull class modifiers. As our page stands now, the main content, Panda Web Services, is going to shuffled to the bottom of the page as the browser size collapses like so:

twitter bootstrap grid tutorial stack

In order to change this, we can rearrange our HTML, and then make use of the push and pull classes to reorder the columns upon stacking. Let’s check it out how we modify the HTML and class assignments of row two here:

Here we can see we have successfully changed the stack order, and since we re arranged the HTML, during full browser widths we will still have the original column order we desire.

twitter bootstrap grid tutorial push pull


Nesting Columns

Many times we might want to subdivide our existing column structure by nesting columns within columns. This is easy to do and I’ll outline how to do this here. Let’s grab all of our services from the home page and nest those columns, minus the images, into our current page within the main content area. As we know, we always want our numbers to add up to 12. When nesting columns, the same rule holds true. The difference now is that the full 12 column width span will only take up the area with in the parent column. Lets take a look at that scenario:

In this example we make use of this nesting technique and you can see it works quite nicely!

twitter bootstrap grid tutorial nesting

Conclusion

In this episode of our Twitter Bootstrap Series Grid Tutorial, we took a look at many aspects of the Bootstrap Grid System that make it great. We had a close look at Adding Bootstrap Row and Cell Markup to HTML, Controlling Stack Behavior, Containing Page Elements, Control Column Widths with Offsets, Adjusting Stack Order, and Nesting Columns. Fun stuff indeed! Up next is a closer look at the Twitter Bootstrap CSS components.