In this lab, you will practice various complex layouts to build up the crucial skill of nesting rows and columns. You'll also gain comfort using Font Awesome Icons, which provide important visual cues to users.
- Clone this repository using
git clone cdinto thebootstrap-grid-iconfolder- Open the file
index.htmland preview it. You should see something that looks a lot like the photo above. It is worth noting that every row has a yellow background and every column has a black outline.
For each of the following challenges, you may change any of the row or column divs you see in index.html. Note that white space between rows indicates that there are two separate row divs, and no white space (an entirely yelllow background) indicates that items are in the same row.
-
Adding as many rows, columns, and icons as you'd like, create your own challenge and swap with a friend!
-
Once you've completed all of the challenges, check out the Font Awesome Library. Feel free to swap the icons for ones that you like.