Bootstrap 3 Tutorial

Bootstrap 3 Tabs/Pills

Last modified on: October 28, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="50142f73-45d4-43c0-8973-76eba7332982" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Bootstrap 3: Tabs and Pills</h3>
<p><strong>Tabs</strong> and <strong>Pills</strong> in Bootstrap 3 are used to create a tabbed interface that allows users to navigate through different sections of content without leaving the page. This is particularly useful for organizing related information in a compact format.</p>
<hr />
<h3>Basic Usage of Tabs</h3>
<p>Tabs are created using an unordered list (<code>&lt;ul&gt;</code>) with the <code>.nav</code> and <code>.nav-tabs</code> classes. Each tab is linked to a corresponding content section, which is shown or hidden based on the active tab.</p>
<h4>Example of Tabs</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;Bootstrap 3 Tabs Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container"&gt;
    &lt;h2&gt;Bootstrap 3 Tabs Example&lt;/h2&gt;

&lt;!-- Nav tabs --&gt;
    &lt;ul class="nav nav-tabs"&gt;
        &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a data-toggle="tab" href="#menu1"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a data-toggle="tab" href="#menu2"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

&lt;!-- Tab content --&gt;
    &lt;div class="tab-content"&gt;
        &lt;div id="home" class="tab-pane fade in active"&gt;
            &lt;h3&gt;HOME&lt;/h3&gt;
            &lt;p&gt;Welcome to the Home tab.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="menu1" class="tab-pane fade"&gt;
            &lt;h3&gt;Menu 1&lt;/h3&gt;
            &lt;p&gt;Content for Menu 1.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="menu2" class="tab-pane fade"&gt;
            &lt;h3&gt;Menu 2&lt;/h3&gt;
            &lt;p&gt;Content for Menu 2.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Basic Usage of Pills</h3>
<p>Pills are similar to tabs but provide a different visual style. You can create them using the <code>.nav</code> and <code>.nav-pills</code> classes.</p>
<h4>Example of Pills</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="container"&gt;
    &lt;h2&gt;Bootstrap 3 Pills Example&lt;/h2&gt;

&lt;!-- Nav pills --&gt;
    &lt;ul class="nav nav-pills"&gt;
        &lt;li class="active"&gt;&lt;a data-toggle="pill" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a data-toggle="pill" href="#profile"&gt;Profile&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a data-toggle="pill" href="#messages"&gt;Messages&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

&lt;!-- Pill content --&gt;
    &lt;div class="tab-content"&gt;
        &lt;div id="home" class="tab-pane fade in active"&gt;
            &lt;h3&gt;HOME&lt;/h3&gt;
            &lt;p&gt;Welcome to the Home pill.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="profile" class="tab-pane fade"&gt;
            &lt;h3&gt;Profile&lt;/h3&gt;
            &lt;p&gt;This is your profile.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id="messages" class="tab-pane fade"&gt;
            &lt;h3&gt;Messages&lt;/h3&gt;
            &lt;p&gt;Here are your messages.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Key Features of Bootstrap 3 Tabs and Pills</h3>
<ol>
<li><strong>Easy Navigation</strong>: Tabs and pills allow users to switch between different content areas without page reloads.</li>
<li><strong>Content Organization</strong>: They help organize related content in a clean and efficient manner.</li>
<li><strong>Customizable</strong>: You can easily customize the appearance of tabs and pills using CSS.</li>
<li><strong>Responsive Design</strong>: Both components are responsive and work well on different devices.</li>
<li><strong>Active State</strong>: The active tab or pill can be highlighted for better user experience.</li>
</ol>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Conclusion</h3>
<p>Bootstrap 3 Tabs and Pills are powerful UI components that enhance user interaction and content organization. They provide a clean, intuitive way for users to navigate between different sections of information while keeping the interface neat and responsive. With easy implementation and customization, they are an excellent addition to any Bootstrap-based project.</p>

Web Technology View More