Bootstrap 3.0 "row" first item not aligned correctly - asp.net

Question

Using Bootstrap 3.0 and the code below is a snip of a which contains 3 items, each in a which looks and works well, except the first element in this row (plus others) is shifted slightly above the other elements within the "ROW." I've attached a screenshot of the issue. I haven't modified the Bootstrap CSS to cause any issues.
Note: the other rows don't contain ASP controls which I thought was the issue but it's not.
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<h2><%: Title %>.</h2>
<hr />
<section id="CreateUserForm">
<h4>Create User <i class="fa fa-user"></i></h4>
<!--1st ROW-->
<div class="row">
<div class="form-group">
<div class="col-md-4">
<asp:DropDownList ToolTip="User Role" runat="server" ID="UserRole" CssClass="form-control" ![enter image description here][2]AppendDataBoundItems="true" DataSourceID="AspNetRoles" DataTextField="Name" DataValueField="Name" Width="280px">
<asp:ListItem Text="-- Select User Role --" Value="" />
</asp:DropDownList>
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserRole"
CssClass="text-danger" ErrorMessage="User Type is required." Display="Dynamic" />
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input type="text" runat="server" title="User Name" id="UserName" class="form-control" placeholder="User Name..." />
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName"
CssClass="text-danger" ErrorMessage="User Name is required." Display="Dynamic" />
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input type="text" runat="server" title="First Name" id="FirstName" class="form-control" placeholder="First Name..." />
<asp:RequiredFieldValidator runat="server" ControlToValidate="FirstName"
CssClass="text-danger" ErrorMessage="First Name is required." Display="Dynamic" />
</div>
</div>
</div>
<!--END 1st ROW-->
<!--2nd Row-->

Answer 1

You need to wrap everything in a .container.

Answer 2

The fix was removing "form-group" around the controls and inserting a break after each "ROW"
<!--1st ROW-->
<div class="row">
<div class="col-md-4">
<asp:DropDownList ToolTip="User Role" runat="server" ID="UserRole" CssClass="form-control" AppendDataBoundItems="true" DataSourceID="AspNetRoles" DataTextField="Name" DataValueField="Name" Width="280px">
<asp:ListItem Text="-- Select User Role --" Value="" />
</asp:DropDownList>
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserRole"
CssClass="text-danger" ErrorMessage="User Type is required." Display="Dynamic" />
</div>
<div class="col-md-4">
<input type="text" runat="server" title="User Name" id="UserName" class="form-control" placeholder="User Name..." />
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName"
CssClass="text-danger" ErrorMessage="User Name is required." Display="Dynamic" />
</div>
<div class="col-md-4">
<input type="text" runat="server" title="First Name" id="FirstName" class="form-control" placeholder="First Name..." />
<asp:RequiredFieldValidator runat="server" ControlToValidate="FirstName"
CssClass="text-danger" ErrorMessage="First Name is required." Display="Dynamic" />
</div>
</div>
<br />
<!--END 1st ROW-->

Answer 3

I had the same problem with a form I was creating, I found the answer was to add the column class before the form-group. This fixed the alignment issue and there was no need to add a break between rows (form-group takes care of spacing for you).
<!--1st ROW-->
<div class="row">
<div class="col-md-4">
<div class="form-group">
<asp:DropDownList ToolTip="User Role" runat="server" ID="UserRole" CssClass="form-control" ![enter image description here][2]AppendDataBoundItems="true" DataSourceID="AspNetRoles" DataTextField="Name" DataValueField="Name" Width="280px">
<asp:ListItem Text="-- Select User Role --" Value="" />
</asp:DropDownList>
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserRole"
CssClass="text-danger" ErrorMessage="User Type is required." Display="Dynamic" />
</div>
</div>
Hope this helps.