marcelkooi / bootstrapgridsystem

Learn how to use Bootstrap to make responsive layouts

Bootstrap Grid System

Skill Level: Intermediate
Time Limit: 30 minutes

Bootstrap is a front-end framework designed to make responsive, fluid design layouts quickly and easily. Designed by a few developers at Twitter as a means to encourage consistency across their internal tools, they eventually released it for the public to use.

The point of the exercise is to familiarize you with the core of the Bootstrap framework: the grid system. The grid system is a powerful set of CSS styles that allow you to create very fluid designs that can adapt to large tv screens down to tiny mobile phones. You'll learn how to create sets of divs that will expand, collapse, and reorganize themselves as the width of the browser changes. You'll also experiment with the image features of Bootstrap.

NOTE: Everything you need is included, and directions for each task are provided in each HTML file. All the documentation you need to complete the exams can be found on the official Bootstrap website. (hint: each component mentioned links out to the documentation specific to that component).

##Instructions The first file has you making a very simple layout used by lots of sites, and should look like this when completed:

The second is a bit more complicated, and has you learn how rows rearrange themselves as the width of the browser window, or "viewport", changes. The end result should look like this on tablets and larger:

And this on phones:

The third is a little more advanced. It should look like this on medium desktops and larger:

Then should contort itself to look like this on tablets:

And finally this on phones:

##Extra Credit Finally, and this will likely be pretty hard, you need to arrange the pictures of cute kitties in the fourth file to look like this:

The entire collage should scale smoothly as you increase and decrease the width of your browser.

Best of luck, and don't be afraid to ask for help. Follow the directions in the comments in each file to achieve the goal of each exercise. Some of them you'll simply be adding classes, others you'll have to add additional markup.

##Resources

• Bootstrap
• CSS Layout: the box model