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

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)?

htmlbuttoninputbootstrap-4


Solution 1:[1]

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/[email protected]/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>

Solution 2:[2]

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

class="btn btn-success m-2"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Parth

Related Questions