Servage Magazine

Adding dates via input elements in forms can be cumbersome unless a date picker is used. There are a few plugins available for jQuery and Bootstrap which make this process simple - yet implementing a powerful and advanced tool. The tool described below is called "Date Range Picker for Bootstrap" and is ready to go with a very simple implementation. Getting started The first step is to include the relevant resources into your site. The dependencies are Bootstrap (and jQuery), so you  need to get them first. Thereafter add the resources for the data range picker plugin. <!-- Include dependencies --> <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/2.9.0/moment.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3.3.2/css/bootstrap.css" /> <!-- Include date range picker ...

Bootstrap 4 has been in public alpha since August 2015. Some deem it stable enough while other developers are waiting for a more stable release. Whether or not you are moving to the next version just yet, it is good to be aware of the upcoming changes. In fact, Bootstrap 4 has quite a lot of new and interesting updates to offer! Introducing Cards Cards are a new type of container in Bootstrap 4. They are meant to replace panels, wells and thumbnails. That’s a lot for one component to replace, but cards are designed to be a combination of all these three components. A card has a panel-like heading and a content ...

You probably know the Bootstrap framework which helps building great front end design with its styling and script elements. Currently version 3 is the recommended stable version, but soon the next release - version 4 - will be available. This update is welcomed and there is no need to worry because existing Bootstrap-powered code will continue to work with the current library, and furthermore the Bootstrap developers have already announced a more graceful update process than moving from version 2 to 3 was. This time the old version will still be supported for a while (including critical updates and bug fixes) so developers can rely on existing code. Bootstrap 4 comes with a ...

Popovers are a neat visual element for web apps, which enables you to highlight certain functionality or provide on-screen instructions like tutorials. There are a wide range of usefull popover applications which may enhance your site. Consider the following variations: Help / Question icon located next to form fields or buttons. On click or hover, the icon triggers a popover which explains the purpose of the field or button in more detail. Upon detecting an invalid field after a form submission , a popover is used to explain the validation error for the specific field. On pageload a popover is used to highlight a specific feature by opening autotmatically, thus directing the user's attention ...

Dropdown menus are known from many websites that make complex menu structures and page hierarchies available to users via one or multiple levels of dropdowns. They are furthermore also often used in a convenient way to hide extended or advanced functionality, yet making it available quickly upon request. In menus the dropdowns are usually built into the overall design of the header, or other part of the page the menu is embedded into. However, with many websites moving towards a more app-like interface, and with the rise of Bootstrap, the typical button-style triggers for dropdown menus have become widely used. Button-triggered dropdown menus are a great way to make functionality available without cluttering ...