Resources for learning Bootstrap3

Twitter Bootstrap is very popular for styling websites these days, but learning how to do it well can take a bit of study and practice. In addition to the reference info on http://getbootstrap.com, the following are some of the resources I've found with good information:

Nice, concise explanations of many of the various controls and styles, with handy examples of each.

 If you're working with Bootstrap it won't be long until you try to lay out some grids with their "row" and "col-xx-yy" styling. It's not hard, but there are a few tricky gotchas. Erik Flowers does a really nice job explaining how the grid system is designed from a "mobile first" perspective. His Example 1 is a really clean example of how responsive design rearranges columns within rows when you change the width of your browser. (Note how the columns are based on percentages of the page width, and changing the height of your browser page has no effect on the layout.)

An absolutely stellar deep dive into how the Bootstrap3 grid system styles work, with visual explanations of the details on containers, rows and columns and how they interact with each other. An absolute must read if you really want to get a better understanding of the grid system. Key takeaways from the blog post, in Erik's words:

  • You never need another container inside of a container.
  • Never use a row outside a container, it won’t work.
  • Never use a column outside of a row, it won’t work.

Comments

Popular Posts