Bootstrap pull-right causing element overlap

Question

I am trying to get a single button positioned above a list, but with the button to the right.

When I add the pull-right class to the button (or a containing div) the

Answer 1

You should add the pull-right class to the button element instead and then add a clearfix to the parent element. In doing so, the div won't collapse upon itself.

Updated Example

<div class="clearfix">
    <button type="button" class="btn btn-default pull-right">Add</button>
</div>

---

Alternatively, since the button is an inline-block level element, you could avoid floating it and use text-align:right instead. Just add the class text-right to the parent. You no longer need the clearfix because the button element isn't being removed from the document flow.

Example Here

<div class="text-right">
    <button type="button" class="btn btn-default">Add</button>
</div>