Bootstrap 3: Improve integration options for DataTables and Bootstrap 3

* Use `col-sm-*` sizes for the table control components
* Remove floats from the control components - use text-align
* On small screen sizes align table control components center
* Add width to the search input again - needed to ensure alignment

integration/bootstrap/3/dataTables.bootstrap.css

@@ -1,29 +1,39 @@
 div.dataTables_length label {
 	font-weight: normal;
-	float: left;
 	text-align: left;
+	white-space: nowrap;
 }
 
 div.dataTables_length select {
 	width: 75px;
+	display: inline-block;
+}
+
+div.dataTables_filter {
+	text-align: right;
 }
 
 div.dataTables_filter label {
 	font-weight: normal;
-	float: right;
+	white-space: nowrap;
+	text-align: left;
 }
 
 div.dataTables_filter input {
 	margin-left: 0.5em;
+	width: 16em;
+	display: inline-block;
 }
 
 div.dataTables_info {
 	padding-top: 8px;
+	white-space: nowrap;
 }
 
 div.dataTables_paginate {
-	float: right;
 	margin: 0;
+	white-space: nowrap;
+	text-align: right;
 }
 
 div.dataTables_paginate ul.pagination {
@@ -31,6 +41,16 @@ div.dataTables_paginate ul.pagination {
 	white-space: nowrap;
 }
 
+@media screen and (max-width: 767px) {
+	div.dataTables_length,
+	div.dataTables_filter,
+	div.dataTables_info,
+	div.dataTables_paginate {
+		text-align: center;
+	}
+}
+
+
 table.dataTable td,
 table.dataTable th {
 	-webkit-box-sizing: content-box;

integration/bootstrap/3/dataTables.bootstrap.js

@@ -19,9 +19,9 @@ var factory = function( $, DataTable ) {
 /* Set the defaults for DataTables initialisation */
 $.extend( true, DataTable.defaults, {
 	dom:
-		"<'row'<'col-xs-6'l><'col-xs-6'f>r>" +
-		"<'row'<'col-xs-12't>>" +
-		"<'row'<'col-xs-6'i><'col-xs-6'p>>",
+		"<'row'<'col-sm-6'l><'col-sm-6'f>r>" +
+		"<'row'<'col-sm-12't>>" +
+		"<'row'<'col-sm-6'i><'col-sm-6'p>>",
 	renderer: 'bootstrap'
 } );