Challenge #2: Update three cards to launch a modal window when the "Go Somewhere" button is clicked

Requirements

  1. Make a copy of a successful attempt of challenge 1 or create a new file for this purpose that shows several cards on the page.
  2. For the first three cards that include the "Go Somewhere" button, attach a modal launch to that button, so that when the button is clicked, a modal window launches.
  3. Use only Bootstrap defaults to achieve your goals.
  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.

...
Card title

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

...
Card title

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

...
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 copied the code to paste onto my page:
    • Fail: The image doesn't show up!
    • The src attribute is empty, so I need to put a real image in there.
    • I got a path from Lorem Picsum to use for now. That 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 begins and ends.
    • Fail! The cards are all in a single column. I need three rows of four on large screens.
    • I remember that with Skeleton, I needed to use some of its CSS to tell the browser how many columns of the grid each thing should span. I haven't done that here, so I'm going to try that next.
    • I'm going to try to use Grid Cards to layout all my cards.
    • Success! They are lining up in different layouts depending on screen size, but they are left-aligned and too narrow in the one-column layout, and there is no space between them, so the page looks cluttered.

Every page's content should end with a call-to-action that tells the user what do 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.