I'm the first tab
I'm the second tab
I'm a disabled tab!
Tabs use the tabs styling by default. Just add
pills property to <b-tabs> for the
pill style variant.
To proportionately fill all available space with your tab
controls, set the fill prop. Notice that all
horizontal space is occupied, but not every control has the same
width.
I'm the first tab
I'm the second tab
I'm the tab with the very, very long title
I'm a disabled tab!
For equal-width controls, use the justified prop
instead. All horizontal space will be occupied by the controls,
but unlike using fill above, every control will be
the same width.
I'm the first tab
I'm the second tab
I'm the tab with the very, very long title
I'm a disabled tab!
Have the tab controls placed on the lefthand side by setting the
vertical prop to true. Vertical tabs
work with or without card mode enabled.
If you want to add custom content to tab title, like HTML code,
icons, or another non-interactive Vue component, this possible by
using title slot of <b-tab>
Tab Contents 1
Tab Contents 2
Tabs support integrating with Bootstrap cards. Just add the card
property to <b-tabs> and place it inside a
<b-card> component. Note that you should add
the no-body prop on the
<b-card> component in order to properly
decorate the card header and remove the extra padding introduced
by card-body.
no-body prop set