I am currently modifying the account registration section of a new VS 2013 web application that uses bootstrap css for formatting. I am working on creating a form on a page and struggling to get one section to display inline instead of as a block element. My latest attempt is shown below.
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="ddlCountry" CssClass="col-md-2 control-label">Country</asp:Label>
<div class="col-md-10">
<asp:DropDownList runat="server" ID="ddlCountry" CssClass="form-control" Width="200" />
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="tbPostalCode" CssClass="col-md-2 control-label">Postal Code</asp:Label>
<div class="col-md-10-inline">
<asp:TextBox runat="server" ID="tbPostalCode" CssClass="form-control" Width="200" MaxLength="10" Height=" " />
<asp:RequiredFieldValidator runat="server" ControlToValidate="ddlCountry"
CssClass="text-danger" ErrorMessage="The country field is required." />
<asp:RequiredFieldValidator runat="server" ControlToValidate="tbPostalCode"
CssClass="text-danger" ErrorMessage="The postal code field is required." />
</div>
</div>
</div>
</div>
Despite my efforts, the layout keeps ending up looking like this:
I am aiming to have the Postal Code label and text box displayed on the same line as Country. This should be a straightforward task, but I'm facing challenges due to bootstrap's clearing behavior.