نمای کلی
اطلاعات شما به هیچ کس دیگری داده نمی‌شود
<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1"
               aria-describedby="emailHelp" placeholder="ایمیل خود را وارد نمایید">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with
            anyone else.
        </small>
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">رمزعبور</label>
        <input type="password" class="form-control" id="exampleInputPassword1"
               placeholder="رمزعبور">
    </div>
    <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">مرا علامت بزنید</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>
کنترل‌های فرم

برای فایلهای ورودی, تعویض کنید .form-controlرا با .form-control-file.

<!-- Input -->
<div class="form-group">
  <label for="exampleFormControlInput1">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>

<!-- Select -->
<div class="form-group">
  <label for="exampleFormControlSelect1">Example select</label>
  <select class="form-control" id="exampleFormControlSelect1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

<!-- Textarea -->
<div class="form-group">
  <label for="exampleFormControlTextarea1">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

<!-- File input -->
<div class="form-group">
  <label for="exampleFormControlFile1">Example file input</label>
  <input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
اندازه ورودی‌ها
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
اندازه انتخابگر
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>
تنها خواندنی
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
تنها خواندنی با متن جایگذاری شده
<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">ایمیل</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">رمزعبور</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="رمزعبور">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">ایمیل</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">رمزعبور</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="رمزعبور">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>
ورودی بازه‌ای

از کد روبه‌رو برای ورودی بازه‌ای استفاده کنید .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>
چک‌باکس و دکمه رادیویی

به طور پیش فرض ، هر تعداد چک‌باکس و دکمه رادیویی که در یک سطح هستند ، به صورت عمودی کنار هم می آیند..form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    چک‌باکس پیشفرض
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    چک‌باکس غیرفعال
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
   دکمه رادیویی پیشفرض
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Secondدکمه رادیویی پیشفرض
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
   دکمه رادیویی غیرفعال
  </label>
</div>

خطی

یا افزودن کلاس روبه ‌رو به چک‌باکس و دکمه‌های رادیویی میتوانید آنها را خطی نمایید .form-check-inline .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

بدون لیبل

از .position-static به ورودی های همراه .form-check برای نداشتن لیبل میتوانید استفاده کنید اما به خاطر داشته باشید استفاده از لیبل برای فهم درست کاربر ضروری است.

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>
چینش

فرم افقی

میتوانید به جای .row از .form-rowبرای استفاده از چینش ردیفی یا افقی استفاده کنید

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="نام">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="نام خانوادگی">
    </div>
  </div>
</form>

از چینش های متفاوت و پیشرفته تری هم با استفاده از گرید سیستم میتوانید بهره ببرید

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">ایمیل</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="ایمیل ">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">رمزعبورlt;/label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="رمزعبور">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">آدرس</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 خیابان اصلی ">
  </div>
  <div class="form-group">
    <label for="inputAddress2">آدرس دوم</label>
    <input type="text" class="form-control" id="inputAddress2"  placeholder="آپارتمان، طبقه، پلاک">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">شهر</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">استان</label>
      <select id="inputState" class="form-control">
        <option selected>انتخاب...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">کدپستی</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        مرا علامت بزنید
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">ورودlt;/button>
</form>

فرم عمودی

رادیوباتن
چک‌باکس
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">ایمیل</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="ایمیل ">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">رمزعبور</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="رمزعبور">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">دکمه رادیویی</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
          دکمه رادیویی یک
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
          دکمه رادیویی دو
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
           دکمه رادیویی غیرفعال
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">چک‌باکس</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
        چک‌باکس نمونه   
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">ورود</button>
    </div>
  </div>
</form>

فرم عمودی با سایز لیبل

میتوانید از .col-form-label-sm یا .col-form-label-lg در <label>ها یا <label>برای استفاده از سایز استفاده کنید همچنین .form-control-lg و .form-control-sm.

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">ایمیل</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">ایمیل</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">ایمیل</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>
متن راهنما

از این ویژگی میتوانید با استفاده از کلاس های روبه ‌رو استفاده کنید .text-muted و .form-text که در ورژن های قبلی به .help-block معروف بودند

رمز عبور شما باید 8-20 نویسه داشته باشد ، حروف و اعداد داشته باشد و نباید حاوی فضاها ، کاراکترهای ویژه یا ایموجی باشد.
<label for="inputPassword5">رمزعبور</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
رمز عبور شما باید 8-20 نویسه داشته باشد ، حروف و اعداد داشته باشد و نباید حاوی فضاها ، کاراکترهای ویژه یا ایموجی باشد.
</small>
فرم غیرفعال

برای استفاده از این ویژگی میتوانید از نمونه کد زیر استفاده نمایید

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">ورودی غیرفعال</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="ورودی غیرفعال">
    </div>
    <div class="form-group">
      <label for="disabledSelect">انتخابگر غیرفعال</label>
      <select id="disabledSelect" class="form-control">
        <option>انتخابگر غیرفعال</option>
      </select>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
         نمی‌توانید این باکس را علامت بزنید 
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>