Bootstrap modal title not visible

Question

The title in the modal isn't visible.

If I highlight it with a mouse it will become visible. I tried adding modal-content color: #000, but without results.

The responses and answers as of 01/11/16 1:28PM CST did not correct the situation.

I should have mentioned I'm trying to get ahead of the game; using Bootstrap 4 Alpha. Don't see any changes in the modal section of 4 that would have any effect though and setting top: 100px worked. Any other suggestion will certainly be appreciated.

Any ideas on what is wrong within the HTML code?

<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
        Newsletter
    </button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <button type="button" class="close" 
                       data-dismiss="modal">
                           <span aria-hidden="true">&times;</span>
                           <span class="sr-only">Close</span>
                    </button>
                    <h4 class="text-body modal-title" id="myModalLabel">
                        Subscribe to Newsletter
                    </h4>
                </div>
                <div class="modal-body">
          <form class="form-signin">
            <h2 class="form-signin-heading">Receive Our Newsletter</h2>
            <label for="inputEmail" class="sr-only">Name</label>
            <input type="email" id="inputEmail" class="form-control" placeholder="Name" required autofocus>
            <label for="inputEmail" class="sr-only">City &amp; State</label>
             <input type="email" id="inputEmail" class="form-control" placeholder="City &amp; State" required autofocus>
            <label for="inputPassword" class="sr-only">Email address</label>
            <input type="password" id="inputPassword" class="form-control" placeholder="Email Address" required>
        <hr>
            <button class="btn btn-lg btn-primary btn-sm" type="submit">Subscribe</button>
          </form>        
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
          </div>
        </div>
        </div>
      </div>

Answer 1

.modal-title {
    color: red;
}

Answer 2

I had the same situation and realized that I was using wrong version of bootstrap css.

I had to take off the fade css class.

In your case, this is what you have

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
 aria-labelledby="myModalLabel" aria-hidden="true">

It should be

<div class="modal" id="myModal" tabindex="-1" role="dialog" 
 aria-labelledby="myModalLabel" aria-hidden="true">