From 8d49eb8bd2da865dbe68242be3eaa1adec5da056 Mon Sep 17 00:00:00 2001
From: Allan Jardine <allan.jardine@sprymedia.co.uk>
Date: Tue, 4 Nov 2014 14:17:38 +0000
Subject: [PATCH] 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
---
 .../bootstrap/3/dataTables.bootstrap.css      | 26 ++++++++++++++++---
 .../bootstrap/3/dataTables.bootstrap.js       |  6 ++---
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/integration/bootstrap/3/dataTables.bootstrap.css b/integration/bootstrap/3/dataTables.bootstrap.css
index 054c33a..15e1938 100644
--- a/integration/bootstrap/3/dataTables.bootstrap.css
+++ b/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;
diff --git a/integration/bootstrap/3/dataTables.bootstrap.js b/integration/bootstrap/3/dataTables.bootstrap.js
index 2b77e7b..6ecfd70 100644
--- a/integration/bootstrap/3/dataTables.bootstrap.js
+++ b/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'
 } );