Bootstrap 4 Tutorial

BS4 Flex

Last modified on: October 26, 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">
<div class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">Bootstrap 4 Flex utilities offer a powerful set of classes to control flexbox layouts, helping you build responsive, flexible, and complex layouts without custom CSS. With these classes, you can align, justify, and order items, as well as control flex directions and wrapping.</div>
</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="d10e136d-b2bf-4fdd-b398-97b85cc8e799" 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"><hr />
<h1>Bootstrap 4 Flex</h1>
<h2>1. <strong>Flex Container</strong></h2>
<p>To enable flexbox, use the <code>d-flex</code> class on a container. It activates the flex display, allowing you to apply additional flex properties to child elements.</p>
<h3>Example: Basic Flex Container</h3>
<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 bg-light p-3"&gt;
    &lt;div class="p-2 bg-primary text-white"&gt;Flex Item 1&lt;/div&gt;
    &lt;div class="p-2 bg-secondary text-white"&gt;Flex Item 2&lt;/div&gt;
    &lt;div class="p-2 bg-success text-white"&gt;Flex Item 3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>2. <strong>Flex Direction</strong></h2>
<p>Set the direction of flex items with <code>flex-row</code> (default) or <code>flex-column</code> for vertical alignment.</p>
<h3>Example: Flex Row and Column</h3>
<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-row bg-light p-3 mb-3"&gt;
    &lt;div class="p-2 bg-primary text-white"&gt;Row Item 1&lt;/div&gt;
    &lt;div class="p-2 bg-secondary text-white"&gt;Row Item 2&lt;/div&gt;
&lt;/div&gt;

&lt;div class="d-flex flex-column bg-light p-3"&gt;
    &lt;div class="p-2 bg-primary text-white"&gt;Column Item 1&lt;/div&gt;
    &lt;div class="p-2 bg-secondary text-white"&gt;Column Item 2&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>3. <strong>Justify Content</strong></h2>
<p>Use justify-content classes to horizontally align items within a flex container.</p>
<ul>
<li><code>justify-content-start</code>: Aligns items to the start (default).</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-around</code>: Distributes items with space around them.</li>
<li><code>justify-content-between</code>: Distributes items with space between them.</li>
</ul>
<h3>Example: Justify Content</h3>
<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 p-3"&gt;
    &lt;div class="p-2 bg-primary text-white"&gt;Centered Item 1&lt;/div&gt;
    &lt;div class="p-2 bg-secondary text-white"&gt;Centered Item 2&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>4. <strong>Align Items</strong></h2>
<p>Use align-items classes to vertically align items within the flex container.</p>
<ul>
<li><code>align-items-start</code>: Aligns items to the top.</li>
<li><code>align-items-center</code>: Centers items vertically.</li>
<li><code>align-items-end</code>: Aligns items to the bottom.</li>
</ul>
<h3>Example: Align Items</h3>
<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 align-items-center bg-light" style="height: 150px;"&gt;
    &lt;div class="p-2 bg-primary text-white"&gt;Centered Item 1&lt;/div&gt;
    &lt;div class="p-2 bg-secondary text-white"&gt;Centered Item 2&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>5. <strong>Wrap</strong></h2>
<p>Control whether items wrap with <code>flex-wrap</code> (allow wrapping) or <code>flex-nowrap</code> (prevent wrapping).</p>
<h3>Example: Flex Wrap</h3>
<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"&gt;
    &lt;div class="p-2 bg-primary text-white"&gt;Wrapped Item 1&lt;/div&gt;
    &lt;div class="p-2 bg-secondary text-white"&gt;Wrapped Item 2&lt;/div&gt;
    &lt;div class="p-2 bg-success text-white"&gt;Wrapped Item 3&lt;/div&gt;
    &lt;div class="p-2 bg-danger text-white"&gt;Wrapped Item 4&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>6. <strong>Order</strong></h2>
<p>Use <code>order-</code> classes to rearrange the order of flex items. Bootstrap supports ordering from <code>order-0</code> to <code>order-12</code>.</p>
<h3>Example: Order Classes</h3>
<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 bg-light p-3"&gt;
    &lt;div class="p-2 bg-primary text-white order-3"&gt;Order 3&lt;/div&gt;
    &lt;div class="p-2 bg-secondary text-white order-1"&gt;Order 1&lt;/div&gt;
    &lt;div class="p-2 bg-success text-white order-2"&gt;Order 2&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h2>7. <strong>Align Self</strong></h2>
<p>Override alignment for individual items with <code>align-self-start</code>, <code>align-self-center</code>, or <code>align-self-end</code>.</p>
<h3>Example: Align Self</h3>
<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 bg-light" style="height: 150px;"&gt;
    &lt;div class="p-2 bg-primary text-white align-self-start"&gt;Align Self Start&lt;/div&gt;
    &lt;div class="p-2 bg-secondary text-white align-self-center"&gt;Align Self Center&lt;/div&gt;
    &lt;div class="p-2 bg-success text-white align-self-end"&gt;Align Self End&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h2>&nbsp;</h2>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More