How can I align three ASP.NET controls using Bootstrap styles on the same line?

Question

        <div id="search-container">
            <div class="form-inline">
                <asp:DropDownList ID="drpSearchFilter" runat="server" CssClass="form-control">
                    <asp:ListItem>Title</asp:ListItem>
                    <asp:ListItem>Author</asp:ListItem>
                    <asp:ListItem>Keywords</asp:ListItem>
                </asp:DropDownList>
                <asp:TextBox ID="txtSearchBox" CssClass="form-control" runat="server"/>
                <asp:Button ID="btnSearch" runat="server" Text="Search" CssClass="btn btn-default" OnClick="btnSearch_Click"/>
            </div>
        </div>

Right now all of these controls are appearing on separate lines.

Answer 1

Try this one (from the Bootstrap documentation ):

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>