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

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

Answer 2

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

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