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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
lapinkoira
  • 8,320
  • 9
  • 51
  • 94

3 Answers3

9

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
7

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

.custom-file-label::after { content: "Charger";}
XavDeb
  • 123
  • 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
  • 67
  • 6