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 Framework Basics Prototyping with Bootstrap Building Modal Windows and Forms

Posted by Justus Thompson
Justus Thompson
3,201 Points

Why does the modal window span the entire width of the window?

<!-- Modal -->

<div class="modal fade" id="textmodal"> <div class="modal-dialogue"> <div class="modal-content">

        <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
           <h4 class="modal-title">We'll Text You the Link!</h4>
        </div>
        <div class="modal-body">
           <form class="form-inline">
              <div class="form-group">
                 <label class="sr-only" for="mobilephone">Mobile Phone</label>
                 <input type="tel" class="form-control" id="mobilephone" placeholder="Mobile Phone">
              </div>
              <div class="form-group">
              <select class="form-control">
                 <option>iOS</option>
                 <option>Android</option>
              </select>
              </div>
              <button tyle="submit" class="btn btn-primary" data-dismiss="modal">Send me link</button>
           </form>
        </div>

     </div>
  </div>

</div>

<!-- End Modal -->

2 Answers

Heaven Lee
Heaven Lee
6,495 Points
Heaven Lee
Heaven Lee
6,495 Points

At the very top of your code on line 1, you have spelt "dialog" wrong.

I've tested your code with the correct spelling and it works.

 <div class="modal-dialog">
Laurel O'Brien
Laurel O'Brien
1,223 Points
Laurel O'Brien
Laurel O'Brien
1,223 Points

This is happening for me too, and I haven't solved by poking around the code and adding container classes or css rules. Spans the full width with no padding/margin (or so it appears) around it at all, with a bit of a graphical glitch near the bottom that looks like a white straight line outside the rounded corners.

I used the start folder download for this video and, to the best of my knowledge, added code exactly as shown in the video. Using Brackets with Chrome live preview.

Anyone know?