This weekend I started experimenting with Bootstrap 4 which is in its Alpha 2 release. While I like what I saw, one lagging feature stuck out to me. Although it works to some extent there are few key CSS features missing to make the Bootstrap 4 navigation collapse like it did in Bootstrap 3. If you simply use the examples provided in the documentation, you will notice that the menu is far from responsive when collapsed on mobile devices.Luckily there are a few simple fixes we can do to make things right so that our Bootstrap 4 mobile menu (collapsible navigation) is the same functionality as the navbar collapse in Bootstrap 3. For this tutorial I am going to use the Dashboard example from the documentation. You can find the Dashboard example here: http://v4-alpha.getbootstrap.com/examples/dashboard/Bootstrap 4 Mobile MenuFirst things first, let's make some small edits to the menu:[crayon-5cbc626aedc2b091042599/]You will notice a few things:For the button, we added a "pull-xs-right" … [Read more...] about Bootstrap 4 Mobile Menu – Collapsible Nav
bootstrap
JQuery Session Timeout
Most web applications require a user to login and use sessions to track the user's activity on the site. For security purposes, it can also be desirable to, after a certain period of time of no activity, to automatically log the user out. There is an easy to use plugin for just this purpose that works nicely with the Twitter Bootstrap framework. The Bootstrap Session Timeout plugin by Orangehill Development, is a great and easy to use plugin with many configuration options. You can find the plugin here https://github.com/orangehill/bootstrap-session-timeout There is, however, one small bug that I found. When the modal pops up to alert the user their session is about to expire, any movement of the mouse will automatically close the modal. This can be very undesirable as a mouse could easily be knocked or the user could be doing something completely unrelated. To resolve this issue we must edit the bootstrap-session-timeout.js file (unfortunately you will have re-minify if you wish … [Read more...] about JQuery Session Timeout
Responsive Multi level Drop Down Menu Bootstrap 3
UPDATE - February 10, 2014 There were a couple errors in the instructions and code below. I have corrected these errors in a new blog post. Multi Level Drop Down Menu Bootstrap 3 Drop Down Menu Design When Twitter Bootstrap 3 was released one element that was missing was support for multi-level dropdown menus. While the Bootstrap developers argued that the need for multi-level was minimal at best, the fact remained that removing them from the core product left many web developers out in the cold. While there is many articles providing workarounds through CSS to achieve desired results, one critical piece that is missing from the puzzle is responsive support. While the workarounds work great for desktops, laptops, and even some tablets, they fail to work for all mobile devices. After endless Google searches and hacking around in the Bootstrap 3.0 JavaScript file I was able to create a workaround that works that is responsive and works on all devices. Since I needed this … [Read more...] about Responsive Multi level Drop Down Menu Bootstrap 3