I have been using the below Snippet for a while now. But when I try to move the same code to Bootstrap 4, The Button size and Input Box size are not aligning.
Bootstrap 3 File Upload Snippet
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-md-10">
<div class="input-group">
<label class="input-group-btn">
<span class="btn btn-primary">
Choose File <input type="file" id="pdf-file" name="pdf_file" style="display: none;">
</span>
</label>
<input type="text" class="form-control" id="pdf-name" placeholder="Select the PDF File" readonly>
</div>
</div>
Bootstrap 4 File Upload Snippet
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<div class="col-10">
<div class="input-group">
<label class="input-group-btn">
<span class="btn btn-primary">
Choose File <input type="file" id="pdf-file" name="pdf_file" style="display: none;">
</span>
</label>
<input type="text" class="form-control" id="pdf-name" placeholder="Select the PDF File" readonly>
</div>
</div>
2
Answers
you try this way
You could start by looking here
On another note, Bootstrap 4 has some new great features when it comes to file inputs. You can learn more here