Bootstrap 3 Tutorial

Bootstrap 3 Grid Small

Last modified on: October 28, 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="552924fa-01df-44c6-a570-13b5787da94f" 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 3 Grid Small</h3>
<p>In Bootstrap 3, the grid system allows you to create responsive layouts using a series of containers, rows, and columns. The grid is divided into 12 equal columns, and you can specify how many of those columns each element should span at different screen sizes. The "small" grid class is used to define how columns behave on small devices (&ge;576px).</p>
<h4>Small Device Grid Classes</h4>
<ul>
<li><code>.col-sm-*</code>: This class specifies how many columns an element should take up on small devices (&ge;576px).</li>
<li>Small devices can be tablets in portrait mode.</li>
</ul>
<h3>Example of Bootstrap 3 Grid Small</h3>
<p>Here&rsquo;s a detailed example demonstrating how to use the grid system for small devices:</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 3 Grid Small Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container"&gt;
    &lt;h2&gt;Bootstrap 3 Grid Small Example&lt;/h2&gt;
    
    &lt;div class="row"&gt;
        &lt;div class="col-xs-12 col-sm-6"&gt;
            &lt;div class="well"&gt;Column 1: Small (6) | Extra Small (12)&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12 col-sm-6"&gt;
            &lt;div class="well"&gt;Column 2: Small (6) | Extra Small (12)&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class="row"&gt;
        &lt;div class="col-xs-12 col-sm-4"&gt;
            &lt;div class="well"&gt;Column 3: Small (4) | Extra Small (12)&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12 col-sm-4"&gt;
            &lt;div class="well"&gt;Column 4: Small (4) | Extra Small (12)&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12 col-sm-4"&gt;
            &lt;div class="well"&gt;Column 5: Small (4) | Extra Small (12)&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Include jQuery and Bootstrap JS --&gt;
&lt;script src="https://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Explanation of the Grid Small Example Code</h3>
<ol>
<li><strong>Container</strong>: The <code>.container</code> class creates a responsive fixed-width container.</li>
<li><strong>Rows</strong>: Each <code>.row</code> class creates a horizontal group for the columns.</li>
<li><strong>Columns</strong>:
<ul>
<li>The first row has two columns that take up 6 columns each on small devices (50% width) and 12 columns each on extra small devices (100% width).</li>
<li>The second row has three columns that take up 4 columns each on small devices (33.33% width) and 12 columns each on extra small devices (100% width).</li>
</ul>
</li>
</ol>
<h3>Responsive Behavior</h3>
<ul>
<li><strong>Extra Small Devices</strong>: On screens smaller than 576px, each column takes the full width of the container (<code>col-xs-12</code>).</li>
<li><strong>Small Devices</strong>: On screens 576px and larger, the columns will adjust to take up 50% or 33.33% of the width as specified.</li>
</ul>
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More