dbtek/bootstrap-vertical-tabs

Missing vertical tabs component for bootstrap.

Bootstrap Vertical Tabs

Vertical tabs component for Bootstrap 3.

Install

• Via npm:

 $ npm i -S bootstrap-vertical-tabs

• Via bower (recommended):

 $ bower install bootstrap-vertical-tabs

• Or you can just clone, download from GitHub.

Usage

• Get the package.
• Include css in your html. / Load with webpack or css processors.
• Use it.

Left Tabs

<div class="col-xs-3"> <!-- required for floating -->
    <!-- Nav tabs -->
    <ul class="nav nav-tabs tabs-left">
      <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
      <li><a href="#profile" data-toggle="tab">Profile</a></li>
      <li><a href="#messages" data-toggle="tab">Messages</a></li>
      <li><a href="#settings" data-toggle="tab">Settings</a></li>
    </ul>
</div>

<div class="col-xs-9">
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active" id="home">Home Tab.</div>
      <div class="tab-pane" id="profile">Profile Tab.</div>
      <div class="tab-pane" id="messages">Messages Tab.</div>
      <div class="tab-pane" id="settings">Settings Tab.</div>
    </div>
</div>

Right Tabs

<div class="col-xs-9">
  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home-r">Home Tab.</div>
    <div class="tab-pane" id="profile-r">Profile Tab.</div>
    <div class="tab-pane" id="messages-r">Messages Tab.</div>
    <div class="tab-pane" id="settings-r">Settings Tab.</div>
  </div>
</div>

<div class="col-xs-3"> <!-- required for floating -->
  <!-- Nav tabs -->
  <ul class="nav nav-tabs tabs-right">
    <li class="active"><a href="#home-r" data-toggle="tab">Home</a></li>
    <li><a href="#profile-r" data-toggle="tab">Profile</a></li>
    <li><a href="#messages-r" data-toggle="tab">Messages</a></li>
    <li><a href="#settings-r" data-toggle="tab">Settings</a></li>
  </ul>
</div>

Sideways Tabs 🆕

Add sideways class to tabs.

Example:

  <ul class="nav nav-tabs tabs-left sideways">
    ...

Further, take a look at included demo!

License

MIT

Author

Ismail Demirbilek, @dbtek.

bootstrap-vertical-tabs's Issues

select tab using url

i tried to select tabs via url, but it's not possible
is there any trick to do that ?

thanks

Labels "sideways"

would you be willing to describe a way to make the tab labels rotated 90 degrees both left and right (sort of like section tabs ina 3-ring binder?) ??

Tabs on bottom ?

Hi !

First of all, good work ! It's a very nice library. ;)

Is there a way to have both normal tabs (starting from the top of the ul element) and tabs that starts at the bottom, supposing ul has a sufficient height to contain a blank space between "top" tabs and "bottom" tabs ?

It would be really useful. I'll add more details if I found a way to do this.

Thanks in a advance.

Demo not working

Hi, the demo.html file from the download package isn't working. I suspect the CDN links are not online, maybe all ressources could be included in the package.

Bootstrap 3.3.4 compatibility

I tried using the component in bootstrap 3.3.4. And it was not rendering as seen in demo. Could you please have a look into this. Many thanks.

not responsive one

when i hit less than 768px tabs started getting too smaller and content comes out it's not switchable to small size

Gap between tab-content and nav-tabs

Thanks for creating this package! As far as I can see you are the only one who can offer right aligned nav-tabs with vertical text! It works quite well for me with the only exception that the gap between the tab-content and the nav-tabs is very big. I don't have much space for both and having this gap taking 50px looks bad. The reason is
.vertical-text.tabs-right { right: -50px; }
Do you have an other solution for that that doesn't create this big gab?

Thanks,

Sandro

How do you use it with Angularjs?

It does not work with angular out of the box because angular does hash linking differently.

See here

Feature: TypeScript Definitions

Hello,
I'm using TypeScript with this component and I didn't find any typings on the official repo. Would it be possible to create them?

