Search

<form class="search" action="#" role="search">
  <div class="input-group shadow-sm">
    <span class="input-group-text bg-body border-end-0">
      <i class="bi bi-search text-body-secondary"></i>
    </span>
    <input type="search" name="q" class="form-control border-start-0 ps-0" placeholder="Search the docs…" aria-label="Search">
    <button class="btn btn-primary" type="submit">Search</button>
  </div>
</form>

placeholder: Search the docs…

<form class="search" action="#" role="search">
  <div class="input-group input-group-lg shadow-sm">
    <span class="input-group-text bg-body border-end-0">
      <i class="bi bi-search text-body-secondary"></i>
    </span>
    <input type="search" name="q" class="form-control border-start-0 ps-0 form-control-lg" placeholder="Search the newsroom…" aria-label="Search">
    <button class="btn btn-primary btn-lg" type="submit">Search</button>
  </div>
</form>

placeholder: Search the newsroom…
button: Search
size: lg

<form class="search search--floating mk-rounded-lg mk-shadow bg-body p-1 border" action="#" role="search">
  <div class="input-group">
    <span class="input-group-text bg-transparent border-0 pe-1">
      <i class="bi bi-search text-body-secondary"></i>
    </span>
    <input type="search" name="q" class="form-control border-0 px-1 shadow-none" placeholder="you@example.com" aria-label="Search">
    <span class="input-group-text bg-transparent border-0 py-0 pe-1 ps-0">
      <button class="btn btn-primary btn-sm" type="submit">Subscribe</button>
    </span>
  </div>
</form>

placeholder: you@example.com
button: Subscribe
floating: true