<div class="btn-group">
  <button style="margin-bottom:10px" type="button" class="btn btn-default">Left</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-default">Middle</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-default">Right</button>
</div>
&nbsp;

<div id="accordion2" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2">How to use</a></div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">

<pre>
&lt;div class="btn-group"&gt;
  &lt;button type="button" class="btn btn-default"&gt;Left&lt;/button&gt;
  &lt;button type="button" class="btn btn-default"&gt;Middle&lt;/button&gt;
  &lt;button type="button" class="btn btn-default"&gt;Right&lt;/button&gt;
&lt;/div&gt;
</pre>

</div>
</div>
</div>
</div>

<br>

<h3>Standard button</h3>

<!-- Standard button -->
<button style="margin-bottom:10px" type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button style="margin-bottom:10px" type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button style="margin-bottom:10px" type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button style="margin-bottom:10px" type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button style="margin-bottom:10px" type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button style="margin-bottom:10px" type="button" class="btn btn-danger">Danger</button>


<div id="accordion3" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapse3" data-toggle="collapse" data-parent="#accordion3">How to use</a></div>
<div id="collapse3" class="accordion-body collapse">
<div class="accordion-inner">

<pre>
 Standard button
&lt;button type="button" class="btn btn-default"&gt;Default&lt;/button&gt;

Provides extra visual weight and identifies the primary action in a set of buttons
&lt;button type="button" class="btn btn-primary"&gt;Primary&lt;/button&gt;

Indicates a successful or positive action
&lt;button type="button" class="btn btn-success"&gt;Success&lt;/button&gt;

Contextual button for informational alert messages
&lt;button type="button" class="btn btn-info"&gt;Info&lt;/button&gt;

Indicates caution should be taken with this action
&lt;button type="button" class="btn btn-warning"&gt;Warning&lt;/button&gt;

Indicates a dangerous or potentially negative action
&lt;button type="button" class="btn btn-danger"&gt;Danger&lt;/button&gt;
</pre>

</div>
</div>
</div>
</div>

<br>

<h3>Large button</h3>
<p>
  <button style="margin-bottom:10px" type="button" class="btn btn-default btn-lg">Default button</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-primary btn-lg">Primary button</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-primary btn-lg btn-success">Success button</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-primary btn-lg btn-info">Info button</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-primary btn-lg btn-warning">Warning button</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-primary btn-lg btn-danger">Danger button</button>
</p>
<div id="accordion4" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapse4" data-toggle="collapse" data-parent="#accordion4">How to use</a></div>
<div id="collapse4" class="accordion-body collapse">
<div class="accordion-inner">
<pre>
  &lt;button type="button" class="btn btn-default btn-lg"&gt;Default button&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary btn-lg"&gt;Primary button&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary btn-lg btn-success"&gt;Success button&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary btn-lg btn-info"&gt;Info button&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary btn-lg btn-warning"&gt;Warning button&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary btn-lg btn-danger"&gt;Danger button&lt;/button&gt;
</pre>
</div>
</div>
</div>
</div>

<br>
<h3>Button</h3>
<p>
  <button style="margin-bottom:10px" type="button" class="btn btn-default">Default button</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-primary">Primary button</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-primary btn-success">Success button</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-primary btn-info">Info button</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-primary btn-warning">Warning button</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-primary btn-danger">Danger button</button>
</p>
<div id="accordion5" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapse5" data-toggle="collapse" data-parent="#accordion5">How to use</a></div>
<div id="collapse5" class="accordion-body collapse">
<div class="accordion-inner">

<pre>
  &lt;button type="button" class="btn btn-default"&gt;Default button&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary"&gt;Primary button&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary btn-success"&gt;Success button&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary btn-info"&gt;Info button&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary btn-warning"&gt;Warning button&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary btn-danger"&gt;Danger button&lt;/button&gt;
</pre>

</div>
</div>
</div>
</div>

<br>
<h3>Small button</h3>
<p>
  <button style="margin-bottom:10px" type="button" class="btn btn-default btn-sm">Default button</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-primary btn-sm">Primary button</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-primary btn-sm btn-success">Success button</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-primary btn-sm btn-info">Info button</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-primary btn-sm btn-warning">Warning button</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-primary btn-sm btn-danger">Danger button</button> 
