Bootstrap Radio Buttons as DataTable Filters

bootstrap image

This is the first of a series of tutorials on using Bootstrap radio buttons in the wild to filter real datasets in concert with other commonly-used UI components like DataTables and jQuery UI.

Part 1: Converting a classic input radio to the Bootstrap label

Photo by Dawid Zawiła on UnsplashFiltering tables of data is the central task of many a business web-app. DataTables are searchable by default, but records often beg to be batch-filtered into several status modes like: current | archived | all.

Bootstrap Radio Buttons provide a nice, clean look, but many developers shy away from them due to unfamiliarity with their CSS label-based class manipulation and/or compatibility issues with other component libraries like jQuery UI.

Bootstrap checkbox and radio btn-groups work ‘out of the box’, but the simple activation of a default button decouples active button highlighting from the input tag checked state. In this case, the active label class must be handled manually, but the docs don’t explain how, so a stack-overflow of posts for dev-help ensues. (more…)

Semantic HTML

Software screen capture

The above diagram shows two ways to place a grid on an HTML page. The <TABLE> version on the left is the old school way of managing layout. The web was positively littered with such code before widespread use of CSS (and browser manufacturer adoption of standards), which freed designers from use of tables or framesets for managing layout. The <DIV> version on the right is a sample of modern accepted practice, specifically in this example, using Bootstrap 3 styling.

You will find no one suggesting using tables for HTML layout (except when it comes to formatting HTML email. It’s ugly out there) today. Many a rant exists on the web exhorting all to separate presentation from structure, yet aren’t the two examples shockingly similar? Can the <DIV> version be that much better, when it looks like a one-for-one mapping of one element to another?

To answer the questions asked in the image, yes, the HTML on the left is bad layout and the sample on the right is OK. The reasons behind the answers come with an understanding of semantic HTML.


Bootstrap ALL the Things?

Cartoon image of Bootstrap all the things.

Bootstrap is a CSS framework that serves as a starting point for your website or web-application’s user interface styling. It has become very popular now, being the #1 trending repository on as of August 20, 2013. It is definitely a great asset, but should we be turning to it so quickly?