Bootstrap 3: Span elements floating right in list-group-item do not consume vertical space

Question

In a Bootstrap 3 list-group-item, I have an icon, some text, and two icons / buttons that should float right.

I tried this:

<a class="list-group-item" ng-click="handleClick()">     <span class="glyphicon glyphicon-file"></span>      Some text goes here     <button class="btn btn-xs btn-warning pull-right" ng-click="handleButtonClick()"><span class="glyphicon glyphicon-trash"></span></button>     <some:custom:span></some:custom:span>  </a> 

This works great if the result fits in one line:

It also works when the window is so thin that the actual text does not fit in one line:

However, if the windows allows the text to stay in one line, but there is not enough space for the pull-right spans, things get messed up:

What I'd actually want is that the pull-right spans start a new line and align right, and the list-group-item extends vertically for them to fit. How can I achieve that?

Answer 1

To keep the buttons aligned wrap a new element around them and float the wrapping element. Then clear the float on list items with the .clearfix class to fix their height.

<div class="list-group">   <a href="#" class="list-group-item clearfix">     <span class="glyphicon glyphicon-file"></span>     Lorem ipsum dolor sit amet, consectetur adipisicing elit.     <span class="pull-right">       <button class="btn btn-xs btn-info">CCS</button>       <button class="btn btn-xs btn-warning">         <span class="glyphicon glyphicon-trash"></span>       </button>     </span>   </a> </div> 

See live example here: http://jsfiddle.net/cdog/EpG7x/.

However, placing buttons within a link is not valid according to the HTML5 specification from W3C.

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

A similar result can be achieved using panels with tables instead.

<div class="panel panel-default">   <table class="table table-hover">     <tbody>       <tr>         <td>           <span class="glyphicon glyphicon-file"></span>           Lorem ipsum dolor sit amet, consectetur adipisicing elit.         </td>         <td class="text-right text-nowrap">           <button class="btn btn-xs btn-info">CCS</button>           <button class="btn btn-xs btn-warning">             <span class="glyphicon glyphicon-trash"></span>           </button>         </td>       </tr>     </tbody>   </table> </div> 

To prevent content inside a cell from wrapping, you can use the .text-nowrap class (added in Bootstrap v3.2.0).

See live example here: http://jsfiddle.net/cdog/6mFDH/.