bootstrap make 3 textboxes inline - asp.net

Question

I am trying to achieve this:
But I tried many things still can't. My result is this:
Here is my ASP.NET code:
<div class="row">
<div class="form-group-sm col-sm-4">
<asp:Label runat="server" Text="PD Number"></asp:Label>
</div>
<div class="form-group-sm col-sm-4">
<div class="form-control-inline"><asp:TextBox ID="txtPDNumber1" runat="server" CssClass="form-control input-sm"></asp:TextBox></div>
<div class="form-control-inline"> <asp:TextBox ID="txtPDNumber2" CssClass="form-control input-xs" runat="server"></asp:TextBox></div>
<div class="form-control-inline"> <asp:TextBox ID="txtPDNumber3" runat="server" CssClass="form-control input-sm"></asp:TextBox></div>
</div>
</div>
On top of the page I have:
<style>
.form-control-inline {
position: relative !important;
display: inline !important;
width: 30% !important;
}
</style>
Here is rendered html:
<span>PD Number</span>
</div>
<div class="form-group-sm col-sm-4">
<div class="form-control-inline"><input name="ctl00$MainContent$txtADNumber1" type="text" value="34" id="MainContent_txtAPDNumber1" class="form-control input-sm" /></div>
<div class="form-control-inline"> <input name="ctl00$MainContent$txtAPDNumber2" type="text" id="MainContent_txtPDNumber2" class="form-control input-xs" /></div>
<div class="form-control-inline"> <input name="ctl00$MainContent$txtAPDNumber3" type="text" id="MainContent_txtPDNumber3" class="form-control input-sm" /></div>
</div>
</div>
How do I adjust to make them inline. Also adjust the width of the textbox.

Answer 1

Have you tried using bootstrap grids. Something like this:
<div class="row">
<div class="col-sm-1"><input type="text" class="form-control" id="txtPDNumber1"></div>
<div class="col-sm-1"><input type="text" class="form-control" id="txtPDNumber2"></div>
<div class="col-sm-1"><input type="text" class="form-control" id="txtPDNumber3"></div>
</div>

Answer 2

In Bootstrap 3 and Bootstrap 4, there is a class you can add to a form element called form-inline, which will place your input elements on the same row. It's tough to determine from the provided code, but wrapping your input elements with a form tag and adding the form-inline class you might get your desired output.
Note: When a responsive breakpoint is reached, these elements will go be displayed on their own rows.
https://codepen.io/cowanjt/pen/QMZQjv... This will show you the code inaction.
<div class="container">
<div class="row">
<form class="form-inline">
<input type="text" class="form-control" id="exampleInput1" placeholder="">
<span>-</span>
<input type="text" class="form-control" id="exampleInput2" placeholder="">
<span>-</span>
<input type="text" class="form-control" id="exampleInput3" placeholder="">
</form>
</div>
</div>