Bootstrap 5 Tutorial

Bootstrap 5 Stacked/Horizontal

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="f3d959ad-7f38-4d14-888f-dfaa3bd636e5" 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: Stacked and Horizontal Grid Layouts</h3>
<p>Bootstrap 5 allows for stacked and horizontal layouts within its grid system. By default, columns are stacked vertically on smaller screens and switch to a horizontal layout on larger screens. This ensures that content is fully responsive and adjusts seamlessly across devices.</p>
<hr />
<h3>Stacked to Horizontal Example</h3>
<p>Using Bootstrap&rsquo;s breakpoints, you can control when columns switch from stacked to horizontal layouts. For example, columns will stack vertically on smaller screens and display horizontally on medium screens and larger.</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;div class="container"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-12 col-md-6"&gt;Column 1&lt;/div&gt;
        &lt;div class="col-12 col-md-6"&gt;Column 2&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<ul>
<li><strong>On small screens (under 768px)</strong>: Columns stack vertically, each taking the full width of the row.</li>
<li><strong>On medium screens and up (768px and above)</strong>: Columns display side-by-side, each taking 50% width.</li>
</ul>
<hr />
<h3>Stacked Layout (Mobile-First)</h3>
<p>For a purely stacked layout, you can use the <code>col-12</code> class on all columns to ensure they span the entire row width regardless of screen size:</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;div class="container"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-12"&gt;Column 1&lt;/div&gt;
        &lt;div class="col-12"&gt;Column 2&lt;/div&gt;
        &lt;div class="col-12"&gt;Column 3&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>In this example, all columns are stacked vertically on all screen sizes.</p>
<hr />
<h3>Horizontal Layout on All Screens</h3>
<p>If you want columns to display horizontally on all screen sizes, you can use fixed-width column classes without responsive breakpoints, like <code>col</code>:</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;div class="container"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col"&gt;Column 1&lt;/div&gt;
        &lt;div class="col"&gt;Column 2&lt;/div&gt;
        &lt;div class="col"&gt;Column 3&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>In this example, each column shares an equal width across all screen sizes.</p>
<hr />
<h3>Mixed Layout: Stacked on Small, Horizontal on Larger Screens</h3>
<p>Combine responsive breakpoints to stack columns on small screens and display horizontally on larger ones:</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;div class="container"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-12 col-sm-6 col-lg-4"&gt;Column 1&lt;/div&gt;
        &lt;div class="col-12 col-sm-6 col-lg-4"&gt;Column 2&lt;/div&gt;
        &lt;div class="col-12 col-sm-6 col-lg-4"&gt;Column 3&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<ul>
<li><strong>Under 576px</strong>: Columns stack vertically, taking full width (<code>col-12</code>).</li>
<li><strong>576px and up</strong>: Two columns per row (<code>col-sm-6</code>).</li>
<li><strong>992px and up</strong>: Three columns per row (<code>col-lg-4</code>).</li>
</ul>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More