Thanks in advance,
Pete.

Click on menu not working

I have all of my styles loaded but the click function appears not work. In other words, when I click on the tab on the tab menu, the corresponding tab does not open.

Here is my code

<div class="row row-faq">
    <div class="col-sm-3">
        <!-- required for floating -->
        <!-- Nav tabs -->
        <ul class="nav nav-tabs tabs-left">
            <li class="active" id="tax_id_22">
                <a href="#capacidades">Capacidades</a>
            </li>
            <li id="tax_id_23">
                <a href="#condiciones-de-trabajo">Condiciones de trabajo</a>
            </li>
            <li id="tax_id_24">
                <a href="#ejes-one-it">Blah blah</a>
            </li>
            <li id="tax_id_25">
                <a href="#gestion-de-la-demanda">Gestión de la demanda</a>
            </li>
            <li id="tax_id_26">
                <a href="#gestion-de-proveedores-y-stakeholders">Gestión de Proveedores y Stakeholders</a>
            </li>
            <li id="tax_id_27">
                <a href="#kpis">KPI's</a>
            </li>
            <li id="tax_id_28">
                <a href="#metodologia">Metodología</a>
            </li>
            <li id="tax_id_29">
                <a href="#personas">Personas</a>
            </li>
            <li id="tax_id_30">
                <a href="#plan-y-proceso-de-cambio">Plan y Proceso de Cambio</a>
            </li>
            <li id="tax_id_31">
                <a href="#roles-claves">Roles Claves</a>
            </li>
        </ul>
    </div>
    <div class="col-sm-9">
        <!-- Tab panes -->
        <div class="tab-content">
            <div class="tab-pane active" id="capacidades">
                <h3>¿Cómo vamos generando el capacity de CDN para que pueda estar en la fase de diseño?</h3>
                <h3>¿Cómo vamos a asegurar que el conocimiento quede en Latam?</h3>
                <h3>Es estricto el 1 + 1</h3>
                <h3>Cómo se va a adecuar la Capacidad del Área de Arquitectura</h3>
            </div>
            <div class="tab-pane" id="condiciones-de-trabajo">
                <h3>Compensación de trabajo extra.</h3>
                <h3>Lay Out, mejores espacios para estar con los proveedores</h3>
                <h3>¿Cómo vamos a hacer todo esto con la carga de trabajo que tenemos ?</h3>
            </div>
            <div class="tab-pane" id="ejes-one-it">
                <h3>¿Es obligatorio que CDN forme parte del Diseño?</h3>
                <h3>Continuidad de Negocios no se ve tan presente en las presentaciones, y en el lenguaje</h3>
                <h3>Cuál es el énfasis de One IT entre proyectos y CdN. ?</h3>
            </div>
            <div class="tab-pane" id="gestion-de-la-demanda">
                <h3>¿No tener la demanda impide One IT?</h3>
                <h3>Con la demanda anticipada ¿también se calcularán los puntos de función?</h3>
                <h3>¿Y la demanda no planificada?</h3>
                <h3>¿Qué pasa cuando la estimación de la demanda  queda corta ?</h3>
                <h3>En qué momento se hace el Plan de Negocios y quién valida las iniciativas</h3>
            </div>
            <div class="tab-pane" id="gestion-de-proveedores-y-stakeholders">
                <h3>¿Cómo saldremos a explicar qué es One IT?</h3>
                <h3>¿Cómo vamos a medir el trabajo con los Proveedores?</h3>
                <h3>¿Un proveedor , un sistema?</h3>
                <h3>¿Cuáles son los indicadores con los que se van a medir a los proveedores?</h3>
                <h3>Y si el Paraguas cambia, ¿qué pasa con los compromisos con el proveedor</h3>
                <h3>Proveedores , transición entre diseño y desarrollo</h3>
            </div>
            <div class="tab-pane" id="kpis">
                <h3>¿Cómo se van a mostrar los resultados del OHI a los equipos?</h3>
                <h3>¿Cómo vamos a medir la reducción del TTM?</h3>
            </div>
            <div class="tab-pane" id="metodologia">
                <h3>Cómo vamos a integrar a las OR’s</h3>
                <h3>Los temas pendientes de los proyectos cómo se gestionan (backlog)</h3>
                <h3>En términos prácticos cuáles son los cambios en la toma de control por CDN.</h3>
            </div>
            <div class="tab-pane" id="personas">
                <h3>Personas y Confianza. Nos falta hacer algo con los equipos. Hay mucho ruido con el tema Simplicity. Nuestro capital de trabajo son las personas</h3>
            </div>
            <div class="tab-pane" id="plan-y-proceso-de-cambio">
                <h3>En relación al proceso de Cambio, ¿qué es importante cuidar?</h3>
                <h3>¿Cómo se baja a los Equipos?</h3>
                <h3>Los Cambios de Conductas son muy importantes. ¿Va a haber algún acompañamiento?</h3>
                <h3>¿Qué va a pasar con la gente que no se suba?</h3>
                <h3>Resto de las filiales donde hay equipos de IT</h3>
            </div>
            <div class="tab-pane" id="roles-claves">
                <h3>¿Cuál es el plan de Change Mngmt para el usuario?</h3>
                <h3>¿Tenemos que darle respuesta a todas las demandas del cliente?</h3>
                <h3>¿Qué pasa con el usuario que no empatiza cuando necesitamos más tiempo?</h3>
                <h3>¿JP para un proyecto o varios proyectos? La calidad típicamente está muy influenciada por la dedicación del equipo (si es un equipo dedicado o no)</h3>
                <h3>¿Cómo se va a medir el capacity del arquitecto en función del nro de proyectos?</h3>
                <h3>De qué forma se va a asegurar que el Arquitecto cumpla su rol</h3>
                <h3>¿El Arquitecto es el punto focal?</h3>
            </div>
        </div>
    </div>
