Show Delete Button On Right Side Of Bootstrap Row, On Hover

Question

I saw a lot of examples of popping up a delete button over a container. I want to show over a Twitter Bootstrap row, on the right side of the row.

<div class="row">
   <div class="col-md-4">
       Content
   </div>
   <div class="col-md-4">
       Content
   </div>
   <div class="col-md-4">
       Content
   </div>
</div>

A lot of the samples involved using a relative position on the container; however, I don't want to mess with the existing table display on the .row, so is there a better way of doing that on popup for a twitter bootstrap row?

EDIT: I'd like to show a button on the right, centered in the row. A button with the following markup:

<button ..><i class="icon-remove-sign"></i></button>

Which shows only on hover.

Answer 1

Try the following code:

HTML:

<div class="row">
   <div class="col-md-4">
       Content
   </div>
   <div class="col-md-4">
       Content
   </div>
   <div class="col-md-4">
       Content
   </div>
   <div class="hover-btn">
     <button type="button" class="close" data-dismiss="alert">
        <span aria-hidden="true">×</span>
        <span class="sr-only">Close</span>
     </button>
  </div>
</div>

CSS:

.row {
    position: relative;
  }

  .hover-btn {
     position: absolute;
     right: 15px;
     display: none;
  }

  .row:hover .hover-btn {
     display: block;
  }

Working Example