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
The typeahead-bootstrap.less file should be imported at the end of the bootstrap.less file.
- 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!
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.
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.
$ 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.