Bootstrap 4.0 Custom-file-input width is wider than other inputs

Question

Using Bootstrap 4.0 with .net framework 4.6.2 to create a form. The custom-file-input, input used to upload attachment file, is longer in width than my other inputs. Is there a proper way to fix this so that it is mobile responsive?

        <div class="form-group row">
            <label class="col-lg-2 col-form-label">Publish Date</label>
            <div class="col-lg-10">
                @Html.TextBoxFor(model => model.PublishDate, new { @class = "form-control", @id = "publishdatetimepicker" })
                <i class="fa-regular fa-calendar-days float-right publish-datetime"></i>
            </div>
        </div>

        <div class="form-group row">       <----this element is wider, when compared to the above div
            <label class="col-lg-2 col-form-label">PDF Attachment</label>
            <div class="col-lg-10 custom-file">
                <input type="file" class="custom-file-input" id="customfileinput" required>
                <label class="custom-file-label" for="customfileinput">Choose file...</label>
            </div>
        </div>

I was able to get it to the same length using max-width:80%, however when the screen size gets smaller and the label and input group get placed on separate rows, the file upload control is a lot shorter than the other input controls. Any help would be greatly appreciated.

Answer 1

Just in case it helps anyone else out down the line. I was able to fix it by setting the style for .custom-file-label{ right:0; left:0;} to .custom-file-label{ right:2%;left:1.75% }

Answer 2

I had the same issue today and I solved it like this:

Form input:

<div class="form-group col-12 col-md-6">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
</div>

Styling:

.custom-file-label {
    right: 5px;
    left: 5px;
    width: calc(100% - 10px);
}