Bootstrap 4 Tutorial

BS4 Grid Small

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">In Bootstrap 4, the "small" grid breakpoint (<code>.col-sm-*</code>) is used to define column layouts for screens that are 576px and larger. This is useful when you want your layout to stack vertically on extra small screens but arrange horizontally starting at 576px and above.</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="8ad2ba9a-bb23-4c55-bcb4-1513c4fb9667" 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 Small Screens</h1>
<h2>1. <strong>Stacked on Extra Small, Horizontal on Small and Larger Screens</strong></h2>
<p>Using <code>.col-sm-*</code> classes allows columns to stack on extra small screens and display horizontally when the screen is 576px or larger.</p>
<h3>Example: Stacked on Extra Small, Horizontal on 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-sm-6"&gt;Column 1&lt;/div&gt;
        &lt;div class="col-sm-6"&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>On screens smaller than 576px, both columns will stack vertically.</li>
<li>On screens 576px and above, the columns will display side-by-side, each taking up half of the row.</li>
</ul>
<h2>2. <strong>Responsive Columns for Small Screens</strong></h2>
<p>The <code>.col-sm-*</code> classes allow precise column widths for small screens and up, letting you define layouts that apply only at the small breakpoint or larger.</p>
<h3>Example: Custom Column Widths on 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-sm-4"&gt;Column 1&lt;/div&gt;
        &lt;div class="col-sm-4"&gt;Column 2&lt;/div&gt;
        &lt;div class="col-sm-4"&gt;Column 3&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>Here:</p>
<ul>
<li>Each column spans one-third of the row (4 out of 12 grid spaces) on small screens and larger.</li>
<li>On extra small screens, these columns will stack vertically.</li>
</ul>
<h2>3. <strong>Combining with Other Breakpoints</strong></h2>
<p>You can combine <code>.col-sm-*</code> with other breakpoint classes to create complex, responsive layouts that adjust across multiple screen sizes.</p>
<h3>Example: Different Layouts Across Screen Sizes</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 col-sm-6 col-md-4"&gt;Column 1&lt;/div&gt;
        &lt;div class="col-12 col-sm-6 col-md-4"&gt;Column 2&lt;/div&gt;
        &lt;div class="col-12 col-md-4"&gt;Column 3&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>In this example:</p>
<ul>
<li>Columns stack vertically on extra small screens.</li>
<li>Columns are arranged in two per row on small screens (576px).</li>
<li>On medium screens (768px), all three columns display side-by-side.</li>
</ul>
<h2>4. <strong>Offsetting Columns on Small Screens</strong></h2>
<p>Use <code>.offset-sm-*</code> classes to add spacing to the left of columns, customizing alignment for small screens and up.</p>
<h3>Example: Offset Columns on 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-sm-4 offset-sm-2"&gt;Offset Column 1&lt;/div&gt;
        &lt;div class="col-sm-4"&gt;Column 2&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>Here:</p>
<ul>
<li><code>Offset Column 1</code> is shifted right by 2 columns on small screens (&ge;576px).</li>
<li>On smaller screens, all columns stack vertically without offset.</li>
</ul>
<hr />
<h2>&nbsp;</h2>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More