Bootstrap 3 Tutorial

Bootstrap 3 Grid System

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="8ee0595f-ddc6-4a8c-9b52-2d47e553fafc" 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 System</h3>
<p>The Bootstrap 3 grid system is a flexible and powerful layout mechanism based on a 12-column layout. It allows you to create responsive designs that adapt to different screen sizes. Bootstrap&rsquo;s grid system provides a variety of classes that can be used to create complex layouts with minimal effort.</p>
<h4>Key Concepts</h4>
<ol>
<li>
<p><strong>Containers</strong>: All grid layouts must be inside a container. Bootstrap provides two types of containers:</p>
<ul>
<li><code>.container</code>: Fixed-width container.</li>
<li><code>.container-fluid</code>: Full-width container that spans the entire width of the viewport.</li>
</ul>
</li>
<li>
<p><strong>Rows</strong>: Use the <code>.row</code> class to create horizontal groups of columns.</p>
</li>
<li>
<p><strong>Columns</strong>: Columns are defined with classes that indicate how many of the 12 total columns they occupy, such as <code>.col-md-4</code>, <code>.col-sm-6</code>, etc. There are specific classes for different screen sizes:</p>
<ul>
<li><strong>Extra small devices</strong>: <code>&lt;576px</code> - <code>.col-xs-*</code></li>
<li><strong>Small devices</strong>: <code>&ge;576px</code> - <code>.col-sm-*</code></li>
<li><strong>Medium devices</strong>: <code>&ge;768px</code> - <code>.col-md-*</code></li>
<li><strong>Large devices</strong>: <code>&ge;992px</code> - <code>.col-lg-*</code></li>
</ul>
</li>
</ol>
<h3>Example Structure</h3>
<p>Here&rsquo;s a basic example of how to use the Bootstrap 3 grid system to create a responsive layout.</p>
<h4>Basic Example</h4>
<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 System&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 System Example&lt;/h2&gt;
    
    &lt;div class="row"&gt;
        &lt;div class="col-xs-12 col-sm-6 col-md-4"&gt;
            &lt;div class="well"&gt;Column 1&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12 col-sm-6 col-md-4"&gt;
            &lt;div class="well"&gt;Column 2&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12 col-sm-6 col-md-4"&gt;
            &lt;div class="well"&gt;Column 3&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class="row"&gt;
        &lt;div class="col-xs-12 col-md-8"&gt;
            &lt;div class="well"&gt;Column 4&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12 col-md-4"&gt;
            &lt;div class="well"&gt;Column 5&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class="row"&gt;
        &lt;div class="col-xs-12"&gt;
            &lt;div class="well"&gt;Column 6&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 Code</h3>
<ol>
<li>
<p><strong>Container</strong>: The <code>.container</code> class wraps the entire content to create a responsive fixed-width layout.</p>
</li>
<li>
<p><strong>Rows</strong>: Each <code>.row</code> class creates a horizontal group of columns.</p>
</li>
<li>
<p><strong>Columns</strong>: The <code>.col-*</code> classes define how many columns each section will occupy across various device sizes:</p>
<ul>
<li><strong>Column 1</strong>: Takes 12 columns on extra small devices, 6 columns on small devices, and 4 columns on medium and larger devices.</li>
<li><strong>Column 2</strong>: Same as Column 1.</li>
<li><strong>Column 3</strong>: Same as Column 1.</li>
<li><strong>Column 4</strong>: Takes 12 columns on extra small devices and 8 columns on medium and larger devices.</li>
<li><strong>Column 5</strong>: Takes 12 columns on extra small devices and 4 columns on medium and larger devices.</li>
<li><strong>Column 6</strong>: Takes the full width (12 columns) on all device sizes.</li>
</ul>
</li>
</ol>
<h3>Nested Columns</h3>
<p>You can also nest columns within a row. To do this, add a new row inside a column.</p>
<h4>Nested Example</h4>
<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="row"&gt;
    &lt;div class="col-xs-12 col-md-6"&gt;
        &lt;div class="well"&gt;Column 1&lt;/div&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-xs-6"&gt;
                &lt;div class="well"&gt;Nested Column 1&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-xs-6"&gt;
                &lt;div class="well"&gt;Nested Column 2&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-12 col-md-6"&gt;
        &lt;div class="well"&gt;Column 2&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Responsive Utilities</h3>
<p>Bootstrap also provides responsive utility classes that can show or hide columns based on the viewport size. For example, <code>.hidden-xs</code>, <code>.hidden-sm</code>, <code>.hidden-md</code>, and <code>.hidden-lg</code> can be used to hide elements on specific screen sizes.</p>
<h3>Conclusion</h3>
<p>The Bootstrap 3 grid system is a powerful tool for creating responsive web layouts. By utilizing containers, rows, and columns, you can design complex layouts that adapt to various devices and screen sizes. For more advanced layouts, you can nest rows and columns as needed, and make use of responsive utility classes to customize visibility.</p>
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More