• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

Jeff Mould

A Tech Blog by Jeff Mould

  • Home
  • Resources
    • Website Resources
    • How To Use WordPress
  • Jeff Mould
    • About Jeff Mould
    • Jeff Mould Links
    • Disclosure
  • Contact Jeff Mould
You are here: Home / Archives for bootstrap

bootstrap

Bootstrap 4 Mobile Menu – Collapsible Nav

April 3, 2016 by Jeff Mould Leave a Comment

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-5df05d71da603733829224/]You will notice a few things:For the button, we added a "pull-xs-right" … [Read more...] about Bootstrap 4 Mobile Menu – Collapsible Nav

Filed Under: Bootstrap 4 Tagged With: bootstrap, bootstrap 4, bootstrap4, collapsible, dropdown, jeff mould, media query, menu, mobile, nav, navigation, twitter

JQuery Session Timeout

November 8, 2015 by Jeff Mould 2 Comments

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

Filed Under: JavaScript, Twitter Bootstrap Tagged With: bootstrap, javascript, jeff mould, JQuery, session timeout, Twitter Bootstrap

Responsive Multi level Drop Down Menu Bootstrap 3

January 9, 2014 by Jeff Mould 39 Comments

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

Filed Under: Twitter Bootstrap, Web Design, WordPress Tagged With: bootstrap, dropdown, jeff mould, menu bar, menubar, responsive, Twitter Bootstrap, web site design, WordPress

Primary Sidebar

Connect With Me

  • Facebook
  • GitHub
  • Google+
  • Instagram
  • LinkedIn
  • Pinterest
  • Tumblr
  • Twitter
  • YouTube

Top Posts & Pages

  • The mixed up pricing of SiriusXM and SiriusXM Discounts
  • Bootstrap 4 Mobile Menu - Collapsible Nav
  • Exclude Subdirectory from Routing in Laravel 5
  • Laravel 5.4 Redirect after Password Reset Email Sent
  • Laravel 5.2 - Forcing HTTPS Routes when using SSL

Copyright © 2016 - Jeff Mould - All Rights Reserved