Challenge #2:
Update three cards to launch a modal window when the "Go Somewhere" button is clicked
- 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: Accepted ✓
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 somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereHow The War Was Won...
(the process)
- After locating the correct Bootstrap codes, I was able to find the code that would replace my previous buttons as well as the code that gave the modal its style, classes, and body. Success!
- I replaced my button code with the button code from Bootstrap, then checked to see if it had completely broken anything. It had not! Victory!
- After getting the button code replaced, I added the modal code underneath. This created my first functioning modal. Victory!
- I tried copying the same strategy that had worked for my first modal, but after testing it I realized that the second button was linking to the first modal. Failure :(
- Once I identified that the modal code included numerous identifiers, I went through and changed all of them to match specific cards. (ex: Card #1's modal was labeled "Modal #1" and so on). This successfully differentiated the modals from each other so they weren't all linking to the same one! Success!
Now that I have finished the second Bootstrap Challenge, it is time to move on to Challenge 3.