button over image:
<div class="img-wrapper">
<img class="img-responsive" src="your_image_goes_here">
<div class="img-overlay">
<button class="btn btn-md btn-success">Button</button>
</div>
</div>
.img-wrapper {
position: relative;
}
.img-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.img-overlay:before {
content: ' ';
display: block;
/* adjust 'height' to position overlay content vertically */
height: 70%;
}
.btn-ona {
color: #FFF;
font-size: 180%;
font-family:
#text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
background:#91ca69;
#background-image: linear-gradient(to bottom, #91ca69, #91ca69);background-repeat: repeat-x;
border-color: #006b4e #006b4e rgb(0, 53, 65)
}
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
"btn-group" - the buttons inside will stretch to the same size as the largest button
<button class="btn btn-primary btn-block">Save</button>
.btn-block expands to the parent's width