# Vue Bootstrap Tabs Component > Learn how to use CoreUI’s Vue Tabs component with Bootstrap styles for flexible, framework-consistent UI. ## Example The basic Vue tabs example uses the `variant="tabs"` props to generate a tabbed interface. ```html ``` ## Available styles Change the style of ``'s component with modifiers and utilities. Mix and match as needed, or build your own. ### Unstyled If you don’t provide the `variant` prop, the component will default to a basic style. ```html ``` ### Pills Take that same code, but use `variant="pills"` instead: ```html ``` ### Underline Take that same code, but use `variant="underline"` instead: ```html ``` ### Underline border Take that same code, but use `variant="underline-border"` instead: ```html ``` ### Enclosed Use the `variant="enclosed"` class to give your tab items a subtle border and rounded styling. ```html ``` ### Enclosed pills Use the `variant="enclosed-pills"` to achieve a pill-style appearance for each tab item, using pill-shaped borders and smoother outlines. ```html ``` ### Fill and justify Force your ``'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width. ```html ``` For equal-width elements, use `layout="justified"`. All horizontal space will be occupied by nav links, but unlike the `layout="fill"` above, every nav item will be the same width. ```html ```