bootstrap-select in nav

by David Underwood

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css">
<script src="https://desktop.qa.aeshield.com/bootstrap-select.js"></script>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
    </div>

   <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
    <select class="selectpicker" data-live-search="true" data-showSubtext="false">
            <optgroup label="Assembly Group">
              <option data-content="<span class='label label-success'>AG</span><span>ZZZ</span>">option1</option>
              <option data-subtext="Assembly Group">option2</option>
              <option data-subtext="Assembly Group">option3</option>
              <option data-subtext="Assembly Group">option4</option>
            </optgroup>
            <optgroup label="filter2">
              <option>option1</option>
              <option>option2</option>
              <option>option3</option>
              <option>option4</option>
            </optgroup>
            <optgroup label="filter3">
              <option>option1</option>
              <option>option2</option>
              <option>option3</option>
              <option>option4</option>
            </optgroup>
          </select>
      </div>
      <button type="submit" class="btn btn-default">Search</button>
    </form>

  </div><!-- .container-fluid -->
</nav>

CSS

.bootstrap-select.btn-group:not(.input-group-btn), .bootstrap-select.btn-group[class*="span"] {
    margin: 0 !important;
}

JavaScript

$('select').selectpicker();