Pulling myself up by my Bootstrap

Ahh Bootstrap. Ahh CSS. You are my friends and my adversaries.

I started using Bootstrap for the first time this week. Previously, I’d used Skeleton, which was admittedly a fine stepping stone to Bootstrap. I can’t say that I’ve explored even a fraction of the built-in features so far, but I managed to use its grid system to set up some columns, handle responsiveness, and set up a simple navigation bar.

I guess if I had to recommend a place to start, it might just be figuring out that grid-column system. This is a good crack to ooze into.

Generally, Bootstrap projects utilize a 12-column system. You can imagine the entire width of the container being divided into 12 columns of equal width. You can combine these columns in ways that give you larger columns to fit your needs.

Bootstrap grid (source)

A good example is a navigation bar. As you can imagine, a pretty standard navigation bar design involves, say, some blank space on the left top of the page, with a few links on the upper right. If you have 3 links, looking at the grid image above, you could maybe have the first link in a 1 column (1 column unit wide), but offset by 9 (9 column units). So there would be 9 columns worth of blank space, counting from the left side, followed by one column with the first link. The next two links would each occupy a single column. The 9 blank columns, plus the 3 columns of content add up to the total width of 12 columns.

This is a super simple example, but as always, you need something to sink your teeth into just to get started. Then you can start hacking around and exploring some of the more advanced features.

Grid documentation: https://v4-alpha.getbootstrap.com/layout/grid/

Like what you read? Give Zack Adams a round of applause.

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