Bootstrap 5 Tutorial

Bootstrap 5 Navs

Last modified on: October 27, 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="54fe59d7-0149-4ee4-afe5-361f4ea31ca6" 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 5: Navs</h3>
<p>Navs in Bootstrap 5 are components that allow you to create navigational links that can be styled and aligned in various ways. They can be used for horizontal navigation bars, vertical navigation lists, or any form of navigation within your application.</p>
<hr />
<h3>Key Features of Bootstrap 5 Navs</h3>
<ol>
<li><strong>Flexible Alignment</strong>: Navs can be aligned horizontally or vertically, giving you the flexibility to design your layout as needed.</li>
<li><strong>Active States</strong>: Bootstrap provides built-in classes to indicate which link is currently active.</li>
<li><strong>Customization</strong>: You can easily customize the look and feel of your navs using Bootstrap utility classes or your own CSS.</li>
<li><strong>Responsive Design</strong>: Navs are designed to be responsive and adapt to various screen sizes.</li>
</ol>
<hr />
<h3>Example: Creating Navs in Bootstrap 5</h3>
<p>Here&rsquo;s an example demonstrating how to create both horizontal and vertical navs in Bootstrap 5:</p>
<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.0"&gt;
    &lt;title&gt;Bootstrap 5 Navs Example&lt;/title&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container mt-5"&gt;
        &lt;h1&gt;Bootstrap 5 Navs&lt;/h1&gt;

&lt;!-- Horizontal Navs --&gt;
        &lt;ul class="nav nav-tabs"&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link active" aria-current="page" href="#"&gt;Home&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#"&gt;Profile&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#"&gt;Messages&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#"&gt;Settings&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;

&lt;!-- Vertical Navs --&gt;
        &lt;div class="row mt-4"&gt;
            &lt;div class="col-md-3"&gt;
                &lt;h5&gt;Vertical Navigation&lt;/h5&gt;
                &lt;div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"&gt;
                    &lt;a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true"&gt;Home&lt;/a&gt;
                    &lt;a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false"&gt;Profile&lt;/a&gt;
                    &lt;a class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false"&gt;Messages&lt;/a&gt;
                    &lt;a class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false"&gt;Settings&lt;/a&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-9"&gt;
                &lt;div class="tab-content" id="v-pills-tabContent"&gt;
                    &lt;div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"&gt;Home content goes here.&lt;/div&gt;
                    &lt;div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"&gt;Profile content goes here.&lt;/div&gt;
                    &lt;div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"&gt;Messages content goes here.&lt;/div&gt;
                    &lt;div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab"&gt;Settings content goes here.&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Explanation of the Code</h3>
<ul>
<li><strong>Horizontal Navs</strong>: The first section shows how to create a horizontal navigation bar using the <code>nav</code> and <code>nav-tabs</code> classes. The active link is highlighted using the <code>active</code> class.</li>
<li><strong>Vertical Navs</strong>: The second section demonstrates vertical navigation using the <code>flex-column</code> and <code>nav-pills</code> classes. This also includes a tabbed interface where clicking on each nav item changes the displayed content.</li>
</ul>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More