پیشفرض

@
@example.com
https://
.00
با متن
<div class="input-group mb-4">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon5">@</span>
  </div>
  <input type="text" class="form-control" placeholder="نام کاربری" aria-label="Username">
</div>

<div class="input-group mb-5">
  <input type="text" class="form-control" placeholder="نام کاربری گیرنده" aria-label="نام کاربری گیرنده" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon6">@example.com</span>
  </div>
</div>

<label for="basic-url">آدرس اینترنتی غرور شما</label>
<div class="input-group mb-4">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon7">https://</span>
  </div>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="example.com/users/">
</div>

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

<div class="input-group mb-4">
  <div class="input-group-prepend">
    <span class="input-group-text">با متن</span>
  </div>
  <textarea class="form-control" aria-label="با متن"></textarea>
</div>

نماد ساده

چپ

راست

=========
  LEFT
=========
<div class="input-group mb-4">
    <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1"><svg> ... </svg></span>
    </div>
    <input type="text" class="form-control" placeholder="اطلاعیه" aria-label="notification" aria-describedby="basic-addon1">
</div>

=========
  Right
=========
<div class="input-group mb-4">
    <input type="text" class="form-control" placeholder="اطلاعیه" aria-label="notification" aria-describedby="basic-addon2">
    <div class="input-group-append">
        <span class="input-group-text" id="basic-addon2"><svg> ... </svg></span>
    </div>
</div>

آیکون چرخشی

چپ

راست

=========
  LEFT
=========
<div class="input-group mb-4">
    <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon3"><svg class="spin"> ... </svg></span>
    </div>
    <input type="text" class="form-control" placeholder="اسپینرها" aria-label="spinners" aria-describedby="basic-addon3">
</div>

=========
  Right
=========
<div class="input-group mb-4">
    <input type="text" class="form-control" placeholder="اسپینرها" aria-label="spinners" aria-describedby="basic-addon4">
    <div class="input-group-append">
        <span class="input-group-text" id="basic-addon4"><svg class="spin"> ... </svg></span>
    </div>
</div>

آیکون کشویی

چپ

راست

=========
  LEFT
=========
<div class="input-group mb-4">
    <div class="input-group-prepend">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg> ... </svg> </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="javascript:void(0);">Action</a>
            <a class="dropdown-item" href="javascript:void(0);">Another action</a>
            <a class="dropdown-item" href="javascript:void(0);">چیز دیگری در اینجا</a>
            <div role="separator" class="dropdown-divider"></div>
            <a class="dropdown-item" href="javascript:void(0);">پیوند جدا شده</a>
        </div>
    </div>
    <input type="text" class="form-control"placeholder="کشویی" aria-label="dropdown">
</div>

=========
  Right
=========
<div class="input-group mb-4">
    <input type="text" class="form-control"placeholder="کشویی" aria-label="dropdown">
    <div class="input-group-append">
        <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg> ... </svg> </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="javascript:void(0);">Action</a>
            <a class="dropdown-item" href="javascript:void(0);">Another action</a>
            <a class="dropdown-item" href="javascript:void(0);">چیز دیگری در اینجا</a>
            <div role="separator" class="dropdown-divider"></div>
            <a class="dropdown-item" href="javascript:void(0);">پیوند جدا شده</a>
        </div>
    </div>
</div>

چک باکس ها

چپ

راست

=========
  LEFT
=========
<div class="input-group mb-4">
  <div class="input-group-prepend">
    <div class="input-group-text">
        <div class="n-chk align-self-end">
            <label class="new-control new-checkbox checkbox-danger" style="height: 21px; margin-bottom: 0; margin-left: 0">
              <input type="checkbox" class="new-control-input" checked>
              <span class="new-control-indicator"></span>
            </label>
        </div>
    </div>
  </div>
  <input type="text" class="form-control" placeholder="چک باکس" aria-label="checkbox" >
</div>

=========
  Right
=========
<div class="input-group mb-4">
    <input type="text" class="form-control" placeholder="چک باکس" aria-label="checkbox" aria-describedby="basic-addon1">
    <div class="input-group-append">
        <div class="input-group-text">
            <div class="n-chk align-self-end">
                <label class="new-control new-checkbox checkbox-warning" style="height: 21px; margin-bottom: 0; margin-left: 0">
                  <input type="checkbox" class="new-control-input" checked>
                  <span class="new-control-indicator"></span>
                </label>
            </div>
        </div>
    </div>
</div>

رادیو ها

چپ

راست

=========
  LEFT
=========
<div class="input-group mb-4">
  <div class="input-group-prepend">
    <div class="input-group-text">
        <div class="n-chk align-self-end">
            <label class="new-control new-radio radio-info" style="height: 21px; margin-bottom: 0; margin-left: 0">
              <input type="radio" class="new-control-input" name="custom-radio-1" checked>
              <span class="new-control-indicator"></span>
            </label>
        </div>
    </div>
  </div>
  <input type="text" class="form-control" placeholder="رادیو" aria-label="radio" >
</div>

=========
  Right
