Quicktabs Bootstrap styles: vertical navigation

Introduction

Next code allow Quicktabs vertical tab style "NavList" looks like Bootstrap Vertical Navigation with minimum of CSS overriding.

Add next code to your template.php file of theme

/**
 * Bootstrap theme for Quicktabs NavList style tabset.
 */
function YOURTHEME_qt_quicktabs_tabset(&$vars) {
  // Return default for non navlist style.
  if ($vars['tabset']['#options']['style'] != 'navlist') {
    return theme_qt_quicktabs_tabset($vars);
  }

  $variables = array(
    'attributes' => array(
      'class' => 'quicktabs-tabs nav nav-pills nav-stacked col-md-3',
    ),
    'items' => array(),
  );
  foreach (element_children($vars['tabset']['tablinks']) as $key) {
    $item = array();
    if (is_array($vars['tabset']['tablinks'][$key])) {
      $tab = $vars['tabset']['tablinks'][$key];

      $item['class'] = array('tab-pane');
      if ($key == $vars['tabset']['#options']['active']) {
        $item['class'][] = 'active';
      }
      $item['data'] = drupal_render($tab);
      $variables['items'][] = $item;
    }
  }
  return theme('item_list', $variables);
}

/**
 * Bootstrap theme for Quicktabs NavList style tabs.
 */
function YOURTHEME_qt_quicktabs(&$vars) {
  // Return default for non navlist style.
  if ($vars['element']['tabs']['#options']['style'] != 'navlist') {
    return theme_qt_quicktabs($vars);
  }

  $element = $vars['element'];

  // Next is hard-coded, so only str_replace:
  $element['container']['#prefix'] = str_replace('quicktabs-style-navlist', 'tab-content col-md-9', $element['container']['#prefix']);

  $output = '<div '. drupal_attributes($element['#options']['attributes']) .'>';
  $output .= drupal_render($element['tabs']);
 
  $output .= drupal_render($element['container']);

  $output .= '</div>';
  return $output;
}

Change YOURTHEME to your theme name.

Add to your CSS file

.quicktabs-style-navlist ul.quicktabs-tabs li {
  display: inherit;
  background: inherit;
  list-style-type: inherit;
  padding: inherit;
  white-space: inherit;
}

This will reset some style of NavList.

Compare nav.styles