فرم ستونی

فرم تک ستونی:

<form>
  <div class="form-group row">
    <label class="col-sm-4 pl-sm-0 col-form-label" for="exampleInput">Label</label>
    <div class="col-sm-8 pr-sm-0">
      <input type="text" class="form-control" id="exampleInput">
    </div>
  </div>
  ...

  <div class="d-flex flex-row-reverse">
	<input type="submit" class="btn btn-primary mr-2 btn-medium" value="Submit Title">
	<input type="reset" class="btn" value="Reset Title">
  </div>
</form>

فرم چند ستونی:

<form class="row">
  <div class="col-lg-4 col-md-6 col-sm-12">
    <div class="form-group row">
      <label class="col-sm-4 pl-sm-0 col-form-label" for="exampleInput">Label</label>
      <div class="col-sm-8 pr-sm-0">
        <input type="text" class="form-control" id="exampleInput">
      </div>
    </div>
  </div>
  ...

  <div class="col-md-12 d-flex flex-row-reverse">
	<input type="submit" class="btn btn-primary mr-2 btn-medium" value="Submit Title">
	<input type="reset" class="btn" value="Reset Title">
  </div>
</form>

فرم سطری

فرم سطری ساده:

<form class="form-inline mb-3">
  <!-- form 1st component -->
  <!-- form 2nd component -->
  ...
</form>

فرم سطری با گروه دکمه:

کافی است به اولین المان فرم یا نوار ابزار سمت چپ، کلاس mr-auto. داده شود.

فرم پیشرفته

جستجوی بیشتر:

جستجو براساس از تاریخ: تا: بیمه:

دکمه بیشتر در فرم ستونی:

<div hidden name="moreForm">
   <!-- more contents -->
</div>
...

<button id="buttonId" type="button" class="btn btn-outline-primary btn-more">
  <span><i class="fa fa-chevron-right"></i>Less</span>
  <span>More<i class="fa fa-chevron-left"></i></span>
</button>

$("#buttonId").click(function () {
  $(this).blur();
  $(this).toggleClass('btn-more');
  $(this).toggleClass('btn-less');
  $("[name=moreForm]").attr('hidden', function(_, attr){ return !attr});
});

جستجوی پیشرفته:

<button id="buttonId" type="button" class="btn btn-outline-primary btn-advance-search">
  <span>Advance Search</span><i class="fa fa-chevron-down"></i>
</button>

<form id="formId" class="card p-2 form-toggle">
   <!-- form contents -->
</form>

$("#buttonId").click(function () {
  $(this).blur();
  $(this).find('i').toggleClass('fa-chevron-up');
  $(this).find('i').toggleClass('fa-chevron-down');
  $("#formId").toggleClass('show');
});