Bootstrap Forms

by Juan Muñoz

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<form id="formCompras" class="box box-primary" method="POST" action="#" style="min-width: 180px;">
  <table id="tblOCompra">
          <tr>
            <td colspan='6'><h3 class='boxTitulo'>Ordenes de Compra <span>N°<em>117</em></span></h3></td>
          </tr>
            <tr>
                <td style="white-space: nowrap;">Fecha :</td>
                <td colspan='2'><input type="text"  tabindex="1"  maxlength="10"/></td>        
                
                <td style="white-space: nowrap;padding-left:10px;">RUT:</td>
                <td colspan='2'><input tabindex="2"  type="text"  maxlength="10" /></td>
            </tr>
            <tr>
                <td style="white-space: nowrap;">Nombre :</td>
                <td colspan="5"><input type="text"  id="nom_prov"  readonly></td>
            </tr>
            
            <tr>
                <td style="white-space: nowrap;">No Afecto :</td>
                <td  colspan='2'><input type="number"   maxlength="15" id="noafecto"  value="0"   readonly   /></td>
                <td style="white-space: nowrap;padding-left:10px;">Neto :</td>
                <td colspan='2'><input type="number"  maxlength="15" id="neto"      value="0"   readonly   /></td>
            </tr>
            <tr>
                <td style="white-space: nowrap;">IVA :</td>
                <td colspan='2'><input type="number"  maxlength="15" id="iva"       value="0"    readonly  /></td>
                <td style="white-space: nowrap;padding-left:10px;">Total :</td>
                <td colspan='2'><input  type="number"  maxlength="15" id="total"  value="0"  readonly /></td>
            </tr>
            <tr>
                <td style="white-space: nowrap;">CCosto :</td>
                <td colspan="2"><input type="text" tabindex="3" id="ccosto" /></td> 
        ...

CSS

#tblOCompra {
  width:400px;
}
.boxTitulo{
  text-align:center;
}
#tblOCompra input, #tblOCompra select{
  width: 100%;
  padding-top: 5px;
  margin-top:5px;
}
#tblOCompra input[type="button"]{
  width:80px;;
  font-size:14px;
}

#tblOCompra input[type="number"]{
  text-align:right;
}
#tblOCompra input[type="number"]::-webkit-outer-spin-button,
#tblOCompra input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; 
}