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% }