The following function will force the table-responsive behavior in Bootstrap 3 when the table's width exceeds the window's, and while the window size is > 768 pixels.

Bootstrap's default of 768 pixels is great in most cases, however I've encountered some requirements where I need to squeeze large amounts of data into one row. This requirement led me to develop this function as a solution.

Force Responsive Tables Function

jQuery Example

The following are some improvements I've made for Twitter Typeahead 0.9.3 with Bootstrap 3.

The typeahead-bootstrap.less file should be imported at the end of the bootstrap.less file.


Update Sept. 18, 2013: I have updated the JavaScript to include the following updates:

  • Adjusted the "sDom" column widths for the record selection/search filter fields
  • The "records per page" will wrap to a new line on extra small devices
  • Fixed an issue where filtered searches were not updating the pagination properly

Thanks to everyone who has provided feedback on these issues!

The following is the JavaScript and CSS I used to create a functional and responsive jQuery DataTable within Bootstrap 3. This code is based on the DataTables Twitter Bootstrap 2 code, except modified to work with Bootstrap 3's CSS and form structures.

JavaScript code: bootstrap-dataTables-paging.js

CSS code: bootstrap-dataTables.css

Note: You may have to edit the path to any image files depending on the location of the CSS file.

The following is a functional example that configures the jQuery Validation Plugin for Bootstrap 3's form controls.

An example of a Bootstrap Login form using validation:

Warning: This no longer works as of Bootstrap version 3.1!

Step 1: Install the "Bootstrap Less Source" package to your web project.

Step 2: Close any running instances of Visual Studio.

Step 3: Install Node.js.

Step 4: Install the RECESS npm package globally via the node.js command prompt:

$ npm install recess -g

Step 5: Start Visual Studio.

Step 6: Re-open your web project, open the Project properties, go to Build Events, and enter in the following into the "Pre-build event command line:"

recess "$(ProjectDir)Content\bootstrap\bootstrap.less" --compress > "$(ProjectDir)Content\bootstrap-compiled.css"

Note: The double quotes around the files was required for the command to succeed.

Step 7: Build your project, and check to see if the bootstrap-compiled.css file was created properly.

Step 8: Make sure you include the bootstrap-compiled.css file into your porject, and set its Build Action to Content.

Step 9: Set the Build Action on the bootstrap less files to None.

Edit: Updated the steps to include opening and closing Visual Studio. This is done to make sure that Visual Studio will see the updated %PATH% environment variable from the Node.js installation.