--- title: Tab summary: A tab allows users to alternate between equally important views within the same context. By dividing content into meaningful sections, it improves organization and makes navigation easier. bootstrapLink: components/navs/ description: Organize content with an interactive tab. --- ## Default markup Use tabs to let users access different sections within one context quickly and with ease. In the default design, the current tab is highlighted, which makes the interface clear and user-friendly. {% capture html -%}

Home tab

Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh

Profile tab

Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed
{%- endcapture %} {% include "docs/example.html" html=html %} ## Tabs with icons Add icons to your tab labels, if you want to use a visual element and make the tab content easier to identify. {% capture html -%}

Home tab

Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh

Profile tab

Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed

Settings tab

Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus
{%- endcapture %} {% include "docs/example.html" html=html %} ## Tabs only with icons Use tabs without label names to save space and make the tab content easy to recognize for international users. {% capture html -%}

Home tab

Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh

Profile tab

Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed

Settings tab

Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus
{%- endcapture %} {% include "docs/example.html" html=html %} ## Tabs with dropdown Make one or more of your tabs into a dropdown to add more options within one element. {% capture html -%}

Home tab

Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh

Profile tab

Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed
{%- endcapture %} {% include "docs/example.html" html=html %} ## Full-width tabs Add the `.nav-fill` class to make the tabs take up the full space of the parent element. {% capture html -%}

Home tab

Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh

Profile tab

Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed

Activity tab

Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus
{%- endcapture %} {% include "docs/example.html" html=html %}