=========
<div class="input-group mb-4">
    <input type="text" class="form-control" placeholder="رادیو" aria-label="Radio">
    <div class="input-group-append">
        <div class="input-group-text">
            <div class="n-chk align-self-end">
                <label class="new-control new-radio radio-success" style="height: 21px; margin-bottom: 0; margin-left: 0">
                  <input type="radio" class="new-control-input" name="custom-radio-1" checked>
                  <span class="new-control-indicator"></span>
                </label>
            </div>
        </div>
    </div>
</div>

سوییچ

چپ

راست

=========
  LEFT
=========

<div class="input-group mb-4">
    <div class="input-group-prepend">
        <div class="input-group-text">
            <label class="switch s-primary mb-0">
                <input type="checkbox" checked="">
                <span class="slider"></span>
            </label>
        </div>
    </div>
    <input type="text" class="form-control" placeholder="سوییچ" aria-label="switch" >
</div>

=========
  RIGHT
=========

<div class="input-group mb-4">
    <input type="text" class="form-control" placeholder="سوییچ" aria-label="switch">
    <div class="input-group-append">
        <div class="input-group-text">
            <label class="switch s-danger mb-0">
                <input type="checkbox" checked="">
                <span class="slider"></span>
            </label>
        </div>
    </div>
</div>

اندازه

اندازه

کوچک
پیشفرض
بزرگ
<div class="input-group input-group-sm mb-4">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
  </div>
  <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="input-group mb-4">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
  </div>
  <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>

<div class="input-group input-group-lg mb-4">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
  </div>
  <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div>

زمینه های مختلف

ورودی های متعدد

نام و نام خانوادگی
<div class="input-group mb-4">
  <div class="input-group-prepend">
    <span class="input-group-text">نام و نام خانوادگی</span>
  </div>
  <input type="text" class="form-control">
  <input type="text" class="form-control">
</div>

افزونه های متعدد

چپ

0.00

راست

0.00
=========
  LEFT
=========
<div class="input-group mb-4">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>

=========
  RIGHT
=========
<div class="input-group mb-4">
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <div class="input-group-append">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
</div>

ورودی گروهی با عمل

دکمه هایی با کشویی

چپ

راست

=========
  LEFT
=========
<div class="input-group mb-4">
  <div class="input-group-prepend">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="javascript:void(0);">Action</a>
      <a class="dropdown-item" href="javascript:void(0);">Another action</a>
      <a class="dropdown-item" href="javascript:void(0);">چیز دیگری در اینجا</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="javascript:void(0);">پیوند جدا شده</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

=========
  RIGHT
=========
<div class="input-group mb-4">
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
  <div class="input-group-append">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="javascript:void(0);">Action</a>
      <a class="dropdown-item" href="javascript:void(0);">Another action</a>
      <a class="dropdown-item" href="javascript:void(0);">چیز دیگری در اینجا</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="javascript:void(0);">پیوند جدا شده</a>
    </div>
  </div>
</div>

دکمه های تقسیم شده

چپ

راست

=========
  LEFT
=========
<div class="input-group mb-4">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-info">Action</button>
    <button type="button" class="btn btn-outline-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <svg> ... </svg>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="javascript:void(0);">Action</a>
      <a class="dropdown-item" href="javascript:void(0);">Another action</a>
      <a class="dropdown-item" href="javascript:void(0);">چیز دیگری در اینجا</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="javascript:void(0);">پیوند جدا شده</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>

=========
  RIGHT
=========
<div class="input-group mb-4">
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
  <div class="input-group-append">
    <button type="button" class="btn btn-outline-info">Action</button>
    <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <svg> ... </svg>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="javascript:void(0);">Action</a>
      <a class="dropdown-item" href="javascript:void(0);">Another action</a>
      <a class="dropdown-item" href="javascript:void(0);">چیز دیگری در اینجا</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="javascript:void(0);">پیوند جدا شده</a>
    </div>
  </div>
</div>

دکمه های اضافی

چپ

راست

چپ

راست

=========
  LEFT
=========
<div class="input-group mb-4">
  <div class="input-group-prepend">
    <button class="btn btn-primary" type="button">دکمه</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="">
</div>

=========
  RIGHT
=========
<div class="input-group mb-4">
  <input type="text" class="form-control" placeholder="نام کاربری گیرنده" aria-label="نام کاربری گیرنده">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">دکمه</button>
  </div>
</div>

=========
  LEFT
=========
<div class="input-group mb-4">
  <div class="input-group-prepend">
    <button class="btn btn-outline-primary" type="button">دکمه</button>
    <button class="btn btn-outline-primary" type="button">دکمه</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="">
</div>

=========
  RIGHT
=========
<div class="input-group mb-4">
  <input type="text" class="form-control" placeholder="نام کاربری گیرنده" aria-label="نام کاربری گیرنده">
  <div class="input-group-append">
    <button class="btn btn-outline-primary" type="button">دکمه</button>
    <button class="btn btn-outline-primary" type="button">دکمه</button>
  </div>
</div>