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.
Head to Font Awesome Icons and substitute the four icons in index.html with four of your choosing. Do not change any of the divs, just the <i> tags.
- You'll notice that each
<i>tag has two classes, "fa" and "fa-birthday-cake", for example. To switch an icon, change only what appears after "fa-" in the second class.
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!