Bootstrap 4 custom file upload and sizing
Solution 1
For a pixel precise solution, you would still need some extra CSS (in 2019). If you want a Bootstrap-only solution, add .col-form-label
class to the <label>
tag and use Bootstrap Version 4.3. There is still an extra 0.25 rem for the height, but you can use this snipped the same way as other .form-Control-sm
elements.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="custom-file">
<input type="file" class="custom-file-input">
<label class="custom-file-label">Choose file</label>
</div>
</div>
<div class="form-group">
<div class="custom-file">
<input type="file" id="customFile" class="custom-file-input form-control-sm">
<label class="custom-file-label col-form-label-sm" for="custmFile">Choose file</label>
</div>
</div>
Solution 2
Reduce padding to 0 using p-0
Also add the following style
#abc.custom-file-label,
#abc.custom-file-label::after {
height: auto;
padding-top: 0;
padding-bottom: 0;
}
#abc.custom-file-label,
#abc.custom-file-label::after {
height: auto;
padding-top: 0;
padding-bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group input-group-sm p-0">
<div class="custom-file p-0">
<input type="file" class="custom-file-input form-control-sm p-0">
<label id="abc" class="custom-file-label py-0">Choose file</label>
</div>
</div>
Solution 3
Solution: It can be optimize more...
function ftt(){
$('#file').click(); // emulate click on input file
}
function on(){
var ft = $('#file').val();
$('#foto').val(ft);
}
function crearEmp(){
var files = $('#file')[0].files;
console.log('do something', files);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form action="" method="POST">
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text font-italic" id="inputGroup-sizing-sm">Foto</span>
</div>
<input type="text" class="form-control" id="foto" name="foto" aria-label="Sizing example input" onClick="ftt()" value="No se ha seleccionado ningún archivo." aria-describedby="inputGroup-sizing-sm" />
</div>
<input type="file" onchange="on()" hidden="true" id="file" />
<div class="col-md-6 offset-md-4">
<button name="btn-" type="button" onClick="crearEmp()" class="btn btn-n btn-outline-success btn-sm">Guardar</button>
</div>
</form>
Renjith
I'm Renjith, Full Stack Developer from Calicut, India. I specialized in UI/UX web-based software and hybrid mobile applications development. I started teaching myself web programming languages in my freshman years of high school. I've been creating websites and applications for startups, software development teams since 2011. I carefully organize all designing elements while wireframing to make it user interfaced. And I giving more importance to unique and validated semantic coding. As a programmer, I specialize in design and develop highly performing, secure and robust applications without using ready-made assets that available and accessible on the internet. I believe in the individual approach to each development brings out the best results. I'm a person who is willing to learn and adapts quickly. I'm keen to design and security. I believe in the core principles of open-source and support it. I'm constantly learning new skills and techniques which I implementing in my projects. And also, I have a minimalistic approach to design and usability. Because I believe in beauty that actually lies in simplicity! Now I'm working for Envato online marketplace as a Back-end developer. I love coding, actually as a code addict. It's my hobby, my passion. So I spending about 16+ hours in a day to play with it and enjoying the dev' life :)
Updated on June 14, 2022Comments
-
Renjith almost 2 years
How can I add custom file input sizing to Bootstrap 4 by using the classes such as
input-group-sm
,form-control-sm
etc..? I want to set this custom file input field as small. Does anyone have a solution?Using class
form-control-sm
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="form-group"> <input class="form-control form-control-sm" value="Small input field"> </div>
Using class
input-group-sm
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="input-group input-group-sm"> <div class="input-group-prepend"> <span class="input-group-text">Go</span> </div> <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" value="Small input group"> </div>
Both are NOT WORKING here. How can I make the input field small?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="input-group input-group-sm"> <div class="custom-file"> <input type="file" class="custom-file-input form-control-sm"> <label class="custom-file-label">Choose file</label> </div> </div>