Fix order of buttons in .modal-footer to match html markup

[nikku]

Currently buttons in the modal dialog appear in the reverse order than the one specified in the html markup:

<div class="modal-footer">
    <a href="#" class="btn">Button 1</a>
    <a href="#" class="btn">Button2</a>
</div>

Would yield Button2 Button 1 in a modal dialog. This results in the buttons being selected from right to left when tabbing through the document focusable elements.

This can be fixed by giving the .modal-footer a text-align: right CSS property and removing the float: right property from the buttons child elements.

.modal-footer {
    .btn {
        float: right;
    }
}

to

.modal-footer {
    text-align: right;
    .btn {

    }
}

[mdo]

Leaving this as it is—the float right keeps the buttons in an order that is indicative of their importance and priority. There was more discussion in another thread here, too, so please find that one for more conversations around this.