Bootstrap 4 Tutorial

BS4 Grid System

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's Grid System is a powerful tool for creating responsive layouts. The grid is based on 12 columns and uses flexbox for alignment and responsiveness. It adapts automatically to different screen sizes, making it ideal for mobile-first design.</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="b756c128-0c4c-4b9a-9536-0a5331ab80f2" 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 System</h1>
<h2>1. <strong>Basic Structure</strong></h2>
<p>The grid system consists of containers, rows, and columns:</p>
<ul>
<li><strong>Container</strong>: Provides the structure for the grid system. Use <code>.container</code> for a responsive fixed-width layout or <code>.container-fluid</code> for full-width.</li>
<li><strong>Row</strong>: Wraps columns and creates horizontal alignment.</li>
<li><strong>Columns</strong>: Divide each row into 12 equal parts, which can be customized based on screen size.</li>
</ul>
<h3>Example: Basic Grid Structure</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 class="col"&gt;Column 3&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>In this example, each column (<code>.col</code>) takes up an equal portion of the row.</p>
<h2>2. <strong>Column Sizes</strong></h2>
<p>Bootstrap&rsquo;s grid system includes predefined classes for quickly setting up column sizes for different screen sizes:</p>
<ul>
<li><strong>xs</strong>: Extra small (default, &lt;576px)</li>
<li><strong>sm</strong>: Small (&ge;576px)</li>
<li><strong>md</strong>: Medium (&ge;768px)</li>
<li><strong>lg</strong>: Large (&ge;992px)</li>
<li><strong>xl</strong>: Extra large (&ge;1200px)</li>
</ul>
<h3>Example: Responsive Column 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-sm-4"&gt;Small (4 columns)&lt;/div&gt;
        &lt;div class="col-sm-8"&gt;Small (8 columns)&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>Here:</p>
<ul>
<li><code>.col-sm-4</code> makes the first column occupy 4/12 (one-third) of the row on small and larger screens.</li>
<li><code>.col-sm-8</code> makes the second column occupy 8/12 (two-thirds) of the row.</li>
</ul>
<h2>3. <strong>Offset Columns</strong></h2>
<p>Offsets are used to add space to the left of a column. Use <code>.offset-*</code> classes to shift columns to the right.</p>
<h3>Example: Offset 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-md-4 offset-md-2"&gt;Offset Column&lt;/div&gt;
        &lt;div class="col-md-4"&gt;Regular Column&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>In this example:</p>
<ul>
<li><code>.offset-md-2</code> adds a 2-column space to the left of the first column on medium and larger screens.</li>
</ul>
<h2>4. <strong>Column Alignment</strong></h2>
<p>Use flex utilities to align columns vertically within a row.</p>
<h3>Example: Column Alignment</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 align-items-center"&gt;
        &lt;div class="col"&gt;Column aligned to center&lt;/div&gt;
        &lt;div class="col"&gt;Column aligned to center&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<ul>
<li><code>.align-items-center</code> centers all columns within the row vertically.</li>
</ul>
<h2>5. <strong>Column Wrapping and Nesting</strong></h2>
<p>Columns in Bootstrap wrap automatically when their combined width exceeds 12 columns. Nesting allows you to create sub-rows and columns within a column.</p>
<h3>Example: Nested 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-md-8"&gt;
            Main Column
            &lt;div class="row"&gt;
                &lt;div class="col-6"&gt;Nested Column 1&lt;/div&gt;
                &lt;div class="col-6"&gt;Nested Column 2&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;Side Column&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>Here:</p>
<ul>
<li>The main row has two columns (<code>col-md-8</code> and <code>col-md-4</code>).</li>
<li>Inside the <code>col-md-8</code>, a nested row contains two <code>col-6</code> columns, each taking half of the available width.</li>
</ul>
<h2>6. <strong>No Gutters (Spacing Between Columns)</strong></h2>
<p>To remove gutter (spacing) between columns, use <code>.no-gutters</code> on the row.</p>
<h3>Example: Removing Gutters</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 no-gutters"&gt;
        &lt;div class="col-md-6"&gt;No Gutter Column 1&lt;/div&gt;
        &lt;div class="col-md-6"&gt;No Gutter Column 2&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h2>&nbsp;</h2>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More