Challenge #2: Update three cards to launch a modal window when the "Go Somewhere" button is clicked
Requirements
- 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.
- 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.
- 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.
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.
The Process?
- I followed some of the Net Ninja tutorials to create a modal. The modal appears but a popup does not appear when the button is selected. What if I analyze the bootstrap code from the offical website and replace what I have written to see if that works?
- It Worked! Now I have to try nesting the modal within one of the card buttons.
- I replaced the placeholder button in the card format from the last challenge and It Worked!
- Copy and pasted the same code four times and all of them work!
- The only thing that broke was my list for the process and that was easily fixed because I realized I was missing a closing div tag.
This leads to the third bootstrap challenge.