<p dir="auto">Add sorters to table like .. along with respective js<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/286a9f474308249f091630b35765c35ff65751909eb9ecece98f128a71028e08/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f333830393335342f313835323536302f36313265366235322d373666632d313165332d383837632d3462663531333830343935662e706e67"><img src="https://camo.githubusercontent.com/286a9f474308249f091630b35765c35ff65751909eb9ecece98f128a71028e08/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f333830393335342f313835323536302f36313265366235322d373666632d313165332d383837632d3462663531333830343935662e706e67" alt="image" data-canonical-src="https://f.cloud.github.com/assets/3809354/1852560/612e6b52-76fc-11e3-887c-4bf51380495f.png" style="max-width: 100%;"></a></p>
<p dir="auto">When <a href="https://github.com/twitter/bootstrap/blob/7ec09d0db9b1117d708682a08efaa55045e6926e/less/forms.less#L472">defining the vertical-align</a> for the .add-on styles, Bootstrap defines the same 'scope' twice.</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".form-search .input-append .add-on,
.form-inline .input-prepend .add-on,
.form-search .input-append .add-on,
.form-inline .input-prepend .add-on {
  vertical-align: middle;
}"><pre class="notranslate">.<span class="pl-c1">form-search</span> .<span class="pl-c1">input-append</span> .<span class="pl-c1">add-on</span><span class="pl-kos">,</span>
.<span class="pl-c1">form-inline</span> .<span class="pl-c1">input-prepend</span> .<span class="pl-c1">add-on</span><span class="pl-kos">,</span>
.<span class="pl-c1">form-search</span> .<span class="pl-c1">input-append</span> .<span class="pl-c1">add-on</span><span class="pl-kos">,</span>
.<span class="pl-c1">form-inline</span> .<span class="pl-c1">input-prepend</span> .<span class="pl-c1">add-on</span> {
  <span class="pl-c1">vertical-align</span><span class="pl-kos">:</span> middle;
}</pre></div>
<p dir="auto">I presume this should be</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".form-search .input-prepend .add-on,
.form-inline .input-prepend .add-on,
.form-search .input-append .add-on,
.form-inline .input-append .add-on {
  vertical-align: middle;
}"><pre class="notranslate">.<span class="pl-c1">form-search</span> .<span class="pl-c1">input-prepend</span> .<span class="pl-c1">add-on</span><span class="pl-kos">,</span>
.<span class="pl-c1">form-inline</span> .<span class="pl-c1">input-prepend</span> .<span class="pl-c1">add-on</span><span class="pl-kos">,</span>
.<span class="pl-c1">form-search</span> .<span class="pl-c1">input-append</span> .<span class="pl-c1">add-on</span><span class="pl-kos">,</span>
.<span class="pl-c1">form-inline</span> .<span class="pl-c1">input-append</span> .<span class="pl-c1">add-on</span> {
  <span class="pl-c1">vertical-align</span><span class="pl-kos">:</span> middle;
}</pre></div>