Bootstrap 5 Tutorial

Bootstrap 5 Grid Basic

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="753c37aa-38ba-4a63-80fe-628c9a003911" data-message-model-slug="gpt-4o-mini">
<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 Basics</h3>
<p>The Bootstrap 5 grid system is a powerful tool for creating responsive layouts. It uses a series of rows and columns to organize your content, allowing it to adapt to various screen sizes seamlessly. The grid is based on a 12-column layout, and you can define how many columns a particular element should span at different breakpoints.</p>
<hr />
<h3>Key Concepts of the Bootstrap 5 Grid System</h3>
<ol>
<li>
<p><strong>Containers</strong>: Used to wrap your grid rows. You can use either <code>.container</code> for a fixed width or <code>.container-fluid</code> for full width.</p>
</li>
<li>
<p><strong>Rows</strong>: Created using the <code>.row</code> class, which serves as a wrapper for columns. Rows ensure proper alignment and spacing.</p>
</li>
<li>
<p><strong>Columns</strong>: Defined using <code>.col</code> classes. You can specify how many columns an element should span, using classes like <code>.col-</code>, <code>.col-sm-</code>, <code>.col-md-</code>, <code>.col-lg-</code>, and <code>.col-xl-</code>.</p>
</li>
<li>
<p><strong>Responsive Breakpoints</strong>: The grid system is responsive, meaning it can adapt to various screen sizes using breakpoints:</p>
<ul>
<li><code>xs</code>: Extra small (less than 576px)</li>
<li><code>sm</code>: Small (&ge;576px)</li>
<li><code>md</code>: Medium (&ge;768px)</li>
<li><code>lg</code>: Large (&ge;992px)</li>
<li><code>xl</code>: Extra large (&ge;1200px)</li>
<li><code>xxl</code>: Extra extra large (&ge;1400px)</li>
</ul>
</li>
</ol>
<hr />
<h3>Example: Basic Grid Layout in Bootstrap 5</h3>
<p>Here&rsquo;s a simple example that demonstrates the basic use of the grid system:</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;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Bootstrap 5 Grid Basics&lt;/title&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container mt-5"&gt;
        &lt;h1&gt;Bootstrap 5 Grid Basics&lt;/h1&gt;
        &lt;div class="row"&gt;
            &lt;div class="col"&gt;
                &lt;div class="p-3 border bg-light"&gt;Column 1&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col"&gt;
                &lt;div class="p-3 border bg-light"&gt;Column 2&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col"&gt;
                &lt;div class="p-3 border bg-light"&gt;Column 3&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row mt-3"&gt;
            &lt;div class="col-md-6"&gt;
                &lt;div class="p-3 border bg-secondary text-white"&gt;Column 1 (6/12)&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-6"&gt;
                &lt;div class="p-3 border bg-secondary text-white"&gt;Column 2 (6/12)&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row mt-3"&gt;
            &lt;div class="col-lg-4"&gt;
                &lt;div class="p-3 border bg-warning text-dark"&gt;Column 1 (4/12)&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-4"&gt;
                &lt;div class="p-3 border bg-warning text-dark"&gt;Column 2 (4/12)&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-lg-4"&gt;
                &lt;div class="p-3 border bg-warning text-dark"&gt;Column 3 (4/12)&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Explanation of the Code</h3>
<ul>
<li><strong>Container</strong>: The outer <code>&lt;div class="container"&gt;</code> wraps the entire grid layout, providing a responsive fixed width.</li>
<li><strong>Rows and Columns</strong>:
<ul>
<li>The first row contains three equal columns using <code>.col</code>, which divides the space equally.</li>
<li>The second row contains two columns, each taking half of the row width on medium and larger screens (<code>.col-md-6</code>).</li>
<li>The third row has three equal columns (<code>.col-lg-4</code>), each taking one-third of the row width on large screens and above.</li>
</ul>
</li>
</ul>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More