</p>

<div id="accordion6" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapse6" data-toggle="collapse" data-parent="#accordion6">How to use</a></div>
<div id="collapse6" class="accordion-body collapse">
<div class="accordion-inner">

<pre>
  &lt;button type="button" class="btn btn-default btn-sm"&gt;Default button&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary btn-sm"&gt;Primary button&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary btn-sm btn-success"&gt;Success button&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary btn-sm btn-info"&gt;Info button&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary btn-sm btn-warning"&gt;Warning button&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary btn-sm btn-danger"&gt;Danger button&lt;/button&gt; 
</pre>

</div>
</div>
</div>
</div>

<br>
<h3>Mini button</h3>
<p>
  <button style="margin-bottom:10px" type="button" class="btn btn-default btn-xs">Default button</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-primary btn-xs">Primary button</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-primary btn-xs btn-succes">Success button</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-primary btn-xs btn-info">Info button</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-primary btn-xs btn-warning">Warning button</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-primary btn-xs btn-danger">Danger button</button>
</p>

<div id="accordion1" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapse1" data-toggle="collapse" data-parent="#accordion1">How to use</a></div>
<div id="collapse1" class="accordion-body collapse">
<div class="accordion-inner">

<pre>
  &lt;button type="button" class="btn btn-default btn-xs"&gt;Default button&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary btn-xs"&gt;Primary button&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary btn-xs btn-succes"&gt;Success button&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary btn-xs btn-info"&gt;Info button&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary btn-xs btn-warning"&gt;Warning button&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary btn-xs btn-danger"&gt;Danger button&lt;/button&gt;
</pre>

</div>
</div>
</div>
</div>
<br>


<h3>Nested button groups</h3>

<div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

<div id="accordion7" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapse7" data-toggle="collapse" data-parent="#accordion7">How to use</a></div>
<div id="collapse7" class="accordion-body collapse">
<div class="accordion-inner">

<pre>
&lt;div class="btn-group"&gt;
  &lt;button type="button" class="btn btn-default"&gt;1&lt;/button&gt;
  &lt;button type="button" class="btn btn-default"&gt;2&lt;/button&gt;

  &lt;div class="btn-group"&gt;
    &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
      Dropdown
      &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Dropdown link&lt;/a&gt;&lt/li&gt;
      &lt;li&gt;&gt;a href="#"&gt;Dropdown link&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;

</pre>

</div>
</div>
</div>
</div>
<br>
<h3>Single button dropdowns</h3>

 <!-- Single button -->
 <div class="btn-group">
  <button style="margin-bottom:10px" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
 </div>

<div class="btn-group">
<button style="margin-bottom:10px" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

<div class="btn-group">
<button style="margin-bottom:10px" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

<div class="btn-group">
<button style="margin-bottom:10px" type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

<div class="btn-group">
<button style="margin-bottom:10px" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>


<div id="accordion8" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapse8" data-toggle="collapse" data-parent="#accordion8">How to use</a></div>
<div id="collapse8" class="accordion-body collapse">
<div class="accordion-inner">

<pre>
 <!-- Single button -->
 &lt;div class="btn-group"&gt;
  &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
    Action &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;ul class="dropdown-menu"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
    &lt;li class="divider"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
 &lt;/div&gt;
</pre>

</div>
</div>
</div>
</div>
<br>
<h3>Split button dropdowns</h3>

<!-- Split button -->
<div class="btn-group">
  <button style="margin-bottom:10px" type="button" class="btn btn-default">Action</button>
  <button style="margin-bottom:10px" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<div class="btn-group">
<button style="margin-bottom:10px" type="button" class="btn btn-primary">Action</button>
<button style="margin-bottom:10px" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

<div class="btn-group">
<button style="margin-bottom:10px" type="button" class="btn btn-danger">Danger</button>
<button style="margin-bottom:10px" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

<div class="btn-group">
<button style="margin-bottom:10px" type="button" class="btn btn-warning">Warning</button>
<button style="margin-bottom:10px" type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

<div class="btn-group">
<button style="margin-bottom:10px" type="button" class="btn btn-success">Success</button>
<button style="margin-bottom:10px" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>


<div id="accordion9" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapse9" data-toggle="collapse" data-parent="#accordion9">How to use</a></div>
<div id="collapse9" class="accordion-body collapse">
<div class="accordion-inner">

