laurasfelix/bootstrap-grid-icon-practice

Bootstrap Grid Emoji Challenge

The Goal

In this lab, you will practice various complex layouts to build up the crucial skill of determining column size within a grid.

Getting Started

1. Clone this repository using git clone
2. cd into the bootstrap-grid-emoji folder
3. Open the file index.html and preview it. You should see something that looks a lot like the photo above.

The Lab

Your goal is to replicate the layout you see in each challenge by using different column sizes.

Here are a few additional points to keep in mind as you get started:

• There is some pre-built CSS loaded into your stylesheet to get you started. You will need to change any of the CSS to recreate the layouts--the styling provided is meant to help you better visualize the width of each element.
• Play around with the number 12 to resize your columns. In Bootstrap, grids can contain between 1 and 12 columns per row.

Challenge 1

Challenge 2

Challenge 3

Challenge 4

Challenge 5

Stretch

Once you've completed all of the challenges, check out the Emoji Library. Feel free to swap the icons for ones that you like and create your own challenge and swap with a friend!