Input type file and button of different size in Bootstrap 4 html

user_14356222 0
Viewed 369

I'm using Bootstrap 4 in html and I have an input box made of an input bar and a button.

I set the size of the button to "lg" (large) but I can't set the input bar to the same size.

This is my code:

<form>
    <div class="input-group">
        <div class="custom-file">
        <input type="file" class="custom-file-input" id="customFileInput" accept=".csv" aria-describedby="customFileInput">
        <label class="custom-file-label" for="customFileInput">Select File</label>
        </div>
        <div class="input-group-append">
        <button class="btn btn-success btn-lg" type="button" id="uploadBtn" onclick="OnClickUpload()">Upload</button>
        </div>
    </div>
</form>

And this is the result:

enter image description here

How can I set the size of the input bar to "lg" (same as button)?

bootstrap-4 button input html
3 Answers

You need to use .input-group.input-group-lg as shown in the docs: https://getbootstrap.com/docs/4.6/components/input-group/#sizing

EDIT:

That will not work with a .custom-file-input within the .input-group.
You will need to override the BS styles on .custom-file-label as shown below:

.input-group-lg .custom-file-label {
  font-size: 1.4rem;
  margin: 0;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<form>
  <div class="input-group input-group-lg">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="customFileInput" accept=".csv" aria-describedby="customFileInput">
      <label class="custom-file-label" for="customFileInput">Select File</label>
    </div>
    <div class="input-group-append">
      <button class="btn btn-success" type="button" id="uploadBtn" onclick="OnClickUpload()">Upload</button>
    </div>
  </div>
</form>

user_61273930

Remove "btn-lg" from the button's class and put margin only.

class="btn btn-success m-2"

user_189063990

For me this worked for height issues:

 .input-group-lg .custom-file-label {
         font-size: 1.25rem;
         height: calc(1.5em + 1rem + 2px);
    }
     .input-group-lg .custom-file-label::after {
         height: calc(1.5em + 1rem + 2px);
    }
     .input-group-lg .custom-file + .input-group-append .input-group-text {
         height: calc(1.5em + 1rem + 2px);
    }
user_93990660
Related