Form group

<!-- Form group: Text input + Button -->
<form class="form-group">
  <input class="form-control" type="text" placeholder="Text input">
  <button type="button" class="btn btn-translucent-primary">Button</button>
</form>

<!-- Form group: Select + Button -->
<form class="form-group">
  <select class="form-select">
    <option>Select box</option>
    <option>Option item 1</option>
    <option>Option item 2</option>
    <option>Option item 3</option>
  </select>
  <button type="button" class="btn btn-translucent-primary">Button</button>
</form>

<!-- Form group: Input group + Button -->
<form class="form-group">
  <div class="input-group">
    <span class="input-group-text text-muted">
      <i class="fi-camera-plus"></i>
    </span>
    <input class="form-control" type="text" placeholder="Input group">
  </div>
  <button type="button" class="btn btn-translucent-primary">Button</button>
</form>

<!-- Form group: Dropdown + Button -->
<form class="form-group">
  <div class="dropdown" data-bs-toggle="select">
    <button class="btn btn-link dropdown-toggle" type="button" data-bs-toggle="dropdown"><span class="dropdown-toggle-label">Dropdown here </span></button>
    <input type="hidden">
    <ul class="dropdown-menu">
      <li>
        <a href="#" class="dropdown-item">
          <span class="dropdown-item-label">Action</span>
        </a>
      </li>
      <li>
        <a href="#" class="dropdown-item">
          <span class="dropdown-item-label">Another action</span>
        </a>
      </li>
      <li>
        <a href="#" class="dropdown-item">
          <span class="dropdown-item-label">Something else here</span>
        </a>
      </li>
      <li class="dropdown-divider"></li>
      <li>
        <a href="#" class="dropdown-item">
          <span class="dropdown-item-label">Separated link</span>
        </a>
      </li>
    </ul>
  </div>
  <button type="button" class="btn btn-translucent-primary ms-auto">Button</button>
</form>

<!-- Form group: Range slider + Button -->
<form class="form-group">
  <div class="range-slider" data-start-min="450" data-min="0" data-max="1000" data-step="1">
    <div class="range-slider-ui"></div>
      <ngx-slider [(value)]="450" [options]="option"></ngx-slider>
  </div>
  <button type="button" class="btn btn-translucent-primary ms-auto">Button</button>
</form>

<!-- Form group: Multiple controls (Responsive) -->
<form class="form-group d-block">
  <div class="row g-0 ms-sm-n2">
    <div class="col-md-7 d-sm-flex align-items-center">
      <div class="input-group w-sm-50 border-end-sm">
        <span class="input-group-text text-muted">
          <i class="fi-search"></i>
        </span>
        <input class="form-control" type="text" placeholder="Search site...">
      </div>
      <hr class="d-sm-none my-2">
      <div class="dropdown w-sm-50 border-end-md" data-bs-toggle="select">
        <button class="btn btn-link dropdown-toggle" type="button" data-bs-toggle="dropdown">
          <i class="fi-list me-2"></i>
          <span class="dropdown-toggle-label">All categories</span>
        </button>
        <input type="hidden">
        <ul class="dropdown-menu">
          <li>
            <a href="#" class="dropdown-item">
              <span class="dropdown-item-label">Accomodation</span>
            </a>
          </li>
          <li>
            <a href="#" class="dropdown-item">
              <span class="dropdown-item-label">Food & Drink</span>
            </a>
          </li>
          <li>
            <a href="#" class="dropdown-item">
              <span class="dropdown-item-label">Shopping</span>
            </a>
          </li>
          <li>
            <a href="#" class="dropdown-item">
              <span class="dropdown-item-label">Art & History</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <hr class="d-md-none mt-2">
    <div class="col-md-5 d-sm-flex align-items-center pt-4 pt-md-0">
      <div class="d-flex align-items-center w-100 pt-2 pb-4 py-sm-0 ps-3">
        <i class="fi-cash fs-lg text-muted me-2"></i>
        <span class="text-muted">Price</span>
        <div class="range-slider" data-start-min="450" data-min="0" data-max="1000" data-step="1">
          <div class="range-slider-ui"></div>
          <ngx-slider [(value)]="450" [options]="option"></ngx-slider>
        </div>
      </div>
      <button type="button" class="btn btn-primary w-100 w-md-auto">Search</button>
    </div>
  </div>
</form>

