1️⃣ Basic Input Group (گروه ورودی ساده)

• کلاس‌ها:

  • input-group → والد

  • input-group-text → متن یا آیکون کنار input

  • form-control → خود input

<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

• aria-describedby → برای دسترسی بهتر و توضیح متن

2️⃣ Input Group with Button

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search" aria-label="Search">
  <button class="btn btn-primary" type="button">جستجو</button>
</div>

• اضافه کردن دکمه کنار input بدون شکستن استایل

3️⃣ Input Group with Select

<div class="input-group mb-3">
  <select class="form-select" id="inputGroupSelect01">
    <option selected>Choose...</option>
    <option value="1">گزینه ۱</option>
    <option value="2">گزینه ۲</option>
  </select>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username">
</div>

• ترکیب Select و Input در یک خط

4️⃣ Input Group with Text Before / After

• متن یا واحد پولی قبل یا بعد input

<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-text">.00</span>
</div>

• مناسب برای قیمت، ارز یا واحد

5️⃣ Multiple Inputs / Buttons

<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control">
  <span class="input-group-text">.com</span>
  <button class="btn btn-outline-secondary" type="button">ارسال</button>
</div>

• ترکیب چند عنصر، متن و دکمه در یک گروه

6️⃣ Input Group Sizing

• کوچک: input-group-sm

• بزرگ: input-group-lg

<div class="input-group input-group-sm mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Small input">
</div>

<div class="input-group input-group-lg">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Large input">
</div>

✅ نکات مهم

• Input Groups بوت‌استرپ برای طراحی فرم‌های حرفه‌ای بدون نوشتن CSS اضافی عالی است.

• می‌توان متن، آیکون، Select، دکمه و حتی چند Input را در یک خط ترکیب کرد.

• اندازه‌ها (sm, lg) و Utilities می‌توانند ظاهر و فاصله‌ها را کنترل کنند.

• کاملاً ریسپانسیو و آماده موبایل است.