For this lab, consult the bootstrap docs liberally. HINT: check out the solution branch to check your work git checkout solution
Throughout this lesson (and your developer life!), watch your indentation!!
Remember to commit frequently.
- In terminal, clone this repo.
git clone https://github.com/sf-wdi-27-28/bootstrap-boilerplate.git
Lorem Ipsum: for these challenges, use lorem ipsum or the always entertaining hipster ipsum text to fill in your columns.
-
Using the bootstrap grid, make a grid that is 3 Columns on Tablet (sm), Laptop (md), and Desktop (lg), 1 Column on Mobile (xs).
-
Using the bootstrap grid, make a grid that is 4 columns wide when on desktop (lg), 3 on laptop (md), 2 on tablet (sm), and 1 on mobile.
-
Using the bootstrap grid, make a grid that has one column, six units wide, with an offset of three on the left -- except for on mobile where the column is full width.
-
Using the bootstrap grid, make a three column grid that is 3-6-3 on desktop (lg) and laptop (md) and tablet (sm). On mobile (xs), it should show as one column, and the leftmost column should be hidden.
-
Add a button to your index. Look at the button docs to see the different button styles and their associated bootstrap classes.
-
Add 3 more buttons. Add a custom class with custom css to at least 2 of the buttons. Play with
:hover.
Clone another copy of this codebase. To give the new clone a different folder name, write the new name after the url like so
git clone https://github.com/sf-wdi-27-28/bootstrap-boilerplate.git facebook-clone
Pick any website online, wireframe it on paper or whiteboard and create a simple bootstrap version with the bootstrap grid, buttons, navbar, lorem ipsum, and Placehold.it. A good place to find a site to copy is Made with Bootstrap. (Hint: Use bootstrap's image classes to size images.)
Take a screenshot of your copy of a site and post it in funny-biz noting what site you copied! So make it look preeeetty.