Translating custom-file input Bootstrap 4

Question

I am using bootstrap and following this doc:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

The input text isnt being translated even with lang="es" attribute added.

Here there is a codepen, what am I missing?

https://codepen.io/anon/pen/ZxGNrw

Convertite

Answer 1

It's because Bootstrap SASS isn't imported into the Codepen. You first need to @import "bootstrap/functions" (since that's where $custom-file-text() lives), make the changes, and finally @import "bootstrap"....

@import "bootstrap/functions";

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

@import "bootstrap";

I don't know of way to import the Bootstrap SASS into Codepen, but here's a working example on Codeply: https://www.codeply.com/go/2Mo9OrokBQ

---

Related question:
Bootstrap 4 File Input

Seaton

are you sure you are not overwriting $custom-file-text when you import bootstrap? – Mezcaline

@MarcosDiPaolo yes, because if you look in the bootstrap scss files you'll see it's using !default – Seaton

Answer 2

Well, the best way to achieve that is just to overide the CSS pseudo-class ::after

.custom-file-label::after { content: "Charger";}

Magnetomotive

Fast and dirty +1 :-) – Saturate

.custom-file-input:lang(fr) .custom-file-label::after { content: "Parcourir"; } – Galah

Answer 3

If overriding CSS, it's better to use the ":lang()" selector to apply your label only for a given language:

.custom-file-input:lang(fr) .custom-file-label::after {
    content: "Parcourir";
}

Galah

Answer 4

I had the same problem. The attribute data-browse in the custom-file-label fixed it:

<div class="custom-file">
   <input type="file" class="cursor-pointer custom-file-input" accept="image/*" id="foto" name="foto">
   <label class="custom-file-label" for="foto" data-browse="Buscar">Seleccione un archivo</label>
</div>

Scholl