استفاده از لیبل label توی input group در بوت استرپ ۵

سلام floating labels به طور پیش‌فرض با input group ها کار نمیکنن، ولی میتونی با ترکیب این دو، نتیجه دلخواهت رو بگیری.

برای این کار، باید input و label رو داخل یک div با کلاس form-floating بذاری. این div رو توی input group قرار بده

<div class="input-group mb-3">
  <div class="form-floating">
    <input type="text" class="form-control" id="floatingInput" placeholder="Username">
    <label for="floatingInput">Username</label>
  </div>
  <button class="btn btn-outline-secondary" type="button">Button</button>
</div>

اینجا floating labels  روی input قرار میگیره و input group هم به درستی نمایش داده میشه. حواست باشه که input با کلاس form-control و label با for که به id مربوطه اشاره داره استفاده بشن.

این روش باعث میشه که floating labels و input group باهم درست کار کنن. اگر استایل دیگه‌ ای نیاز داشتی، میتونی از کلاس‌ های اضافی بوت استرپ یا استایل‌ های سفارشی استفاده کنی