How to set a margin using bootstraps btn-block?

user_3181492 0
Viewed 3289

I wanted to add a margin to my buttons while using bootstrap's btn-block. Unfortunatelly it does not do what I wanted to, because the button doesn't shrink. The button goes out of it's div.

Under this text you can see what I mean. Both buttons contain bootstraps 'btn-block' element. The button above has a margin. 

<div>
    <button type="button" class="btn btn-block btn-default" style="margin:0px 10px 0px 10px;">No</button>
    <button type="button" class="btn btn-block black-button">Yes</button>
</div>

enter image description here

Does somebody know how I can apply a margin to the button at a way that the button stays in the above div?

twitter-bootstrap css
3 Answers

Wrap the button in div tags, and put the style in there.

<div>
    <div style="margin:0px 10px 0px 10px;">
        <button type="button" class="btn btn-block btn-default">No</button>
    </div>
    <button type="button" class="btn btn-block black-button">Yes</button>
</div>

That way, the button will only expand to fill you margin'd div, not the whole page.

user_83554960
Related