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. An exception to this being dynamically created labels where the produced markup is unpredictably formatted.
</p>
<p>Unpredictably formatted HTML means you can end up with spacing inconistencies like : 
    <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>
</p>
<p>One solution to this that will result in a consistent outcome is inserting a space after each label and then controlling the white-space behavior.
</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 predictable 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...

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());

});