</div>

can you update the grunt version to above 1.3.0

The package grunt before 1.3.0 are vulnerable to Arbitrary Code Execution due to the default usage of the function load() instead of its secure replacement safeLoad() of the package js-yaml inside grunt.file.readYAML.

Responsive view needed

Tabs do not stack properly when seen in mobile view.

Update for Bootstrap 3.3 ?

The bower.json file specifies:

"bootstrap": "~3.0.3"

Or in other words, the bootstrap version must be >= 3.0.3 but < 3.1.0 . Does bootstrap-vertical-tabs work with bootstrap 3.3.0? And if so, could we change that to be:

"bootstrap": ">=3.0.3"

This would let us install bootstrap-vertical-tabs alongside the current bootstrap without forking the repo.

Any update for Bootsstrap 4.1.3?

Will there be an update to be usable with bootstrap 4.1.3 (current latest)?

Fade attribute

Hi, nice plugin :) only issue i've found is that when the "fade" attribute is used on a tab for bootstrap to add a fade transition between tab clicks, this does not display the default "active" tab when the page loads (you have to click on another tab, then click back to the default tab).

Redundant links (feature request)

Hi,

First of all, great work, it's what bootstrap was lacking and looks very impressive. However, I tried to implement it in a directory, I'm using each tab as category that displays its respective subcategories and I fill "Home" tab with the same links I use for tabs, as a main directory. The links have the same syntax the tabs have and when I click on them, the respective content is loaded, so far, so good. But "Home" tab keeps highlighted instead of the respective one. Is there a way to make it to highlight the right one?

Thanks in advance.

You are a great hero!

Thank you very much for creating the package! 👍 +100000rep

Is it compatible with Angular 9 or 11?

I am using the library in Angular 8 and I wanted to update my Angular from 8 to 11 due to same i wanted to confirm compatibility of the library wit latest angular.

Could you update 'http://dbtek.github.io/bootstrap-vertical-tabs/demo.html' ?

Hi

It's using 'vertical-text'.
'https://github.com/dbtek/bootstrap-vertical-tabs/blob/master/demo.html' is up to date.

How to center tabs vertically?

register for npm alternative

for npm install