Some thoughts on Bootstrap & grids

Let me begin by stating the obvious: bootstrap is a useful tool. You can get a good-looking, responsive site up and running in no time at all. If you lack design skill (oh, I lack design skill!) it can pick up your slack. Base styling, components, JS plugins, documentation… there are many reasons why devs may choose to use bootstrap.

With that being said, it isn’t a great tool for new developers. Bootstrap gives you a LOT for very little work. Being new to tech, at first this was a joy, but soon I realized that I knew very little about what was happening under the hood. Being given so much functionality for almost no work, it felt like magic. And despite what folks would have me believe, I’m certain it’s not magic.

I think there’s much to be said for struggling to understand what you’re doing and why before taking the easy street. There’s merit in building an ugly website from scratch before building a decent-looking bootstrappy site in a quarter of the time. Learning to build modals from scratch, buttons without assistance, a grid system of sweat and blood… these things will make better developers in the long run.

Back to this idea of a grid system! Here in the rise (heyday?) of mobile, it’s super important to have a responsive site (if you don’t go mobile first). You want folks on phones, ipads, and any other smaller-screen technology to be able to access your phone. Lacking this, you risk missing up to 60% of all online traffic. That’s a lot of traffic, especially if you’re building something in a professional capacity. Even if you’re not (looking at you, my new portfolio site), it’s definitely best practice to make sure you’re paying attention to responsive web development. You’ll be better for it, pinky-promise.

Anyway, one of the easiest ways to make a responsive site is using a grid system. Basically, it’s taking a page (for example, this webpage) and splitting it into 12 columns.

This is what a single page divided into 12 columns looks like in photoshop.

Okay, got it? Now imagine that you’ve got some rows on this page. Those rows cross the columns, taking up a pre-defined amount of space. How long do you want that row to be? Do you want it to stretch the whole way across, making it 12 columns? How about a little baby row, only 2 columns long? You can do this!! What if you want two items on a row, and one gets 10 columns because you love it and one gets two because you don’t love it as much? You can do this too!!!

But… why? What does the grid system give us? Well, it gives us responsiveness. By defining the amount of space an item gets based on percentage of page (page/12), the item (and page) adjusts to scale based on the size of the screen you’re viewing on. It’s neat.

Back to bootstrap. This is something bootstrap gives you for free. It’s a nice thing, and it’s an easy concept to understand. It’s even better if you know how to build one from scratch. Here is how to build one from scratch:

  1. Box Sizing

The first thing you’ll want to do is add a box size to your page. Set it to border-box. What this does is resets the box-model of a page, adding in padding and border within the declared width and height of an element. Hooray!

2. Define your column widths

Okay, remember the picture above? The one with the 12 columns? Cool. Given a page, with no columns, you could say an image taking up the entire width of a page is taking up 100% of the width of that page. Yes? Yes! When making your grid system, you’ll want to work backwards from there. 100/12 = 8.33%. Take that 8.33% and add it up, you’ll get 16.66%. For each column, you’re going to want to multiply 8.33 * the number column it is. So you want column 4 to be 8.33*4, because something with a column width of 4 will take up 4 columns of 8.33%. Here’s what this looks like in your css:

such math, wow.

3. Apply some attributes to your columns

You’ll want to have all of your columns floated left (so that multiple items on the same row fall in line). You’ll also want to give those columns some padding. I chose 15px, but this is really up to you. Feel free to override this as your get further into customizing your CSS on the page as well, as not everything requires 15px of padding.

4. Clearfix!

Add a clearfix to all of your columns. This allows our page to stretch horizontally to accommodate the elements in a row without hurting your other rows. A clearfix is a way for an element to automatically clear its child elements, so that you don’t need to add additional markup.

5. Success!

Cool, this is enough CSS to get you off the ground and working. You’ll need to add rows and columns to your HTML like so:

Check out what you made in your browser, on your phone, on a tablet, throw it on a projector… you know, check it out on different screen sizes. It’s pretty neat! See any concepts in here that you don’t get? HMU, I’ll do my best to clarify for ya.

Like what you read? Give Allie a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.