TWBS Styled Labels in Tables

by kpowz

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>
<h1>TWBS Label in Table Wrapping</h1>
<h2>Natural Wrapping</h2>
<p>TWBS styled labels wrap seemlessly even beautifully within free formed HTML tabels in almost every situation. If, due to some non-standard or very complex table data in neighboring columns, you need to control the width of the label column just set a fluid width!
</p>
<p class="alert alert-success">
    <strong>Play time:</strong> Extend and contract this 'Result' panel or even modify the table data content to see the wrapping behavior in action.
</p>

<h3>Baseline Example</h3>
<table class="table">
    <thead>
        <tr><td>col1</td><td>col2</td><td>col3</td><td>speical bunny</td></tr>
        
    </thead>
    <tbody>
        <tr><td>col1 row1</td><td>col2 row1</td><td>col3 </td>
        <td><span class="label label-default">Default</span></td>
        </tr>
        <tr><td>col1 row2</td><td>col2 row2</td><td>col3 row2</td>
        <td></td>
        </tr>
        <tr><td>col1 row3</td><td>col2 row3</td><td>col3 row3</td>
            <td class="column-label">
                <span class="label label-default">Default</span> <span class="label label-primary">Primary</span>
                <span class="label label-success">Success</span><span class="label label-info">Info</span><span class="label label-danger">Danger Bunnies Attack</span><span class="label label-warning">Warning</span>
            </td>
        </tr>
    </tbody>
</table>

<h3>Varied Content Breaks/Lengths</h3>
<table class="table">
    <thead>
        <tr><td>col1</td><td>col2</td><td>col3</td><td>speical bunny</td></tr>
    </thead>
    <tbody>
        <tr><td>col1 row1</td><td>col2 row1</td><td>col3 row1 ISoLongImARecordHolder</td>
        <td></td>
        </tr>
        <tr><td>col1 row2</td><td>col2 row2</td><td>col3 row2</td>
        <td></td>
   ...

CSS

.width-defined{
    width: 20%
}


td .label::after{
    content:"\000A";
    white-space: pre;
}

JavaScript

$(".dropdown-menu li a").click(function(){
  $(this).parents(".input-group").find('.selection').text($(this).text());
  $(this).parents(".input-group").find('.selection').val($(this).text());

});