Bootstrap pull right buttons in list

Question

I have the following code:

<div class="container"> <ul class="list-group"> <li class="list-group-item"> userA <span class="label label-default">admin</span> <span class="pull-right button-group"> <a href="/admin/userA" class="btn btn-primary"><span class="glyphicon glyphicon-edit"></span> Edit</a> <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Delete</button> </span> </li> </ul> </div> 

I would like to make the box larger so that the buttons are inside, while keeping the text / label vertically in the center. Alternatively, moving the buttons up to be inside the box will work. I am using bootstrap 3.2. Any advice is appreciated. Thanks.

Answer 1

The fix is ​​simple, just add clearfix to the element containing the floating elements:

  <li class="list-group-item clearfix"> 

DEMO: http://jsbin.com/yazoj/1/edit

AND

 .list-group {line-height:30px} 

Answer 2

Here is jsfiddle

the code:

 <div class="container"> <ul class="list-group"> <li class="list-group-item clearfix"> <!-- wrapped the text and label in a span --> <span style="position:absolute; top:30%;">userA <span class="label label-default">admin</span></span> <span class="pull-right button-group"> <a href="/admin/userA" class="btn btn-primary"><span class="glyphicon glyphicon-edit"></span> Edit</a> <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Delete</button> </span> </li> </ul> </div> 

You can move the inline style to a css file.

Answer 3

I tried my code .. Yes, there is a problem. You can give an additional class of the first element li, and then specify an addition for this.

For example, I gave an extra for the first li "custom-class"

 <div class="container"> <ul class="list-group"> <li class="list-group-item custom-class"> userA <span class="label label-default">admin</span> <span class="pull-right button-group"> <a href="/admin/userA" class="btn btn-primary"><span class="glyphicon glyphicon-edit"></span> Edit</a> <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Delete</button> </span> </li> </ul> </div> 

Now you can define the bottom of the pad for the custom class. You can increase the indentation as you wish.

  .custom-class{ padding-bottom: 30px } 

Thanks:)