<form>
  <div class="form-row">
    <div class="col-md-12 mb-3">
      <label for="validationServer01">ورودی موفق</label>
      <input type="text" class="form-control border-success" id="validationServer01" placeholder="نام و نام خانوادگی" required>
      <div class="text-success small mt-1">
        صحیح!
      </div>
    </div>
    <div class="col-md-12 mb-3">
      <label for="validationServer02">ورودی اطلاعات</label>
      <input type="text" class="form-control border-info" id="validationServer02" placeholder="نام و نام خانوادگی"
        value="نام و نام خانوادگی" required>
      <div class="text-info small mt-1">
        ما هرگز ایمیل شما را با هیچ کس دیگری به اشتراک نمی‌گذاریم.
      </div>
    </div>
    <div class="col-md-12 mb-3">
      <label for="validationServer02">ورودی اخطار</label>
      <input type="text" class="form-control border-warning" id="validationServer02" placeholder="نام و نام خانوادگی"
        value="نام و نام خانوادگی" required>
      <div class="text-warning small mt-1">
        خدای من، قالب‌بندی آن را بررسی کن و دوباره امتحان کن.
      </div>
    </div>
    <div class="col-md-12 mb-3">
      <label for="validationServer02">ورودی خطا</label>
      <input type="text" class="form-control border-danger" id="validationServer02" placeholder="نام و نام خانوادگی"
        value="نام و نام خانوادگی" required>
      <div class="text-daborder-danger small mt-1">
        ببخشید، این نام کاربری قبلاً استفاده شده است. نام کاربری دیگری را امتحان کنید؟
      </div>
    </div>
  </div>
  <button class="btn btn-primary btn-pill mr-2" type="submit">ثبت</button>
  <button class="btn btn-light btn-pill" type="submit">لغو</button>
</form>

          

<form>
  <div class="mb-5">
    <label for="validationServer01">افزونه سمت راست</label>
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">example.com@</span>
      </div>
      <input type="text" class="form-control" placeholder="نام کاربری" aria-label="Username"
        aria-describedby="basic-addon1">
    </div>
    <div class="text-success small mt-1">
      صحیح!
    </div>
  </div>

  <div class="mb-5">
    <label for="validationServer01">افزونه سمت چپ</label>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="نام کاربری گیرنده" aria-label="Recipient's username"
        aria-describedby="basic-addon2">
      <div class="input-group-append">
        <span class="input-group-text" id="basic-addon2">@</span>
      </div>
    </div>
    <div class="text-warning small mt-1">
      خدای من، قالب‌بندی آن را بررسی کن و دوباره امتحان کن.
    </div>
  </div>

  <div class="mb-5">
    <label for="validationServer01">ورودی خطا</label>
    <div class="input-group">
      <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="text-danger small mt-1">
      ببخشید، این نام کاربری قبلاً استفاده شده است. نام کاربری دیگری را امتحان کنید؟
    </div>
  </div>

  <button class="btn btn-primary btn-pill mr-2" type="submit">ثبت</button>
  <button class="btn btn-light btn-pill" type="submit">لغو</button>
</form>

          

<form>
  <div class="form-group row mb-6">
    <label for="staticEmail" class="col-sm-4 col-form-label">ورودی موفق</label>
    <div class="col-sm-8">
      <input type="text" class="form-control border-success" id="validationServer01" placeholder="نام و نام خانوادگی" required>
      <div class="text-success small mt-1">
        صحیح!
      </div>
    </div>
  </div>

  <div class="form-group row mb-6">
    <label for="staticEmail" class="col-sm-4 col-form-label">ورودی اطلاعات</label>
    <div class="col-sm-8">
      <input type="text" class="form-control border-info" id="validationServer01" placeholder="نام و نام خانوادگی" required>
      <div class="text-info small mt-1">
        صحیح!
      </div>
    </div>
  </div>

  <div class="form-group row mb-6">
    <label for="staticEmail" class="col-sm-4 col-form-label">ورودی اخطار</label>
    <div class="col-sm-8">
      <input type="text" class="form-control border-warning" id="validationServer01" placeholder="نام و نام خانوادگی" required>
      <div class="text-warning small mt-1">
        صحیح!
      </div>
    </div>
  </div>

  <div class="form-group row mb-6">
    <label for="staticEmail" class="col-sm-4 col-form-label">ورودی خطا</label>
    <div class="col-sm-8">
      <input type="text" class="form-control border-danger" id="validationServer01" placeholder="نام و نام خانوادگی" required>
      <div class="text-danger small mt-1">
        صحیح!
      </div>
    </div>
  </div>

  <button class="btn btn-primary btn-pill mr-2" type="submit">ثبت</button>
  <button class="btn btn-light btn-pill" type="submit">لغو</button>
</form>

          

<form>
  <div class="mb-5">
    <label for="validationServer01">افزونه سمت راست</label>
    <div class="input-group">
      <div class="input-group-prepend">
        <button class="btn btn-primary" type="button">برو</button>
      </div>
      <input type="text" class="form-control" placeholder="نام کاربری" aria-label="Username"
        aria-describedby="basic-addon1">
    </div>
    <div class="text-success small mt-1">
      صحیح!
    </div>
  </div>

  <div class="mb-5">
    <label for="validationServer01">افزونه سمت چپ</label>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="تنظیمات" aria-label="Recipient's username"
        aria-describedby="basic-addon2" placeholder="Search for...">
      <div class="input-group-prepend">
        <button class="btn btn-primary" type="button">برو</button>
      </div>
    </div>

    <div class="text-warning small mt-1">
      خدای من، قالب‌بندی آن را بررسی کن و دوباره امتحان کن.
    </div>
  </div>

  <div class="mb-5">
    <label for="validationServer01">ورودی خطا</label>
    <div class="input-group">
      <div class="input-group-prepend">
        <button class="btn btn-primary" type="button">برو</button>
      </div>
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
      <div class="input-group-append">
        <button class="btn btn-danger" type="button">برو</button>
      </div>
    </div>
    <div class="text-danger small mt-1">
      ببخشید، این نام کاربری قبلاً استفاده شده است. نام کاربری دیگری را امتحان کنید؟
    </div>
  </div>

  <button class="btn btn-primary btn-pill mr-2" type="submit">ثبت</button>
  <button class="btn btn-light btn-pill" type="submit">لغو</button>

</form>