Bootstrap 4 Tutorial

BS4 Grid Large

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 "large" grid breakpoint (<code>.col-lg-*</code>) is used to define column layouts for screens that are 992px and larger, such as laptops and desktops. This breakpoint allows you to set layouts that stack on smaller screens and arrange horizontally on larger 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="61a2ed36-d832-4f7d-8938-19cdf00e4dd4" 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 Large Screens</h1>
<h2>1. <strong>Stacked on Smaller Screens, Horizontal on Large and Larger Screens</strong></h2>
<p>Using <code>.col-lg-*</code> classes, columns will stack vertically on extra small, small, and medium screens but align horizontally on screens 992px and above.</p>
<h3>Example: Stacked on Smaller Screens, Horizontal on 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-lg-6"&gt;Column 1&lt;/div&gt;
        &lt;div class="col-lg-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 992px.</li>
<li>On large screens (992px and above), columns are side-by-side, each taking up half the row.</li>
</ul>
<h2>2. <strong>Custom Column Widths for Large Screens</strong></h2>
<p>The <code>.col-lg-*</code> classes allow you to set specific column widths for large screens and above, which is helpful for responsive layouts.</p>
<h3>Example: Custom Widths on 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-lg-4"&gt;Column 1&lt;/div&gt;
        &lt;div class="col-lg-4"&gt;Column 2&lt;/div&gt;
        &lt;div class="col-lg-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 occupies one-third of the row (4 out of 12 grid spaces) on large screens and above.</li>
<li>On smaller screens, these columns will stack vertically.</li>
</ul>
<h2>3. <strong>Combining Large Grid with Other Breakpoints</strong></h2>
<p>Combine <code>.col-lg-*</code> with other breakpoint classes to create layouts that adjust based on screen size.</p>
<h3>Example: Different Layouts Across 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"&gt;Column 1&lt;/div&gt;
        &lt;div class="col-12 col-sm-6 col-md-4 col-lg-3"&gt;Column 2&lt;/div&gt;
        &lt;div class="col-12 col-md-4 col-lg-3"&gt;Column 3&lt;/div&gt;
        &lt;div class="col-12 col-lg-3"&gt;Column 4&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>On small screens (576px), two columns display per row.</li>
<li>On medium screens (768px), three columns display per row.</li>
<li>On large screens (992px) and above, four columns display side-by-side.</li>
</ul>
<h2>4. <strong>Offsetting Columns on Large Screens</strong></h2>
<p>Use <code>.offset-lg-*</code> classes to shift columns to the right, allowing fine-tuned alignment on large screens and above.</p>
<h3>Example: Offset Columns on 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-lg-4 offset-lg-2"&gt;Offset Column 1&lt;/div&gt;
        &lt;div class="col-lg-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 large screens (&ge;992px).</li>
<li>On smaller screens, columns stack vertically without offset.</li>
</ul>
<hr />
<h2>&nbsp;</h2>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More