Bootstrap Validation Message Shows Up In The Wrong Place - asp.net

Question

I have created an ASP.NET user input form using Bootstrap with the following HTML fragment:
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<asp:UpdatePanel ID="updSignIn" runat="server">
<ContentTemplate>
<div class="panel panel-default">
<div class="panel-heading">
Set Up Your Member Account
</div>
<div class="panel-body">
<div class="form-horizontal" role="form">
<div class="form-group">
<label for="ddSalutation" class="col-sm-4 control-label">
How Do We Greet You?
</label>
<div class="col-sm-2">
<asp:DropDownList ID="ddSalutation" runat="server" CssClass="form-control" />
</div>
</div>
<div class="form-group">
<label for="tbFirstName" class="col-sm-4 control-label">
First Name:
</label>
<div class="col-sm-5">
<input type="text" runat="server" class="form-control" id="tbFirstName"
required placeholder="Enter your first name">
</div>
</div>
<div class="form-group">
<label for="tbMiddleName" class="col-sm-4 control-label">
Middle Name/Initial:
</label>
<div class="col-sm-5">
<input type="text" runat="server" class="form-control" id="tbMiddleName"
required placeholder="Enter your middle name/initial">
</div>
</div>
<div class="form-group">
<label for="tbLastName" class="col-sm-4 control-label">
Last Name:
</label>
<div class="col-sm-5">
<input type="text" runat="server" class="form-control" id="tbLastName"
required placeholder="Enter your last name">
</div>
</div>
<div class="form-group">
<label for="tbPhone" class="col-sm-4 control-label">
Contact Telephone:
</label>
<div class="col-sm-3">
<input type="tel" title="Telephone Number" pattern="^\d{3}-\d{3}-\d{4}$"
id="tbPhone" placeholder="Telephone" class="form-control"
required runat="server" />
</div>
</div>
<div class="form-group">
<label for="tbSSN" class="col-sm-4 control-label">
SSN/Tax ID Number:
</label>
<div class="col-sm-3">
<input type="text" pattern="^\d{3}-\d{2}-\d{4}$"
title="Social Security Number" runat="server" class="form-control" id="tbSSN"
required placeholder="SSN/Tax ID">
</div>
</div>
<div class="spacer"> </div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-7" id="buttons">
<asp:Button ID="btnNext" runat="Server"
Text="Next"
CssClass="btn btn-default btn-sm col-sm-4"
OnClick="btnNext_Click"></asp:Button>
<button type="reset" id="btnReset" class="btn btn-default btn-sm col-sm-4">
Reset Form</button>
</div>
</div>
<div class="row">
<div class="spacer"> </div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="text-center" id="divProcessing" style="display: none;">
<img src="images\loading.gif" style="height: 40px; width: 40px;" /> Please wait...
</div>
<div class="row">
<div class="alert alert-danger fade col-sm-offset-1 col-sm-10 text-center" id="lblStatus"> </div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
The form lays out just fine. The problem is, when I click the button to process the form, the validation messages from Bootstrap don't line up with the fields that need attention from the user. Here's a screenshot of what happens:
As you can see, the form field that needs attention is the first name field, but the tooltip popup from Bootstrap is down to the lower right. I don't have any malformed HTML, so I don't understand what the problem is with the positioning of the popup message. Any help on this? Thanks!