5

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

Zim
  • 329,487
  • 83
  • 671
  • 600
lapinkoira
  • 7,530
  • 7
  • 42
  • 80

3 Answers3

8

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

Zim
  • 329,487
  • 83
  • 671
  • 600
7

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

.custom-file-label::after { content: "Charger";}
XavDeb
  • 113
  • 1
  • 6
0

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";
}
tflorac
  • 61
  • 6