update modal footers to use text-align instead of float on buttons for alignment

docs/assets/css/bootstrap.css

@@ -3064,6 +3064,7 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
 .modal-footer {
   padding: 14px 15px 15px;
   margin-bottom: 0;
+  text-align: right;
   background-color: #f5f5f5;
   border-top: 1px solid #ddd;
   -webkit-border-radius: 0 0 6px 6px;
@@ -3081,8 +3082,7 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
 .modal-footer:after {
   clear: both;
 }
-.modal-footer .btn {
-  float: right;
+.modal-footer .btn + .btn {
   margin-left: 5px;
   margin-bottom: 0;
 }

docs/javascript.html

@@ -214,8 +214,8 @@
                 <p>One fine body…</p>
               </div>
               <div class="modal-footer">
-                <a href="#" class="btn btn-primary">Save changes</a>
                 <a href="#" class="btn">Close</a>
+                <a href="#" class="btn btn-primary">Save changes</a>
               </div>
             </div>
           </div> <!-- /well -->
@@ -250,8 +250,8 @@
               <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
             </div>
             <div class="modal-footer">
-              <a href="#" class="btn btn-primary">Save changes</a>
               <a href="#" class="btn" data-dismiss="modal" >Close</a>
+              <a href="#" class="btn btn-primary">Save changes</a>
             </div>
           </div>
           <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
@@ -309,8 +309,8 @@
     &lt;p&gt;One fine body…&lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="modal-footer"&gt;
-    &lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
     &lt;a href="#" class="btn"&gt;Close&lt;/a&gt;
+    &lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>

docs/templates/pages/javascript.mustache

@@ -138,8 +138,8 @@
                 <p>{{_i}}One fine body…{{/i}}</p>
               </div>
               <div class="modal-footer">
-                <a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
                 <a href="#" class="btn">{{_i}}Close{{/i}}</a>
+                <a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
               </div>
             </div>
           </div> <!-- /well -->
@@ -174,8 +174,8 @@
               <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
             </div>
             <div class="modal-footer">
-              <a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
               <a href="#" class="btn" data-dismiss="modal" >{{_i}}Close{{/i}}</a>
+              <a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
             </div>
           </div>
           <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">{{_i}}Launch demo modal{{/i}}</a>
@@ -233,8 +233,8 @@
     &lt;p&gt;{{_i}}One fine body…{{/i}}&lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="modal-footer"&gt;
-    &lt;a href="#" class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/a&gt;
     &lt;a href="#" class="btn"&gt;{{_i}}Close{{/i}}&lt;/a&gt;
+    &lt;a href="#" class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/a&gt;
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>

less/modals.less

@@ -71,13 +71,15 @@
 .modal-footer {
   padding: 14px 15px 15px;
   margin-bottom: 0;
+  text-align: right; // right align buttons
   background-color: #f5f5f5;
   border-top: 1px solid #ddd;
   .border-radius(0 0 6px 6px);
   .box-shadow(inset 0 1px 0 @white);
-  .clearfix();
-  .btn {
-    float: right;
+  .clearfix(); // clear it in case folks use .pull-* classes on buttons
+
+  // Properly space out buttons
+  .btn + .btn {
     margin-left: 5px;
     margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
   }