Bootstrap 4 custom file upload and sizing

Question

How can I add custom file input sizing to Bootstrap 4 by using the classes such as input-group-sm, form-control-sm etc..? I want to set this custom file input field as small. Does anyone have a solution?

Using class form-control-sm

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

    <div class="form-group">
      <input class="form-control form-control-sm" value="Small input field">
    </div>

Using class input-group-sm

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

<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    <span class="input-group-text">Go</span>
  </div>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" value="Small input group">
</div>

Both are NOT WORKING here. How can I make the input field small?

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

<div class="input-group input-group-sm">
  <div class="custom-file">
    <input type="file" class="custom-file-input form-control-sm">
    <label class="custom-file-label">Choose file</label>
  </div>
</div>

Answer 1

For a pixel precise solution, you would still need some extra CSS (in 2019). If you want a Bootstrap-only solution, add .col-form-label class to the <label> tag and use Bootstrap Version 4.3. There is still an extra 0.25 rem for the height, but you can use this snipped the same way as other .form-Control-sm elements.

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


<div class="form-group">
  <div class="custom-file">
    <input type="file" class="custom-file-input">
    <label class="custom-file-label">Choose file</label>
  </div>
</div>
<div class="form-group">
  <div class="custom-file">
    <input type="file" id="customFile" class="custom-file-input form-control-sm">
    <label class="custom-file-label col-form-label-sm" for="custmFile">Choose file</label>
  </div>
</div>