# Tabs > Create tabbable panes of local content. ## Basic usage ```html
I'm the first fading tab
I'm the second tab content
Disabled tab! ``` ## Cards Integration Tabs support integrating with bootstrap cards. Just add the `card` property to ``. Note that you should add `no-body` prop on `` element in order to propertly decorate the card header and remove the extra padding introduced by `card-body`. ```html Tab Contents Tab Contents 2 ``` ## Pills variant Tabs use the `tabs` styling by default. Just add `pills` property to `` for the pill style variant. ```html Tab Contents Tab Contents 2 ``` ## Fade animation Fade is enabled by default when changing tabs. It can disabled with `no-fade` property. ## Add Tabs without content If you want to add extra tabs that do not have any content, you can put them in `tabs` slot: ```html ``` ## Apply custom classes to the generated nav-tabs or pills The tab selectors are based on Boostrap V4's `nav` markup ( i.e. `ul.nav > li.nav-item > a.nav-link`). In some situations, you may want to add classes to the `
  • ` (nav-item) and/or the `` (nav-link) on a per tab basis. To do so, simply supply the classname to the `title-item-class` prop (for the `
  • ` element) or `title-link-class` prop (for the `` element). Value's can be passed as a string or array of strings. Note: THe `ative` class is automatically applied to the `` element. You may need to accomodate your custom classes for this. ```html ``` ## Advanced Examples ### External controls ```html ``` ### Dynamic Tabs ```html ``` ## Component Reference