Bootstrap 4 Tutorial

BS4 Grid Examples

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 provides a versatile grid system that helps you create responsive layouts with ease. Below are examples demonstrating various use cases for Bootstrap's grid system across different screen sizes.</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="1062f0cb-cdb5-4fb1-9f17-bfd2f8b25533" 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 Examples</h1>
<h2>1. <strong>Basic Grid Layout</strong></h2>
<p>In this basic layout, columns automatically stack on small screens and display side-by-side on medium and larger screens.</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>This example creates a row with three equal-width columns:</p>
<ul>
<li>On small screens, columns stack vertically.</li>
<li>On medium screens and above, columns display horizontally with equal width.</li>
</ul>
<hr />
<h2>2. <strong>Setting Column Widths</strong></h2>
<p>Using <code>.col-*</code> classes, you can control each column's width by specifying the number of grid spaces (out of 12) it should occupy.</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-4"&gt;Column 1 (4/12 width)&lt;/div&gt;
        &lt;div class="col-8"&gt;Column 2 (8/12 width)&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>In this example:</p>
<ul>
<li><code>Column 1</code> occupies 4 of 12 grid spaces.</li>
<li><code>Column 2</code> occupies 8 of 12 grid spaces.</li>
</ul>
<hr />
<h2>3. <strong>Responsive Column Sizes</strong></h2>
<p>By specifying multiple column classes, you can create responsive layouts that change at different breakpoints.</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-8"&gt;Column 1 (Full width on small, 8/12 on medium+)&lt;/div&gt;
        &lt;div class="col-6 col-md-4"&gt;Column 2 (6/12 on small, 4/12 on medium+)&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>Here:</p>
<ul>
<li>On extra small and small screens, <code>Column 1</code> spans the entire row, and <code>Column 2</code> takes up half.</li>
<li>On medium screens and above, <code>Column 1</code> occupies two-thirds, and <code>Column 2</code> takes up one-third.</li>
</ul>
<hr />
<h2>4. <strong>Offsetting Columns</strong></h2>
<p>Use <code>.offset-*</code> classes to shift columns to the right.</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-4 offset-4"&gt;Centered Column&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>In this layout:</p>
<ul>
<li>The column occupies one-third of the row but is shifted right by four grid spaces, centering it on larger screens.</li>
</ul>
<hr />
<h2>5. <strong>Nesting Columns</strong></h2>
<p>Bootstrap 4 allows you to nest rows and columns within a column, useful for creating complex layouts.</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;
            Outer Column 1
            &lt;div class="row"&gt;
                &lt;div class="col-6"&gt;Inner Column 1&lt;/div&gt;
                &lt;div class="col-6"&gt;Inner Column 2&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col"&gt;Outer Column 2&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>In this example:</p>
<ul>
<li><code>Outer Column 1</code> contains a nested row with two inner columns.</li>
</ul>
<hr />
<h2>6. <strong>Variable Width Columns</strong></h2>
<p>Bootstrap&rsquo;s grid also allows variable-width columns. This can be useful for non-uniform layouts.</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;Auto-width Column 1&lt;/div&gt;
        &lt;div class="col-6"&gt;Fixed-width Column 2 (6/12)&lt;/div&gt;
        &lt;div class="col"&gt;Auto-width Column 3&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>Here:</p>
<ul>
<li><code>Column 2</code> is fixed at 6 grid spaces, while <code>Column 1</code> and <code>Column 3</code> automatically adjust based on available space.</li>
</ul>
<hr />
<h2>7. <strong>Using the <code>.no-gutters</code> Class</strong></h2>
<p>The <code>.no-gutters</code> class removes padding between columns.</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 no-gutters"&gt;
        &lt;div class="col-6"&gt;Column 1 (No Gutter)&lt;/div&gt;
        &lt;div class="col-6"&gt;Column 2 (No Gutter)&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>This layout:</p>
<ul>
<li>Displays two columns without spacing between them, often used for edge-to-edge layouts.</li>
</ul>
<hr />
<h2>&nbsp;</h2>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More