I'm currently working on customizing a bootstrap template for my friend's church website. My goal is to create a simple web presence for them, and I am in the process of setting up a contact form. I want this form to appear as a modal where users can input their information and send off their comments. The problem I am encountering is that the modal is not displaying the modal-title or labels for the inputs. It's puzzling because I used the exact code from a previous website I built with bootstrap. I made some minor modifications, such as removing input groups and changing titles, but nothing that should impact the functionality.
Here is a link to the functioning modal: www.rawgit.com/znagatani/schedule_me/master/index.html .
Below is the markup for the functioning modal:
<button class="btn btn-success" id="cta" type="button" data-toggle="modal" data-target="#sign-up">Let's Go!</button>
<div class="modal" id="sign-up">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">X</button>
<h4 class="modal-title">Sign Up</h4>
</div>
<div class="modal-body">
<div class="input-group">
<label for="first-name">First Name</label>
<input type="text" class="form-control modal-sign" placeholder="Goku" />
</div>
<div class="input-group">
<label for="last-name">Last Name</label>
<input type="text" class="form-control modal-sign" placeholder="Son" />
</div>
<div class="input-group">
<label for="text">Valid Email</label>
<input type="email" class="form-control modal-sign" placeholder="[email protected]" />
</div>
<div class="input-group">
<label for="username">Username</label>
<input type="text" class="form-control modal-sign" placeholder="ssjssgWarrior" />
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" class="form-control modal-sign" placeholder="kamehamehax10" />
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-success">Create Account</button>
</div>
</div>
</div>
</div>
And here's a link to the modal for the church website: www.rawgit.com/znagatani/cross_bootstrap/contact-modal/index.html
Below is the markup for the church modal:
<!-- Button trigger modal -->
<button type="button" class="btn btn-contact btn-lg" data-toggle="modal" data-target="#contact-us">Contact Us</button>
<!-- Modal -->
<div class="modal fade" id="contact-us">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Sign Up</h4>
</div>
<div class="modal-body">
<div class="input-group contact-input">
<label for="first-name">First Name</label>
<input type="text" class="form-control modal-sign" placeholder="John" />
</div>
<div class="input-group contact-input">
<label for="last-name">Last Name</label>
<input type="text" class="form-control modal-sign" placeholder="Doe" />
</div>
<div class="input-group contact-input">
<label for="text">Valid Email</label>
<input type="email" class="form-control modal-sign" placeholder="[email protected]" />
</div>
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" placeholder="What's your question, comment, or concern?"></textarea>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-success">Send it!</button>
</div>
</div>
</div>
</div>
It's evident that the first modal displays the labels and title correctly while the second one does not. I'm unsure why this is happening. If the issue doesn't stem from an obvious error in the modal markup, then perhaps the template is conflicting with Bootstrap's JavaScript.
If this question has already been addressed, I apologize for the redundancy. I did search around but couldn't find a solution to this specific problem. Thank you for your help!