Challenge #1:

Create a 12-card grid that moves from 4 cards, to 3 cards, to 2 cards, to one card wide

Center content on page using container class for main element.
Create a minimum of twelve cards to use for your layout exploration.
Organize your content into logical rows.
Use only Bootstrap defaults to achieve your goals.
Document your process as you go using the structure illustrated on this page.
When you break something, try to fix it. If it is broken beyond repair, save the file as a fail and move on to a fresh attempt.

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

It was easy to center my content because I had used Skeleton in Web I. I gave the main element a container class so that it wasn't right up against the edge of the page. Success!
The first card was mostly copy and pasting from Bootstrap/Lorem Picsum, then making a few tweaks for my purposes. I had to put an image in the card and adjust the size constraints. Now I am going to add a second card and see what that does to my website. Victory!
Failure :( I copied and pasted another card into my code, and it stacked the two cards on top of each other. I need them to be side by side, so I put them in a row.
Failure :( They are still stacked when I put them in rows. Now I'm going to try putting them in a column together.
After putting the cards in a column, they stopped stacking! Huzzah!

Now that I have finished the first Bootstrap Challenge, it is time to move on to Challenge 2.