Bootstrap 5 Tutorial

Bootstrap 5 Flex

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="65b8b8c6-7eea-401a-9ff3-380424dc4701" data-message-model-slug="gpt-4o">
<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: Flex Utilities</h3>
<p>Bootstrap 5 provides extensive flex utilities, leveraging CSS Flexbox to manage layout and alignment. These utilities allow developers to control the alignment, direction, and spacing of items within a flex container, providing a powerful toolset for responsive and adaptable designs.</p>
<hr />
<h3>Key Bootstrap 5 Flex Classes</h3>
<ol>
<li>
<p><strong>Flex Container</strong>: Use <code>.d-flex</code> to apply flexbox to an element.</p>
<ul>
<li><code>.d-flex</code>: Defines the element as a flex container.</li>
<li><code>.d-inline-flex</code>: Defines the element as an inline flex container.</li>
</ul>
</li>
<li>
<p><strong>Flex Direction</strong>: Set the direction of flex items within the container.</p>
<ul>
<li><code>.flex-row</code>: Aligns items horizontally (default).</li>
<li><code>.flex-column</code>: Aligns items vertically.</li>
<li><code>.flex-row-reverse</code> / <code>.flex-column-reverse</code>: Reverses item alignment.</li>
</ul>
</li>
<li>
<p><strong>Justify Content</strong>: Controls alignment along the main axis (horizontal in a row, vertical in a column).</p>
<ul>
<li><code>.justify-content-start</code>: Aligns items to the start.</li>
<li><code>.justify-content-center</code>: Centers items.</li>
<li><code>.justify-content-end</code>: Aligns items to the end.</li>
<li><code>.justify-content-between</code>, <code>.justify-content-around</code>, <code>.justify-content-evenly</code>: Space items in different ways.</li>
</ul>
</li>
<li>
<p><strong>Align Items</strong>: Controls alignment along the cross-axis (vertical in a row, horizontal in a column).</p>
<ul>
<li><code>.align-items-start</code>: Aligns items to the top.</li>
<li><code>.align-items-center</code>: Centers items.</li>
<li><code>.align-items-end</code>: Aligns items to the bottom.</li>
<li><code>.align-items-baseline</code>, <code>.align-items-stretch</code>: Other alignment options.</li>
</ul>
</li>
<li>
<p><strong>Align Self</strong>: Aligns a single item on the cross-axis.</p>
<ul>
<li><code>.align-self-start</code>, <code>.align-self-center</code>, <code>.align-self-end</code>, etc.</li>
</ul>
</li>
<li>
<p><strong>Wrap</strong>: Enables wrapping of flex items within the container.</p>
<ul>
<li><code>.flex-wrap</code>: Allows items to wrap onto multiple lines.</li>
<li><code>.flex-nowrap</code>: Prevents items from wrapping.</li>
<li><code>.flex-wrap-reverse</code>: Wraps items in reverse order.</li>
</ul>
</li>
</ol>
<hr />
<h3>Examples of Flex Classes in Bootstrap 5</h3>
<h4>Horizontal Centering</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="d-flex justify-content-center bg-light py-3"&gt;
    &lt;p&gt;Centered content using &lt;code&gt;.justify-content-center&lt;/code&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>Vertical Stacking with Flex Column</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="d-flex flex-column align-items-center bg-light py-3"&gt;
    &lt;p&gt;Item 1&lt;/p&gt;
    &lt;p&gt;Item 2&lt;/p&gt;
    &lt;p&gt;Item 3&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>Flex with Space Between Items</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="d-flex flex-wrap bg-light py-3"&gt;
    &lt;div class="p-2 bg-primary text-white m-1"&gt;Item 1&lt;/div&gt;
    &lt;div class="p-2 bg-secondary text-white m-1"&gt;Item 2&lt;/div&gt;
    &lt;div class="p-2 bg-success text-white m-1"&gt;Item 3&lt;/div&gt;
    &lt;div class="p-2 bg-danger text-white m-1"&gt;Item 4&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h4>Multi-line Wrap with Flex</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="d-flex flex-wrap bg-light py-3"&gt;
    &lt;div class="p-2 bg-primary text-white m-1"&gt;Item 1&lt;/div&gt;
    &lt;div class="p-2 bg-secondary text-white m-1"&gt;Item 2&lt;/div&gt;
    &lt;div class="p-2 bg-success text-white m-1"&gt;Item 3&lt;/div&gt;
    &lt;div class="p-2 bg-danger text-white m-1"&gt;Item 4&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More