Bootstrap Span mit fester Breite

[praktikant13]

Hallo liebe Gemeinde,
hat jemand von euch Experten für mich einen kleinen Hinweis, wie ich das untenstehende span auf die Rasterbreite 2 setzen kann?
Der Hintergrund: ich möchte ein Formular mit mehreren Feldern gestalten, dessen Labels die gleiche Breite von 2 haben sollen.

  <div class="input-group input-group-sm mt-2">
    <div class="input-group-prepend">      
  <span class="input-group-text col-md-2">Vorname </span>    <<<<< das funktioniert nicht      </div>
    <input type="text" class="form-control form-control-sm col-md-9" name="Vorname"> </div>

Vielen lieben Dank

Sophia

[jonas3344]

Für ein Label verwendet man an sich auch label und nicht span.

[protestix]

Wenn du Bootstrap verwendest, solltest du dir die Dokumentation dazu ansehen und anwenden, dazu ist sie da.

[R1100]

Hallo Zusammen,

dieses Thema würde mich auch interessieren.
Mein Formular schaut auch schrecklich aus und ich habe leider auch keine andere Lösung.
Aus der Doku habe ich es so versucht:
Die Labels sollen 2/12 und das Input control eben 10/12 breit sein. Oder ist es in Bootstrap nicht vorgesehen?

<div class="col-auto">
    <label class="sr-only col-md-2" for="Vorname">Vorname</label>
    <div class="input-group mb-2">
        <div class="input-group-prepend">
            <div class="input-group-text">Vorname</div>
        </div>
        <input type="text" class="form-control col-md-10" id="Vorname" placeholder="Vorname">
    </div>
</div>
<div class="col-auto">
    <label class="sr-only col-md-2" for="Nachname">Nachname</label>
    <div class="input-group mb-2">
        <div class="input-group-prepend">
            <div class="input-group-text">Nachname</div>
        </div>
        <input type="text" class="form-control col-md-10" id="Nachname" placeholder="Nachname">
    </div>
</div>

[jonas3344]

Das könnte eine Variante sein. Mobile ist das so natürlich nicht brauchbar.

<div class="col-auto">
    <label class="sr-only col-md-2" for="Vorname">Vorname</label>
    <div class="input-group mb-2">
        <div class="input-group-prepend col-2 pr-0">
            <div class="input-group-text col-12">Vorname</div>
        </div>
        <input type="text" class="form-control col-md-10 ml-0" id="Vorname" placeholder="Vorname">
    </div>
</div>
<div class="col-auto">
    <label class="sr-only col-md-2" for="Nachname">Nachname</label>
    <div class="input-group mb-2">
        <div class="input-group-prepend col-2 pr-0">
            <div class="input-group-text col-12">Nachname</div>
        </div>
        <input type="text" class="form-control col-md-10" id="Nachname" placeholder="Nachname">
    </div>
</div>

[R1100]

Perfekt,

tausend Dank genau das ist es. Wieso weißt du so etwas.

[jonas3344]

Ich weiss gar nichts, ich probiere aus. Und lese die Doku.

[paulrichter]

Es ist gut, dass ich die Post gelesen habe. Ich habe gefunden, wonach ich so lange gesucht habe. Danke.
Viele Grüße

[hausl]

Es ist gut, dass ich die Post gelesen habe. Ich habe gefunden, wonach ich so lange gesucht habe. Danke.
Viele Grüße

Und nun bist du gesperrt, wonach du lange gebettelt hast. Bitte!