samuel1008 / bootstrap-boilerplate

This is a lab to learn bootstrap

Bootstrap Lab

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.

Getting Started

1. In terminal, clone this repo.

git clone https://github.com/sf-wdi-27-28/bootstrap-boilerplate.git

Grid

Lorem Ipsum: for these challenges, use lorem ipsum or the always entertaining hipster ipsum text to fill in your columns.

1. Using the bootstrap grid, make a grid that is 3 Columns on Tablet (sm), Laptop (md), and Desktop (lg), 1 Column on Mobile (xs).

2. 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.

3. 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.

4. 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.

Buttons

1. Add a button to your index. Look at the button docs to see the different button styles and their associated bootstrap classes.

2. Add 3 more buttons. Add a custom class with custom css to at least 2 of the buttons. Play with :hover.

Copy a Site

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.)

Deliverable

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.