Q:

Label smaller than button in Bootstrap button group

I found some come to make a button that is also an input file with a label :
<label>
    Import 
    <input type="file" hidden>
</label>

So I put in on the toolbar on my project where I'm using a button group :
<div class="btn-toolbar" role="toolbar">
    <div class="btn-group mr-2" role="group">
        <button class="btn btn-primary" (click)="newNetwork()">New network</button>
        <label class="btn btn-primary">
            Import 
            <input type="file" (change)="import($event.target.files)" hidden>
        </label>
        <button class="btn btn-primary" (click)="export()">Export</button>
    </div>
    <div class="btn-group mr-2" role="group">
        <button class="btn btn-primary" (click)="addElement('station')">Add station</button>
        <button class="btn btn-primary" (click)="addElement('shed')">Add shed</button>
        <button class="btn btn-primary" (click)="addElement('bridge')">Add bridge</button>
    </div>
    <div class="btn-group" role="group">
        <button class="btn" 
                [ngClass]="{'btn-primary': !linking, 'btn-warning': linking}"
                (click)="link()">
            Add link
        </button>
        <button class="btn" 
                [ngClass]="{'btn-primary': !editing, 'btn-warning': editing}"
                (click)="edit()">
            Edit
        </button>
        <button class="btn" 
                [ngClass]="{'btn-primary': !removing, 'btn-warning': removing}"
                (click)="remove()">
            Remove
        </button>
    </div>
</div>

The thing the label is actually a bit shorter than other buttons. 

I tried to fix it's height :
<label style="height: 101%" class="btn btn-primary">

It works but now the text isn't vertically centered ! 

Is there a way to make it look like a normal button ?

A:

You can remove the margin of that label like this:
(I would not recommend inline css).

.export {
 margin: 0px;
}
<head>
 <meta charset="utf-8">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

 </head>

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group mr-2" role="group">
   <button class="btn btn-primary" (click)="newNetwork()">New network</button>
   <label class="btn btn-primary export">
    Import 
    <input type="file" (change)="import($event.target.files)" hidden>
   </label>
   <button class="btn btn-primary " (click)="export()">Export</button>
  </div>
  <div class="btn-group mr-2" role="group">
   <button class="btn btn-primary" (click)="addElement('station')">Add station</button>
   <button class="btn btn-primary" (click)="addElement('shed')">Add shed</button>
   <button class="btn btn-primary" (click)="addElement('bridge')">Add bridge</button>
  </div>
  <div class="btn-group" role="group">
   <button class="btn" 
     [ngClass]="{'btn-primary': !linking, 'btn-warning': linking}"
     (click)="link()">
    Add link
   </button>
   <button class="btn" 
     [ngClass]="{'btn-primary': !editing, 'btn-warning': editing}"
     (click)="edit()">
    Edit
   </button>
   <button class="btn" 
     [ngClass]="{'btn-primary': !removing, 'btn-warning': removing}"
     (click)="remove()">
    Remove
   </button>
  </div>
 </div>

