Rate this docs

Vue Bootstrap Pills

Vue Pills - Bootstrap 4 & Material Design

Vue Bootstrap pills are simple navigation components that expedite browsing through various options in the layout.

They allow you to fit a lot of information in single space.

See the following Bootstrap pills examples:


Material pills MDB Pro component

Material Design styling for Bootstrap Pills component


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.



        <template>
          <mdb-container class="m-5">
            <mdb-tab pills color="secondary">
              <mdb-tab-item :active="pills==1" @click.native.prevent="pills=1">Active</mdb-tab-item>
              <mdb-tab-item :active="pills==2" @click.native.prevent="pills=2">Link</mdb-tab-item>
              <mdb-tab-item :active="pills==3" @click.native.prevent="pills=3">Link</mdb-tab-item>
              <mdb-tab-item :active="pills==4" @click.native.prevent="pills=4">Help</mdb-tab-item>
            </mdb-tab>
            <mdb-tab-content class="mb-5">
              <transition-group name="slide-toggle">
                <mdb-tab-pane key="pills1" v-show="pills==1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit
                  magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur.
                  Tempora, placeat ratione porro voluptate odit minima.</mdb-tab-pane>
                <mdb-tab-pane key="pills2" v-show="pills==2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
                  vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                  consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. <br><br>Neque porro quisquam est, qui
                  dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
                  ut labore et dolore magnam aliquam quaerat voluptatem. </mdb-tab-pane>
                <mdb-tab-pane key="pills3" v-show="pills==3">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
                  praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate
                  non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. <br><br>Et
                  harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
                  cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
                  repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
                  voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut
                  aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</mdb-tab-pane>
                <mdb-tab-pane key="pills4" v-show="pills==4">Et harum quidem rerum facilis est et expedita distinctio. Nam libero
                  tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere
                  possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
                  debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
                  Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut
                  perferendis doloribus asperiores repellat.</mdb-tab-pane>
              </transition-group>
            </mdb-tab-content>
          </mdb-container>

        </template>
        <script>
          import { mdbTab, mdbTabItem, mdbTabContent, mdbTabPane, mdbContainer } from 'mdbvue';

          export default {
            name: 'Pills',
            components: {
              mdbTab,
              mdbTabItem,
              mdbTabContent,
              mdbTabPane,
              mdbContainer
            },
            data() {
              return {
                pills: '1',
              };
            }
          };
        </script>

        <!-- Styles are used for tab animation, which is open for customization and optional -->
        <style scoped>
          .slide-toggle-enter-active {
            transition: .3s ease-in;
            opacity: 1;
            max-height: 500px;
          }

          .slide-toggle-enter,
          .slide-toggle-leave-active {
            opacity: 0;
            max-height: 0;
          }

          .slide-toggle-leave {
            opacity: 1;
            max-height: 500px;
          }
        </style>

      

Pills justified MDB Pro component



        <template>
          <mdb-container class="m-5">
            <mdb-tab pills color="pink" justify>
              <mdb-tab-item :active="pills==1" @click.native.prevent="pills=1">Active</mdb-tab-item>
              <mdb-tab-item :active="pills==2" @click.native.prevent="pills=2">Link 1</mdb-tab-item>
              <mdb-tab-item :active="pills==3" @click.native.prevent="pills=3">Link 2</mdb-tab-item>
              <mdb-tab-item :active="pills==4" @click.native.prevent="pills=4">Link 3</mdb-tab-item>
            </mdb-tab>
          </mdb-container>

        </template>
        <script>
          import { mdbTab, mdbTabItem, mdbTabContent, mdbTabPane, mdbContainer } from 'mdbvue';

          export default {
            name: 'Pills',
            components: {
              mdbTab,
              mdbTabItem,
              mdbTabContent,
              mdbTabPane,
              mdbContainer
            },
            data() {
              return {
                pills: '1',
              };
            }
          };
        </script>

        <!-- Styles are used for tab animation, which is open for customization and optional -->
        <style scoped>
          .slide-toggle-enter-active {
            transition: .3s ease-in;
            opacity: 1;
            max-height: 500px;
          }

          .slide-toggle-enter,
          .slide-toggle-leave-active {
            opacity: 0;
            max-height: 0;
          }

          .slide-toggle-leave {
            opacity: 1;
            max-height: 500px;
          }
        </style>

      

Pills - API

In this section you will find advanced information about the Pills component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement


import { mdbTab, mdbTabItem, mdbTabContent, mdbTabPane } from 'mdbvue';
      

API Reference: Properties

Name Type Default Description Example
tag String 'ul' Changes tabs's wrapper tag <mdb-tab tag="div" />
color String Changes tabs's color <mdb-tab color="cyan" />
pills Boolean false Changes tabs into pills <mdb-tab pills />
tabs Boolean false Changes tabs into nav tabs <mdb-tab tabs />
vertical Boolean false Flex column layout <mdb-tab vertical />
justify Boolean false Justified layout <mdb-tab justify />
classes String Adds new classes to already existing <mdb-tab classes="..." />
header Boolean false Changes tabs style into card header layout <mdb-tab header />