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.