Challenge: 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.
   
   

Challenged, Accepted

Card title

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

Go somewhere

Card title

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

Go somewhere

Card title

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

Go somewhere

Card title

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

Go somewhere

Card title

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

Go somewhere

Card title

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

Go somewhere

Card title

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

Go somewhere

Card title

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

Go somewhere

Card title

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

Go somewhere

Card title

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

Go somewhere

Card title

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

Go somewhere

Card title

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

Go somewhere

Process

• Getting the center was easy enough because I have previsouky done that with skeleton. I added a class of container to the main element. Success!
• The first part was a little tricky but not too bad.
• I did have to find place holder images and remove the inline styles.
• I am going to see what happens when I add a second card.
• Fail. It put a second card on top of the first card. I need them to be side by side. I may need to wrap them.
• Fail. Still stacked.
• Success! I put the div.col in the wrong spot. The cards are now in a row. I am going to attempt to add a third card now.
• Success! All of my 3 cards are in the same row. Lets see what happens when I add all 12 by copying and passing the code.
• I have put in all 12 cards but the layout is messed up. Fail.
• I am rewatching the lectur to see how to fix this.
• Gonna add to the row class row-col-lg-4
• Success! All the cards are 4 in a row. I will add on more to fit for different screen sizes
• Success! All the cards seem to respond well to the different sizes.

Challenge 2