Bootstrap 4 Tutorial

BS4 Grid XLarge

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 "extra-large" grid breakpoint (<code>.col-xl-*</code>) is used for screens 1200px and larger, typically on large desktops and ultra-wide screens. This breakpoint is ideal for creating layouts that align horizontally on very large screens while still stacking on smaller 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="9df2052d-9461-429e-b19e-521ac6df2b42" 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-Large Screens</h1>
<h2>1. <strong>Stacked on Smaller Screens, Horizontal on Extra-Large Screens</strong></h2>
<p>Using <code>.col-xl-*</code> classes, columns will stack vertically on smaller screens and align horizontally only on extra-large screens (1200px and above).</p>
<h3>Example: Stacked on Small Screens, Horizontal on Extra-Large 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-xl-6"&gt;Column 1&lt;/div&gt;
        &lt;div class="col-xl-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>Columns stack vertically on screens smaller than 1200px.</li>
<li>On extra-large screens (1200px and above), each column occupies half of the row, aligning side-by-side.</li>
</ul>
<h2>2. <strong>Custom Column Widths for Extra-Large Screens</strong></h2>
<p>The <code>.col-xl-*</code> classes allow you to set custom widths for columns on extra-large screens, enabling you to control your layout specifically for large desktop displays.</p>
<h3>Example: Custom Widths on Extra-Large 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-xl-3"&gt;Column 1&lt;/div&gt;
        &lt;div class="col-xl-3"&gt;Column 2&lt;/div&gt;
        &lt;div class="col-xl-3"&gt;Column 3&lt;/div&gt;
        &lt;div class="col-xl-3"&gt;Column 4&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>Here:</p>
<ul>
<li>Each column takes up one-quarter of the row (3 out of 12 grid spaces) on extra-large screens.</li>
<li>On smaller screens, these columns will stack vertically.</li>
</ul>
<h2>3. <strong>Creating Responsive Layouts Across Breakpoints</strong></h2>
<p>You can combine <code>.col-xl-*</code> with other breakpoint classes to create layouts that adjust based on the screen size.</p>
<h3>Example: Multiple Breakpoints</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 col-lg-3 col-xl-2"&gt;Column 1&lt;/div&gt;
        &lt;div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2"&gt;Column 2&lt;/div&gt;
        &lt;div class="col-12 col-md-4 col-lg-3 col-xl-2"&gt;Column 3&lt;/div&gt;
        &lt;div class="col-12 col-lg-3 col-xl-2"&gt;Column 4&lt;/div&gt;
        &lt;div class="col-12 col-xl-2"&gt;Column 5&lt;/div&gt;
        &lt;div class="col-12 col-xl-2"&gt;Column 6&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>Display adjusts progressively across small, medium, large, and extra-large breakpoints.</li>
</ul>
<h2>4. <strong>Offsetting Columns on Extra-Large Screens</strong></h2>
<p>Use <code>.offset-xl-*</code> classes to shift columns to the right on extra-large screens, providing control over column alignment.</p>
<h3>Example: Offset Columns on Extra-Large 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-xl-4 offset-xl-2"&gt;Offset Column 1&lt;/div&gt;
        &lt;div class="col-xl-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 extra-large screens.</li>
<li>On smaller screens, columns stack without offset.</li>
</ul>
<hr />
<h2>&nbsp;</h2>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More