CODEWITHSUNDEEP
csstwitter-bootstrap-3
Peter
Peter

Reputation: 243

Twitter Bootstrap (v3) multi-line labels

Please see the jsfiddle here: http://jsfiddle.net/aRJr2/

As you can see in the top right corner, the left part of the next label is in the first line but the rest of it is in the second line.

What changes do I need to do in order to make it appear in the same line?

The code: 

<div class="panel panel-default">
<div class="panel-heading">
    <h3 class="panel-title">Members</h3>
</div>
<div class="panel-body">
        <div class="label label-info">
            <span>James</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/186"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Robert</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/187"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Jessica</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/188"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Mark</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/189"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Alexandra</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/190"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Kathleen</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/191"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Lorraine</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/192"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Lucy</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/194"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Christina</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/195"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Bryan</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/196"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Melissa</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/197"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Patricia</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/198"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <div class="label label-info">
            <span>Andrew</span>
            <a class="action_modal" style="color: #FFF" href="http://bower.dev/delete_member/exp/199"><i class="glyphicon glyphicon-remove-sign"></i></a>
        </div>
        <a href="http://bower.dev/add_member" class="label label-success getviaajax"><i class="glyphicon glyphicon-plus-sign"></i> Add new</a>
</div>

Upvotes: 8

Views: 10909

Answers (3)

ryush00
ryush00

Reputation: 482

I modified thouliha's code. This will work just like expected and clean.

.label {
    display: inline-table;
    line-height: initial;
    margin-bottom: 2px;
}

Upvotes: 0

dessalines
dessalines

Reputation: 7372

I was able to do this using:

.label {
  display: inline-table;
  line-height: initial;
}

Upvotes: 1

GL.awog
GL.awog

Reputation: 1322

Without having to rearrange the HTML elements it's possible to change a display property for the labels, adjusting the padding and line-height appropriately: 

.panel-body .label {
  display:inline-block;
  padding-top:0;
  padding-bottom:0;
  line-height:1.5em;
}

Upvotes: 8

Related Questions