Bootstrap Form File

Hey,

ich habe ein erneutes Problem mit Bootstrap.

Ich möchte in meinem Formular ein input feld vom Typ file nutzen. Habe ich auch so gemacht nach der Dokumentation.

Dieses HTML nutze ich:

<div class="form-group">
            <label for="document" >Ihr Dokument:</label> 
              <input type="file" name="document" class="form-control" id="document">
          </div>

Hier ist das Problem das der Text, welcher neben dem file feld steht, einfach zu lang ist und dadurch wenn man testet ob es responsive ist der Text aus dem ganzen Container rausragt (siehe bilder)

Wenn ich es nach Bootstrap4 nutze dann zeigt der mit einfach ein leeres text feld an ohne irgendwas. (Siehe Bild)

<div class="form-group">
            <label class="custom-file" for="document">
              <input type="file" name="document" class="custom-file-input" id="document">
              <span class="custom-file-control"></span>
            </label> 
          </div>

Ebenso wenn man ein card-deck erstellen möchte und die Texte in den Buttons zu lang ist ragen die auch aus den einzelnen cards, aus dem gesamten Container, raus.

Habt ihr denn hilfreiche Tipps diese beiden Probleme zu beheben ?

Anbei sind die Bilder:

- unbenannt zeigt html-code1.

- unbenannt2 zeigt das Problem des html-codes 1

- file_nach_bootstrap4 zeigt das Ergebnis des zweiten html-codes welcher nach der Bootstrapdoku erstellt ist.