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>
    <input type="hidden" class="form-control range-slider-value-min">
  </div>
  <button type="button" class="btn btn-translucent-primary ms-auto">Button</button>
</form>

// Form group: Text input + Button
form.form-group
  input(type="text", placeholder="Text input").form-control
  button(type="button").btn.btn-translucent-primary
    | Button

// Form group: Select + Button
form.form-group
  select.form-select
    option Select box
    option Option item 1
    option Option item 2
    option Option item 3
  button(type="button").btn.btn-translucent-primary
    | Button

// Form group: Input group + Button
form.form-group
  .input-group
    span.input-group-text.text-muted
      i.fi-camera-plus
    input(type="text" placeholder="Input group").form-control
  button(type="button").btn.btn-translucent-primary
    | Button

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

// Form group: Range slider + Button
form.form-group
  .range-slider(data-start-min="450", data-min="0", data-max="1000", data-step="1")
    .range-slider-ui
    input(type="hidden").form-control.range-slider-value-min
  button(type="button").btn.btn-translucent-primary.ms-auto
    | Button

<!-- 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>
          <input type="hidden" class="form-control range-slider-value-min">
        </div>
      </div>
      <button type="button" class="btn btn-primary w-100 w-md-auto">Search</button>
    </div>
  </div>
</form>

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

<!-- 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>
          <input type="hidden" class="form-control range-slider-value-min">
        </div>
      </div>
      <button type="button" class="btn btn-primary rounded-pill w-100 w-md-auto">Search</button>
    </div>
  </div>
</form>

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

<!-- 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>

// Large form group
form.form-group
  .input-group.input-group-lg
    span.input-group-text.text-muted
      i.fi-search
    input(type="text", placeholder="Search query...").form-control
  button(type="button").btn.btn-translucent-primary.btn-lg
    | Search

// Normal form group
form.form-group
  .input-group
    span.input-group-text.text-muted
      i.fi-search
    input(type="text", placeholder="Search query...").form-control
  button(type="button").btn.btn-translucent-primary
    | Search

// Small form group
form.form-group
  .input-group.input-group-sm
    span.input-group-text.text-muted
      i.fi-search
    input(type="text", placeholder="Search query...").form-control
  button(type="button").btn.btn-translucent-primary.btn-sm
    | Search

<!-- 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>
    <input type="hidden" class="form-control range-slider-value-min">
  </div>
  <button type="button" class="btn btn-primary ms-auto">Button</button>
</form>

// Light form group: Text input + Button
form.form-group.form-group-light
  input(type="text", placeholder="Text input").form-control
  button(type="button").btn.btn-primary
    | Button

// Light form group: Select + Button
form.form-group.form-group-light
  select.form-select
    option Select box
    option Option item 1
    option Option item 2
    option Option item 3
  button(type="button").btn.btn-primary
    | Button

// Light form group: Input group + Button
form.form-group.form-group-light
  .input-group
    span.input-group-text 
      i.fi-camera-plus
    input(type="text" placeholder="Input group").form-control
  button(type="button").btn.btn-primary
    | Button

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

// Light form group: Range slider + Button
form.form-group.form-group-light
  .range-slider(data-start-min="450", data-min="0", data-max="1000", data-step="1")
    .range-slider-ui
    input(type="hidden").form-control.range-slider-value-min
  button(type="button").btn.btn-primary.ms-auto
    | Button