How can I space these form input field evenly/horizontally using Boostrap 4?-CodePudding

I've tried adjusting here and there endlessly, but still. I'm sure this is not the right approach as Bootstrap seems to offer practicality for this purpose, but I can't find the right approach and I'd appreciate a little help:

.parent {
  font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.col-form-label {
  font-size: 0.85rem;
  margim-right: -25px;
}

.form-group input,
select {
  font-size: 0.85rem;
  padding-left: 03px;
  padding-right: 03px;
}

.form-group {
  margin-bottom: 2px !important;
}

.custom-select {
  padding-left: 0.15rem !important;
  font-size: 0.85rem;
}

select:focus {
  outline-width: 0px;
  box-shadow: 0 0 5pt 2pt #D3D3D3;
}

select {
  border: solid 1px #D3D3D3;
  width: 300px;
  height: 33px;
  scroll-behavior: smooth;
  border-radius: 0.2rem;
  font-size: 12px;
}

<head>
  <base target="_top">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN 8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
  </script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
</head>
<div >
  <form id="headerForm">
    <div  style="display: flex; justify-content: flex-end">
      <label id="orderPoLabel" for="order_po" >Pedido de Venta:</label>
      <div >
        <select id="selectOrderPo" name="order_po" required="required" >
          <option value=""></option>
        </select>
      </div>
    </div>
    <div  style="display: flex; justify-content: flex-end">
      <label for="fabricPo" >Pedido de Produción:</label>
      <div >
        <input id="fabricPo" name="fabricPo" type="text" required="required" value=""  disabled="">
      </div>
    </div>
    <div  style="display: flex; justify-content: flex-end">
      <label for="poDate" >Fecha:</label>
      <div >

        <input id="poDate" name="poDate" type="date" required="required"  placeholder="dd-mm-yyyy" onchange="orderDate1('Production');generateShipDate(getLeadTime(), 'Production')">
        <input id="npoDate" name="poDate" type="text" required="required"  placeholder="dd-mm-yyyy" onclick="orderDate()" hidden="">
      </div>
    </div>
    <div  style="display: flex; justify-content: flex-end">
      <label for="leadTime" >Plazo de Entrega:</label>
      <div >
        <input id="leadTime" name="leadTime" type="number"  onchange="generateShipDate(this, 'Production')" min="0" max="180">
      </div>
    </div>
    <div  style="display: flex; justify-content: flex-end">
      <label for="text3" >Fecha de Envío:</label>
      <div >
        <input id="shipDate" name="shipDate" type="text"  disabled="">
      </div>
    </div>
  </form>
</div>

CodePudding user response：

in class form-group row, you have to put 2 col inside it, and then you put the label and input inside one of the col.

here's the consept i mean:

row(col-7(label), col-5(input)).

CodePudding user response：

Replace Justify-content:flex-end to justify-content:center
Remove class "pr-0" next to col-4