Adding Bootstrap Badges to Drupal Views Lists

Adding Bootstrap Badges to Drupal Views Lists

There is a neat little trick in Views to create lists with counts. For example, if I created a list of categories for blog posts, I can have Views add the number of posts in each category with a little extra configuration.


The trick for adding the counts is in the views display configuration to setup a contextual filter with the option Display a summary. This option provides the additional setting, Display record count with link, that turns on the counts.

Configuration for views counts


The challenge is I want to output the counts as Bootstrap badges in an HTML list to take full advantage of Bootstrap's standard components. So I need to wrap the count markup in with

<span class="badge">12</span>


At first glance the answer would seem to be to override views-view-list.tpl.php in your theme. That doesn't work. When you select the Display a summary setting in views, it redirects the theming to a different template, views-view-summary.tpl.php. (This one stumped me for a while, so I hope this saves you the time I spent figuring out why my views-view-list.tpl.php wasn't firing.)

To override the list view, you need to create a hook-views-view-summary.tpl.php template using the code:


If you are doing the override in your theme, name the template file, mytheme-views-view-summary.tpl.php. If in a module, mymodule-views-view-summary.tpl.phpviews-view-summary.tpl.php.

This template will work using Views' built preprocessing function, template_preprocess_views_view_summary. However, you will likely want to implement your own preprocessing function. Notice that in addition to the <span class="badge"> the above template allows for additional classes. You might want to add a pull-right for example to take advantage of Bootstrap's built in float classes.

An example custom preprocess function would look like this: (replace "hook" with your theme or module name)

function hook_preprocess_views_view_summary(&$vars) {
  // leverage views built in logic for vars preprocessing

  // add support for badge classes
  $vars['row_badge_classes'] = array();
  // set default badge classes
  $row_classes_default = 'pull-right';

  foreach ($vars['rows'] as $id => $row) {
    $vars['row_badge_classes'][$id] = $row_badge_classes_default;


If you are implementing your override in a theme, your done. If in a module, you need one extra piece. You need to add your override to the theme registry. Normally I would do this using hook_theme:

function mymodule_theme() {
  $themes = array();

  $themes['views_view_summary'] = array(
    'arguments' => array(
      'view' => NULL,
      'options' => NULL,
      'rows' => NULL,
      'title' => NULL,
      'context' => NULL,
    'template' => 'mymodule-views-view-summary',
    'original hook' => 'views_view_summary',
    'path' => drupal_get_path('module', 'mymodule') . '/theme/list',
    'preprocess functions' => array(
  return $themes;


I actually could not get this to work. It would call my preprocess function, but not override the template with my template. So I took an alternative approach of using hook_theme_registry_alter:

function mymodule_theme_registry_alter(&$theme_registry) {
  $theme = &$theme_registry['views_view_summary'];
  $theme['path'] = drupal_get_path('module', 'mymodule') . '/theme/list';
  $theme['template'] = 'mymodule-views-view-summary';


That worked and it is less code. Now all the list views should be outputting badgeified lists.

views lists with badges


Related Posts

Converting Views List Into Responsive Stacked Columns

Mark Carver
Read more

Drupal Tutorial: Use Views to Create an Alphabetical List of Taxonomy Terms

Kristin Brinner
Read more

Sortable User Flag Stats in Views Using the Profile Module

Tom McCracken
Read more

Using Views Responsive Grid in Drupal 7

Ian Whitcomb
Read more

Link Taxonomy Terms to Custom Views in Drupal

Dustin Currie
Read more

Drupal Theming - A Basic Primer on Template.php and Template Files

Kristin Brinner
Read more