Bootstrap 3 Modal Will not Display Modal Title or Input Labels

Question

I'm customizing a bootstrap template for a friend's church. Just something simple so they have a web presence. I'm creating a contact form, and I want it to be a modal where the user enters their info then sends off their comment. However, the issue I'm having is that the modal will not display the modal-title or labels for the inputs. I'm totally confused, because I actually copied the exact same code from a previous web-page I built with bootstrap. I modified only a few things (took away some input groups and changed titles, etc), but nothing that should be affecting the functionality.

Here is a link to the functioning one: www.rawgit.com/znagatani/schedule_me/master/index.html .

Here's the markup for that 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="kakarot7z@example.com" />
                </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 then here's a link to the one for the church: www.rawgit.com/znagatani/cross_bootstrap/contact-modal/index.html

And here's the markup:

<!-- 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">&times;</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="example@example.com" />
                </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>

You can see that the first one displays the labels and title correctly; the second doesn't. Why is this?? If the answer isn't something glaringly obvious in the modal markup, then maybe the template is overriding bootstrap's javascript.

And I'm sorry if this question has been asked already... I searched around and did not find anything that answered this specific question. Thank you so much!

Answer 1

Add this style to your custom css file:

.modal-content {
    color: #000;
}

This will change the font-color of the label and heading of your modal to black.