Bootstrap 5 Tutorial

Bootstrap 5 Grid System

Last modified on: October 27, 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">&nbsp;</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="dc08df9e-78f8-42ff-a26d-efc18375e48d" 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">
<h3>Bootstrap 5: Grid System</h3>
<p>Bootstrap 5's grid system provides a responsive, flexible way to design layouts for all device sizes using a 12-column structure. It&rsquo;s based on Flexbox, making it easy to create layouts that adapt to various screen sizes.</p>
<hr />
<h3>Key Concepts</h3>
<ol>
<li>
<p><strong>Container</strong>: Centers content on the page and defines the width.</p>
<ul>
<li><code>.container</code>: Fixed-width container.</li>
<li><code>.container-fluid</code>: Full-width, spans the entire width of the viewport.</li>
<li><code>.container-{breakpoint}</code>: Fixed-width for specific screen sizes (e.g., <code>.container-sm</code>, <code>.container-md</code>).</li>
</ul>
</li>
<li>
<p><strong>Row</strong>: A horizontal group of columns.</p>
<ul>
<li>Use <code>.row</code> to wrap columns, ensuring they are aligned and spaced correctly.</li>
</ul>
</li>
<li>
<p><strong>Columns</strong>: Defines the layout's structure within each row.</p>
<ul>
<li>Bootstrap 5 columns are specified with <code>.col</code> or <code>.col-{breakpoint}-{number}</code>, adjusting per screen size.</li>
</ul>
</li>
</ol>
<hr />
<h3>Basic Example</h3>
<p>Here&rsquo;s a simple example with a responsive layout for small, medium, and large 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-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>In this example, each column takes up 4 columns (out of 12) on small screens (<code>col-sm-4</code>), stacking for smaller screen sizes.</p>
<hr />
<h3>Responsive Columns</h3>
<p>You can specify column sizes for various screen sizes using breakpoint classes. Bootstrap supports the following breakpoints:</p>
<ul>
<li><strong>Extra small</strong>: <code>&lt;576px</code> (No prefix)</li>
<li><strong>Small</strong>: <code>&ge;576px</code> (<code>.col-sm-</code>)</li>
<li><strong>Medium</strong>: <code>&ge;768px</code> (<code>.col-md-</code>)</li>
<li><strong>Large</strong>: <code>&ge;992px</code> (<code>.col-lg-</code>)</li>
<li><strong>Extra large</strong>: <code>&ge;1200px</code> (<code>.col-xl-</code>)</li>
<li><strong>XXL</strong>: <code>&ge;1400px</code> (<code>.col-xxl-</code>)</li>
</ul>
<p>Example with responsive 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"&gt;
        &lt;div class="col-12 col-md-8"&gt;Main content&lt;/div&gt;
        &lt;div class="col-6 col-md-4"&gt;Sidebar&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<ul>
<li>The <code>.col-12</code> takes up full width on small screens.</li>
<li><code>.col-md-8</code> and <code>.col-md-4</code> divide the space 8/12 and 4/12 for medium screens and above.</li>
</ul>
<hr />
<h3>Auto Layout Columns</h3>
<p>Auto layout adjusts column widths automatically without specifying sizes.</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 Column 1&lt;/div&gt;
        &lt;div class="col"&gt;Auto Column 2&lt;/div&gt;
        &lt;div class="col"&gt;Auto Column 3&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>Each column automatically divides the available space equally.</p>
<hr />
<h3>Offset Columns</h3>
<p>Offsets push columns to the right for more precise alignment.</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-md-4 offset-md-4"&gt;Centered Column&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>This example centers a single column in the middle of a row.</p>
<hr />
<h3>Nesting Columns</h3>
<p>Nest rows and columns within a column for more 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-md-8"&gt;
            &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;Sidebar&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More