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! While you're at it, check out some resources Treehouse students have shared here.

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

Posted by zkb
.a{fill-rule:evenodd;}techdegree seal-36
zkb
Front End Web Development Techdegree Graduate 13,636 Points

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
231,271 Points
Steven Parker
Steven Parker
231,271 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.

2 Answers

Paul Crawford
Paul Crawford
5,371 Points
Paul Crawford
Paul Crawford
5,371 Points

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

Thomas Grimes
Thomas Grimes
10,287 Points
Thomas Grimes
Thomas Grimes
10,287 Points

I was having the same issue, but was able to resolve it by updating the CSS and JS cdn links used in the workspace to the current Bootstrap version, here: https://getbootstrap.com/docs/5.3/getting-started/download/

The attributes in the version used in the video are missing "bs-".

Video button tag:

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

Bootstrap version 5.3 button tag:

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

If you update the cdn links, or just remove "bs-" from the two attributes, it should work.