<pre>
<!-- Split button -->
&lt;div class="btn-group"&gt;
  &lt;button type="button" class="btn btn-default"&gt;Action&lt;/button&gt;
  &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
    &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;ul class="dropdown-menu"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
    &lt;li class="divider"&gt;&lt;/li&gt;
    &lt;li&gt;&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</pre>

</div>
</div>
</div>
</div>
<br>
<h3>Dropup buttons</h3>

<div class="btn-group dropup">
<button style="margin-bottom:10px" type="button" class="btn btn-default">Dropup</button>
<button style="margin-bottom:10px" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

<div class="btn-group dropup">
<button style="margin-bottom:10px" type="button" class="btn btn-primary">Right dropup</button>
<button style="margin-bottom:10px" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>


<div id="accordion10" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapse10" data-toggle="collapse" data-parent="#accordion10">How to use</a></div>
<div id="collapse10" class="accordion-body collapse">
<div class="accordion-inner">

<pre>
&lt;div class="btn-group dropup"&gt;
&lt;button type="button" class="btn btn-default"&gt;Dropup&lt;/button&gt;
&lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
&lt;ul class="dropdown-menu"&gt;
&lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
&lt;li class="divider"&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</pre>

</div>
</div>
</div>
</div>
<br>
<h3>Buttons instead of text</h3>

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button style="margin-bottom:10px" class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
      </span>
      <input style="margin-bottom:10px" type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input style="margin-bottom:10px" style="margin-bottom:10px" type="text" class="form-control">
      <span class="input-group-btn">
        <button style="margin-bottom:10px" style="margin-bottom:10px" class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->


<div id="accordion11" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapse11" data-toggle="collapse" data-parent="#accordion11">How to use</a></div>
<div id="collapse11" class="accordion-body collapse">
<div class="accordion-inner">

<pre>
&lt;div class="row"&gt;
  &lt;div class="col-lg-6"&gt;
    &lt;div class="input-group"&gt;
      &lt;span class="input-group-btn"&gt;
        &lt;button class="btn btn-default" type="button"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/span&gt;
      &lt;input type="text" class="form-control"&gt;
    &lt;/div&gt;<!-- /input-group -->
  &lt;/div&gt;<!-- /.col-lg-6 -->
  &lt;div class="col-lg-6"&gt;
    &lt;div class="input-group"&gt;
      &lt;input type="text" class="form-control"&gt;
      &lt;span class="input-group-btn"&gt;
        &lt;button class="btn btn-default" type="button"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/span&gt;
    &lt;/div&gt;<!-- /input-group -->
 &lt;/div&gt;<!-- /.col-lg-6 -->
&lt;/div&gt;<!-- /.row -->
</pre>

</div>
</div>
</div>
</div>
<br>

<h3>Buttons with dropdowns</h3>


<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button style="margin-bottom:10px" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input style="margin-bottom:10px" type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input style="margin-bottom:10px" type="text" class="form-control">
      <div class="input-group-btn">
        <button style="margin-bottom:10px" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu pull-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

<div id="accordion12" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapse12" data-toggle="collapse" data-parent="#accordion12">How to use</a></div>
<div id="collapse12" class="accordion-body collapse">
<div class="accordion-inner">

<pre>
&lt;div class="row"&gt;
  &lt;div class="col-lg-6"&gt;
    &lt;div class="input-group"&gt;
      &lt;div class="input-group-btn"&gt;
        &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;Action &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
        &lt;ul class="dropdown-menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;<!-- /btn-group -->
      &lt;input type="text" class="form-control"&gt;
    &lt;/div&gt;<!-- /input-group -->
  &lt;/div&gt;<!-- /.col-lg-6 -->
  &lt;div class="col-lg-6"&gt;
    &lt;div class="input-group"&gt;
      &lt;input type="text" class="form-control"&gt;
      &lt;div class="input-group-btn"&gt;
        &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;Action &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
        &lt;ul class="dropdown-menu pull-right"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;<!-- /btn-group -->
    &lt;/div&gt;<!-- /input-group -->
  &lt;/div&gt;<!-- /.col-lg-6 -->
&lt;/div&gt;<!-- /.row -->
</pre>

</div>
</div>
</div>
</div>


