Show Delete Button On Right Side Of Line Bootstrap, On Hover
I have seen many examples of the delete button appearing above the container. I want to show the Twitter bootstrap line on the right side of the line.
<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>
Many patterns involve using a relative position on the container; however, I dont want to mess with an existing table display on .row, so is it better to do this on popup for twitter bootstrap?
EDIT: I would like to show the button on the right, located in the center. Button with the following markup:
<button ..><i class="icon-remove-sign"></i></button>
Which is only displayed on hover.
+3
source to share
1 answer
Try using 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;
}
+9
source to share