Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap Basics Using Bootstrap Components Displaying a Modal Window

Modal not displaying although I followed the video exactly

I've pasted my code for the buttons and modal below. It's not working like the video indicates. My modal isn't displaying when I've clicked the buttons although I've specified them in the data target for the button. What's happening here..?

<button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#register">Register Now</button>

<button type="button" class="btn btn-outline-info btn-lg d-block mx-auto my-5" data-bs-toggle="modal" data-bs-target="#register">Don't Miss Out, Register Now</button>

<div class="modal fade" id="register" tabindex="-1" aria-labelledby="register form" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">Register for Full Stack Conf</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Form goes here... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

Steven Parker
Steven Parker
224,811 Points

When posting code, always use Markdown formatting to preserve the code's appearance and retain special symbols. An even better way to share code and make your issue easy to replicate is to make a snapshot of your workspace and post the link to it here.

1 Answer

Paul Crawford
Paul Crawford
5,221 Points

Try removing the quotes over where you have button so instead of ---"button" class= --- remove the second ---"--- so ---"button class =---