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

Requirements

1. Center content on page using container class for main element.
2. Create a minimum of twelve cards to use for your layout exploration.
3. Organize your content into logical rows.
4. Use only Bootstrap defaults to achieve your goals.
5. Document your process as you go using the structure illustrated on this page.
6. 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.

Challenge, Acknowledged.

Card One

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

Card Two

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

Card Three

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

Card Four

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

Card Five

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

Card Six

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

Card Seven

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

Card Eight

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

Card Nine

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

Card Ten

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

Card Eleven

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

Card Twelve

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

The Process?

• Centering the content was easy because I already had experience with Skeleton. I added a class of conainter to the main element. It worked!
• The first card used a placeholder image from Lorem Picsum but the first inline style from the provided code was removed to fit the whole page. Now I will attempt to add a second card and see what happens.
• Failed! It created two cards, one on top of the other. I would like them to be side by side. What if I wrap both cards in a row?
• Failed! I need to wrap a set of four cards in separate column divs.
• It worked! After I separated the cards into a few column divs, they all aligned and are in the proper layout.
• The last step is to make sure that the cards are scalable and suit various screen sizes. I can achieve this by specifiying how many cards should be in a row according to bootstrap's standards.
• It worked! Now the cards are in columns and rows and scale up or down depending on screen size. This solves the first challenge.

This leads to the second bootstrap challenge.