<!-- Form group pill shape: Multiple controls (Responsive) -->
<form class="form-group d-block rounded-md-pill">
  <div class="row g-0 ms-sm-n2">
    <div class="col-md-7 d-sm-flex align-items-center">
      <div class="input-group w-sm-50 border-end-sm">
        <span class="input-group-text text-muted rounded-pill">
          <i class="fi-search"></i>
        </span>
        <input class="form-control" type="text" placeholder="Search site...">
      </div>
      <hr class="d-sm-none my-2">
      <div class="dropdown w-sm-50 border-end-md" data-bs-toggle="select">
        <button class="btn btn-link dropdown-toggle" type="button" data-bs-toggle="dropdown">
          <i class="fi-list me-2"></i>
          <span class="dropdown-toggle-label">All categories</span>
        </button>
        <input type="hidden">
        <ul class="dropdown-menu">
          <li>
            <a href="#" class="dropdown-item">
              <span class="dropdown-item-label">Accomodation</span>
            </a>
          </li>
          <li>
            <a href="#" class="dropdown-item">
              <span class="dropdown-item-label">Food & Drink</span>
            </a>
          </li>
          <li>
            <a href="#" class="dropdown-item">
              <span class="dropdown-item-label">Shopping</span>
            </a>
          </li>
          <li>
            <a href="#" class="dropdown-item">
              <span class="dropdown-item-label">Art & History</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <hr class="d-md-none mt-2">
    <div class="col-md-5 d-sm-flex align-items-center pt-4 pt-md-0">
      <div class="d-flex align-items-center w-100 pt-2 pb-4 py-sm-0 ps-3">
        <i class="fi-cash fs-lg text-muted me-2"></i>
        <span class="text-muted">Price</span>
        <div class="range-slider" data-start-min="450" data-min="0" data-max="1000" data-step="1">
          <div class="range-slider-ui"></div>
          <ngx-slider [(value)]="450" [options]="option"></ngx-slider>
        </div>
      </div>
      <button type="button" class="btn btn-primary rounded-pill w-100 w-md-auto">Search</button>
    </div>
  </div>
</form>

<!-- Large form group -->
<form class="form-group">
  <div class="input-group input-group-lg">
    <span class="input-group-text text-muted">
      <i class="fi-search"></i>
    </span>
    <input type="text" class="form-control" placeholder="Search query...">
  </div>
  <button type="button" class="btn btn-translucent-primary btn-lg">Search</button>
</form>

<!-- Normal form group -->
<form class="form-group">
  <div class="input-group">
    <span class="input-group-text text-muted">
      <i class="fi-search"></i>
    </span>
    <input type="text" class="form-control" placeholder="Search query...">
  </div>
  <button type="button" class="btn btn-translucent-primary">Search</button>
</form>

<!-- Small form group -->
<form class="form-group">
  <div class="input-group input-group-sm">
    <span class="input-group-text text-muted">
      <i class="fi-search"></i>
    </span>
    <input type="text" class="form-control" placeholder="Search query...">
  </div>
  <button type="button" class="btn btn-translucent-primary btn-sm">Search</button>
</form>

<!-- Light form group: Text input + Button -->
<form class="form-group form-group-light">
  <input class="form-control" type="text" placeholder="Text input">
  <button type="button" class="btn btn-primary">Button</button>
</form>

<!-- Light form group: Select + Button -->
<form class="form-group form-group-light">
  <select class="form-select">
    <option>Select box</option>
    <option>Option item 1</option>
    <option>Option item 2</option>
    <option>Option item 3</option>
  </select>
  <button type="button" class="btn btn-primary">Button</button>
</form>

<!-- Light form group: Input group + Button -->
<form class="form-group form-group-light">
  <div class="input-group">
    <span class="input-group-text">
      <i class="fi-camera-plus"></i>
    </span>
    <input class="form-control" type="text" placeholder="Input group">
  </div>
  <button type="button" class="btn btn-primary">Button</button>
</form>

<!-- Light form group: Dropdown + Button -->
<form class="form-group form-group-light">
  <div class="dropdown" data-bs-toggle="select">
    <button class="btn btn-link dropdown-toggle" type="button" data-bs-toggle="dropdown"><span class="dropdown-toggle-label">Dropdown here </span></button>
    <input type="hidden">
    <ul class="dropdown-menu dropdown-menu-dark">
      <li>
        <a href="#" class="dropdown-item">
          <span class="dropdown-item-label">Action</span>
        </a>
      </li>
      <li>
        <a href="#" class="dropdown-item">
          <span class="dropdown-item-label">Another action</span>
        </a>
      </li>
      <li>
        <a href="#" class="dropdown-item">
          <span class="dropdown-item-label">Something else here</span>
        </a>
      </li>
      <li class="dropdown-divider"></li>
      <li>
        <a href="#" class="dropdown-item">
          <span class="dropdown-item-label">Separated link</span>
        </a>
      </li>
    </ul>
  </div>
  <button type="button" class="btn btn-primary ms-auto">Button</button>
</form>

<!-- Light form group: Range slider + Button -->
<form class="form-group form-group-light">
  <div class="range-slider" data-start-min="450" data-min="0" data-max="1000" data-step="1">
    <div class="range-slider-ui"></div>
    <ngx-slider [(value)]="450" [options]="option"></ngx-slider>
  </div>
  <button type="button" class="btn btn-primary ms-auto">Button</button>
</form>