having trouble with my textbox

Question

I'm creating this assignment in visual studio asp.net using bootstrap3. Having trouble to get the textbox to be on the right hand side. Also, I can't change the submit button color. Do I need to do something with with the textbox and submit button in css?

This is how its supposed to look like: This is what i have: My code for all three textbox:

<div class="panel panel-default">
      <div class="panel-heading">Napkins (pk of 30) - <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></div>
      <div class="panel-body"><img src="Images/napkin.jpg" /><span>Quantity:</span>
      <asp:TextBox ID="txtbox2" runat="server" CssClass="form-control" Width="50px"></asp:TextBox>
      <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Quantity Required" ControlToValidate="txtbox2" Display="Dynamic" ForeColor="Red"></asp:RequiredFieldValidator>
      <asp:RangeValidator ID="RangeValidator2" runat="server" ErrorMessage="Enter a value 1-100" ControlToValidate="txtbox2" Display="Dynamic" MaximumValue="100" MinimumValue="1" Type="Double" ForeColor="Red"></asp:RangeValidator>
      </div>
</div>

My code for the submit button:

<asp:Button ID="btnSubmit" runat="server" Text="Submit Order" CssClass="form-control" Height="37px" Width="110px" />

Answer 1

You can for example use bootstrap column size. CSS:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Code:

<div class="panel panel-default">
  <div class="panel-heading">
  Napkins (pk of 30) - <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></div>

  <div class="panel-body row">
        <img class="col-sm-4" src="Images/napkin.jpg" />
        <span class="col-sm-3">Quantity:</span>
        <asp:TextBox ID="txtbox2" runat="server" CssClass="col-sm-5" Width="50px"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Quantity Required" ControlToValidate="txtbox2" Display="Dynamic" ForeColor="Red"></asp:RequiredFieldValidator>
        <asp:RangeValidator ID="RangeValidator2" runat="server" ErrorMessage="Enter a value 1-100" ControlToValidate="txtbox2" Display="Dynamic" MaximumValue="100" MinimumValue="1" Type="Double" ForeColor="Red"></asp:RangeValidator>
  </div>

As for color in the button, you can add a css class from bootstrap also, for example: btn-success

<asp:Button ID="btnSubmit" runat="server" Text="Submit Order" CssClass="btn-success" Height="37px" Width="110px" />