Bootstrap 4 Tutorial

BS4 Grid XSmall

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&rsquo;s grid system for extra small screens (XSmall or <code>&lt;576px</code>) is responsive by default, meaning that columns will stack vertically unless specified otherwise. The <code>col</code> class is used for columns that automatically span across the full width of the row on extra small screens.</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="e1ac4758-8afb-441d-85e5-33256535fbe5" 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 Grid for Extra Small Screens (XSmall)</h1>
<h2>1. <strong>Auto Stacking on Extra Small Screens</strong></h2>
<p>By default, any columns without size specifications will stack vertically on screens smaller than 576px. To ensure consistency across screen sizes, you can use <code>.col</code> for flexible columns that take up equal width within the row.</p>
<h3>Example: Auto-Stacked Columns on Extra Small Screens</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="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&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>In this example:</p>
<ul>
<li>Both columns will automatically stack on extra small screens.</li>
</ul>
<h2>2. <strong>Fixed Width for Extra Small Screens</strong></h2>
<p>Use <code>.col-12</code> on extra small screens to span a column fully across the row, even on larger screens if needed.</p>
<h3>Example: Full-Width Columns on Extra Small Screens</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="container"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-12"&gt;Full Width Column 1&lt;/div&gt;
        &lt;div class="col-12"&gt;Full Width Column 2&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>Here:</p>
<ul>
<li>Each column occupies the entire width of the row.</li>
</ul>
<h2>3. <strong>Responsive Classes for Extra Small Screens</strong></h2>
<p>You can explicitly define column width by screen size using classes like <code>.col-xs-*</code>. In Bootstrap 4, the <code>.col-*</code> classes serve for extra small screens as well, so <code>.col-4</code> will span 4 columns on any screen size, including extra small.</p>
<h3>Example: Responsive Extra Small Columns</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="container"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-4"&gt;Column 1&lt;/div&gt;
        &lt;div class="col-4"&gt;Column 2&lt;/div&gt;
        &lt;div class="col-4"&gt;Column 3&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>In this case:</p>
<ul>
<li>Each column spans 4 out of 12 available spaces (one-third of the row), even on extra small screens.</li>
</ul>
<h2>4. <strong>Hiding Content on Extra Small Screens</strong></h2>
<p>You may choose to hide certain elements on extra small screens using the <code>.d-none d-sm-block</code> utility classes.</p>
<h3>Example: Hiding Column on Extra Small Screens</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="container"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col d-none d-sm-block"&gt;Hidden on Extra Small Screens&lt;/div&gt;
        &lt;div class="col"&gt;Visible on All Screens&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<ul>
<li>The first column will not display on screens smaller than 576px.</li>
</ul>
<hr />
<h2>&nbsp;</h2>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More