Thanks for sharing :-)Google+StumbleUponFacebookRedditTwitterEmailtumblrbufferLinkedInDiggPinterest

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!

Thank you for reading Twitter Bootstrap Series – Digging Deeper into the Grid TutorialPlease do share using the buttons below!

Thanks for sharing :-)Google+StumbleUponFacebookRedditTwitterEmailtumblrbufferLinkedInDiggPinterest
Thanks for sharing :-)Google+StumbleUponFacebookRedditTwitterEmailtumblrbufferLinkedInDiggPinterest

The foundation of the Twitter Bootstrap framework is its Grid System. The Grid has been rewritten from the ground up in Bootstrap 3. All of the overall layout and screen adaption that takes place in your responsive design is handled by the Grid. It seems very easy in theory, but there are really a lot of details involved with how the Grid operates in the Bootstrap Framework. We’re going to need to understand how this Grid handles the nitty gritty so let’s take a deep dive into it’s details right now!


CSS3 Media Queries

Before we try to comprehend what the Grid is doing in Twitter Bootstrap, we need to take a look at CSS3 Media Queries. CSS3 Media Queries are a fairly new technology, only introduced recently in about 2012. A media query does pretty much what it’s name says. It queries the media type, or the screen in use, and then takes action on what to display based on this outcome. In short, this allows the web page to determine what type of device is currently viewing it, and what the screen size is. For example, is the client viewing on an iPad, iPhone, Desktop, or some other type of internet enabled device? Based on this result, the web page can display in a more mobile friendly, tablet friendly, or desktop friendly layout. If you’r a sucker for super dry reading, but need every detail of how it works, go ahead and read the RFC found at http://www.w3.org/TR/css3-mediaqueries/, and have a good night sleep :-)


4 Grid Sizes

In the prior version of Twitter Bootstrap, there was only one grid size. In Bootstrap 3, there are 4, yes count them, 4 grid sizes to work with in your pages. Maybe you have a Bootstrap 2 site and you’ve wanted to see what it looks like on a Bootstrap 3 style. I’m sure you thought, like me, “oh, I’ll just swap out this cute little stylesheet here for the latest one, and observe my website in all of it’s beautiful glory!” So you do that and, POOF!, your entire site structure is gone, bye, kaput! Much of this has to do with the fact that the new grid operates completely differently than that of Bootstrap 2. It’s ok though, there are tools out there to help you convert your legacy HTML markup to work with the new version of Bootstrap, and with some understanding of how this new Grid works, you’ll be upgraded in no time. The Grid Sizes are shown here for your joy and excitement:

  • xs Grid The grid begins with the extra small grid system, which is designed for smaller devices like smartphones. When the screensize is less than 768px, it will be making use of the extra small grid system. The extra small grid is always horizontal, regardless of device size.
  • sm Grid The small grid is horizontal, but will stack at a breakpoint of 768px or lower.
  • md Grid The medium grid is horizontal, but will stack at a breakpoint of 992px or lower.
  • lg Grid The large grid is horizontal, but will stack at a breakpoint of 1200px or lower.

What Bootstrap Grid Should I Use?

I’m glad you asked young Grasshopper! The reality is it is entirely up to you. Here are a few things to consider though. If you tend to like sites that look exactly the same on your iPhone as they do on your desktop, you want to go with the xs grid. Meaning, if you visit a website on your mobile, and the site defaults to a mobile friendly layout, yet you are looking for a button or link to switch it back to the desktop layout, then this is the grid for you. As humans, we like to take things to the extreme, and at some point I’m sure people will start asking (if they haven’t already), do we really need an infinite number of page layouts for our websites to work well? Clearly we do not as this guy so eloquently states! Ok, enough of that tangent.

Should you choose to want a site that is much more adaptable, and modifies it’s layout on the fly to fit your mobile, tablet, or desktop, then perhaps the sm, md, or lg, grid sizes will work better for you. It just comes down to a matter of preference. Personally I like both, yes I know that is taking the easy way out, but just show me the webpage, and I’ll find my way around :-)


An Example of the Grid in Action

You are ready. Ready for the source. The source of all that is good and true in web design, the source of the Grid System! Here we will make use of all the grid options in one HTML page. You can then test this page in your browser on different devices, and see how the grid adapts based on which grid type is in use. It’s a great way to have a cheat sheet of sorts to give you a quick idea of what to expect when designing your production websites. Go ahead and put this HTML source into a file called the-bootstrap-grid.html and place it in your bootstrap folder:

Great! Now you can load this up in your browser using http://localhost/bootstrap/the-bootstrap-grid.html and you should see something like this at the full screen size:

twitter bootstrap grid system

Once you load up the page and view the grid, you can begin making your browser smaller by dragging it inwards. As you do, you’ll notice that the very top row will adjust itself and use different grid sizes based on the screen size with the help of css3 media queries. It’s really quite slick actually! The remaining grid sizes will begin to stack at different breakpoint sizes as you continue to scale down the size of the page. This will give you an idea of what the grids will look like when in action on your real site and give you a better feel for which types you may want to use yourself.

Conclusion

You know there really is a lot to the Twitter Bootstrap Grid system. This lesson was an attempt to condense some of the more important points into a short and readable tutorial to get us off the ground fairly quickly without having to dig through all of the documentation. Speaking of documentation, why not head on over to the official docs and read up on what the whole grid system has to offer. Keep yourself armed with the best knowledge you can find!

Thank you for reading Twitter Bootstrap Series – The 12 Column GridPlease do share using the buttons below!

Thanks for sharing :-)Google+StumbleUponFacebookRedditTwitterEmailtumblrbufferLinkedInDiggPinterest