Bootstrap 4 Tutorial

BS4 Grid Medium

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 "medium" grid breakpoint (<code>.col-md-*</code>) is used to define column layouts for screens that are 768px and larger. This breakpoint is perfect for tablets and small desktops, allowing you to set layouts that stack on smaller screens and display horizontally on medium-sized screens and up.</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="ee0cceaa-84ec-457b-b693-3d0909d91127" 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 Medium Screens</h1>
<h2>1. <strong>Stacked on Smaller Screens, Horizontal on Medium and Larger Screens</strong></h2>
<p>By using <code>.col-md-*</code> classes, columns will stack vertically on extra small and small screens but align horizontally when the screen width is 768px or larger.</p>
<h3>Example: Stacked on Small Screens, Horizontal on Medium 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-md-6"&gt;Column 1&lt;/div&gt;
        &lt;div class="col-md-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>On screens smaller than 768px, both columns stack vertically.</li>
<li>On screens 768px and above, the columns are side-by-side, each taking up half of the row.</li>
</ul>
<h2>2. <strong>Custom Column Widths for Medium Screens</strong></h2>
<p>The <code>.col-md-*</code> classes allow you to set custom column widths specifically for medium screens and above, which is useful for responsive design.</p>
<h3>Example: Custom Widths on Medium 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-md-4"&gt;Column 1&lt;/div&gt;
        &lt;div class="col-md-4"&gt;Column 2&lt;/div&gt;
        &lt;div class="col-md-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 takes up one-third of the row (4 out of 12 grid spaces) on medium screens and larger.</li>
<li>On smaller screens, these columns will stack vertically.</li>
</ul>
<h2>3. <strong>Responsive Layouts Across Breakpoints</strong></h2>
<p>You can combine <code>.col-md-*</code> with other classes to define different layouts at various breakpoints.</p>
<h3>Example: Layouts for Multiple 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-3"&gt;Column 1&lt;/div&gt;
        &lt;div class="col-12 col-sm-6 col-md-3"&gt;Column 2&lt;/div&gt;
        &lt;div class="col-12 col-md-3"&gt;Column 3&lt;/div&gt;
        &lt;div class="col-12 col-md-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) and larger, four columns display side-by-side.</li>
</ul>
<h2>4. <strong>Offsetting Columns on Medium Screens</strong></h2>
<p>Use <code>.offset-md-*</code> classes to add spacing to the left of columns, ideal for controlling alignment on medium screens and above.</p>
<h3>Example: Offset Columns on Medium 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-md-4 offset-md-2"&gt;Offset Column 1&lt;/div&gt;
        &lt;div class="col-md-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 medium screens (&ge;768px).</li>
<li>On smaller screens, columns stack without any offset.</li>
</ul>
<hr />
<h2>&nbsp;</h2>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More