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.

The attempt

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

  1. I found a basic card on the bootstrap site and I copied the code to paste onto my page:
    • Fail: The image doesn't show up. The source attribute is empty, so I need to put a real image in there.
    • I got a path from Lorem Picsum to use for now. It worked.
  2. I copy pasted the code for my working card eleven more times.
    • I used a different number for each random image to help me tell them apart and commented where each card beings and ends.
  3. Fail! The cards are all in a single column rather than the 4 by 3 grid.
  4. I remember that with skeleton, I needed to use its CSS to tell the browser how many columns of the graid each thing should span. I haven't done that here, so I'll have to try it.
  5. I'm going to try to use Grid Cards to layout all of my cards.
  6. Success! After reworking my local CSS folder I realized I had the wrong CSS style sheet applied. BEfore I would get 6 columns, but after this fix I now have the required 4!

Every page's content should end with a call to action that tells the user what to do next. A good call to action will have a link the user can click to go to the next resource we want them to see.