I have a big problem with
Bootstrap
Bootstrap
wrap-content
The extra space is exactly because Bootstrap set the width to the col-*
in %.
e.g
.col-xs-3 {
width: 25%;
}
.col-xs-2 {
width: 16.66666667%;
}
Check this out for more information
By doing this you will achieve what you want:
.wrap-content{
width: auto;
border: 1px solid; /*only to show the boundaries of the elements*/
}
<div class="row">
<div class="col-xs-2 wrap-content">
<button class="my-btn">button</button>
</div>
<div class="col-xs-3 wrap-content">
<button class="my-btn">button</button>
</div>
</div>
But I really recommend you to use a different markup, do not change the grid system of bootstrap eventually this can create inconsistencies.
I'm using col-xs
just to make viable the jsfiddle example, change it to your desired col-
.