How to size specific form elements using Bootstrap 4?

user_11832197 0
Viewed 13

I got the following form and fields, but I can't size them so as each is suited to its input type:

This is what it looks like now VS expected result enter image description here

<div id="addTaskFieldsDiv">
  <h6>New task</h6>
  <form>
    <div class="row flex-nowrap d-flex align-items-center">
      <div style="width: 30%" class="form-group col-sm"><select class="form-control" id="taskList" placeholder="Pick a task">
          <option>Option1</option>
        </select></div>
      <div style="width: 15%" class="form-group col-sm"><input type="date" class="form-control" placeholder="MM/dd/yyyy"></div>
      <div style="width: 10%" class="form-group col-sm"><input type="link" class="form-control" placeholder="Paste a link"></div>
      <div style="width: 32%" class="form-group col-sm"><input type="text" class="form-control" placeholder="Notes"></div>
      <div style="width: 7%" class="form-group col-sm"><input type="checkbox" title="Request Approval" class="form-control"></div>
      <div style="width: 7%" class="form-group col-sm"><button id="addTask" type="submit" onclick="addTaskToTable()">+</button></div>
    </div>
  </form><br>
</div>
bootstrap-4 forms html
1 Answers

Yoc can give a try like this ...and change the column grid options to your convinience

<form>
        <div class="row flex-nowrap d-flex align-items-center">
          <div class="form-group col-sm col-md-3"><select class="form-control" id="taskList" placeholder="Pick a task">
              <option>Option1</option>
            </select></div>
          <div class="form-group col-sm col-md-3"><input type="date" class="form-control" placeholder="MM/dd/yyyy"></div>
          <div  class="form-group col-sm col-md-2"><input type="link" class="form-control" placeholder="Paste a link"></div>
          <div class="form-group col-sm col-md-2"><input type="text" class="form-control" placeholder="Notes"></div>
          <div class="form-group col-sm col-md-1"><input type="checkbox" title="Request Approval" class="form-control"></div>
          <div class="form-group col-sm col-md-1"><button id="addTask" type="submit" onclick="addTaskToTable()">+</button></div>
        </div>
      </form><br>
user_138924870
Related