CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
clamp
clamp

Reputation: 34016

Bootstrap 3: Add Buttongroup to navbar

In twitter bootstrap 3 i would like to add a buttongroup in the navbar, but it seems to break the navbar since it creates linebreaks:

<li>
  <form class="navbar-form form-inline" >
    <div class="input-group">
      <input id="filter" class="form-control input-sm" type="text" placeholder="Filter" />
      <span class="input-group-btn">
        <button id="clearfilter" type="button" class="btn btn-sm btn-default">Clear</button>
      </span>
   </div>
</form>
</li>

how can i avoid the linebreak in the navbar?

Upvotes: 2

Views: 5437

Answers (1)

VS Atreus
VS Atreus

Reputation: 26

Maybe you don't need the to put the form inside a list item:

        <!-- Start Of Example -->
        <form class="navbar-form form-inline">
            <div class="input-group">
                <input id="filter" class="form-control input-sm" type="text" placeholder="Filter" />
                <span class="input-group-btn">
                    <button id="clearfilter" type="button" class="btn btn-sm btn-default">Clear</button>
                </span>
             </div>
        </form>
        <!-- End Of Example -->

JS Fiddle Example

Update: another method (you could also use navbar-right to align the ul block to the right)

<!-- Start Of Example -->
<ul class="nav navbar-nav">
   <li>
      <div class="navbar-form form-inline" role="form">
         <div class="form-group">
            <input id="filter" class="form-control input-sm" type="text" placeholder="Filter" />
         </div>
         <div class="form-group">
            <button id="clearfilter" type="button" class="btn btn-sm btn-default">Clear</button>
         </div>
      </div>
   </li>
   <li> 
   <li><a href="#">Action</a></li>
   </li>
</ul>
<!-- End Of Example -->

Example 2

Upvotes: 1

Related Questions