.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;
.modal-footer:after {
clear: both;
}
-.modal-footer .btn {
- float: right;
+.modal-footer .btn + .btn {
margin-left: 5px;
margin-bottom: 0;
}
<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 -->
<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>
<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>
</pre>
<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 -->
<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>
<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>
</pre>
.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
}