Bootstrap 4 Tutorial

BS4 Grid Basic

Last modified on: October 25, 2024

<h1>Bootstrap 4 Grid System</h1>
<p>Bootstrap 4's grid system is a powerful layout mechanism that allows developers to create responsive and flexible web designs. It utilizes a series of containers, rows, and columns to structure your content. The grid is based on a 12-column layout, enabling you to customize the layout according to your needs.</p>
<h2>Key Concepts of the Bootstrap 4 Grid System</h2>
<ol>
<li>
<p><strong>Containers</strong>: A container holds the rows and columns. It can be either a fixed-width (<code>.container</code>) or full-width (<code>.container-fluid</code>).</p>
</li>
<li>
<p><strong>Rows</strong>: A row is created with the <code>.row</code> class and is used to group columns. Rows are necessary for creating columns within a container.</p>
</li>
<li>
<p><strong>Columns</strong>: Columns are defined using the <code>.col-*</code> classes, where <code>*</code> represents the number of columns you want to span. Bootstrap allows you to specify different column sizes for different breakpoints (e.g., <code>.col-sm-</code>, <code>.col-md-</code>, <code>.col-lg-</code>, <code>.col-xl-</code>).</p>
</li>
</ol>
<h2>1. Basic Grid Structure</h2>
<p>Here&rsquo;s a simple example of the Bootstrap 4 grid system with three equal 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"&gt;
            &lt;h2&gt;Column 1&lt;/h2&gt;
            &lt;p&gt;Content for column 1.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col"&gt;
            &lt;h2&gt;Column 2&lt;/h2&gt;
            &lt;p&gt;Content for column 2.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col"&gt;
            &lt;h2&gt;Column 3&lt;/h2&gt;
            &lt;p&gt;Content for column 3.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Result:</h3>
<ul>
<li>This example will create three equal-width columns that adjust based on the screen size.</li>
</ul>
<h2>2. Responsive Columns</h2>
<p>You can customize the number of columns for different screen sizes. For instance, here&rsquo;s how to create a layout that has one column on extra small devices and three columns on medium and larger 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;div class="container"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-12 col-md-4"&gt;
            &lt;h2&gt;Column 1&lt;/h2&gt;
            &lt;p&gt;This column takes full width on small screens and 1/3 width on medium and larger screens.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-12 col-md-4"&gt;
            &lt;h2&gt;Column 2&lt;/h2&gt;
            &lt;p&gt;This column takes full width on small screens and 1/3 width on medium and larger screens.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-12 col-md-4"&gt;
            &lt;h2&gt;Column 3&lt;/h2&gt;
            &lt;p&gt;This column takes full width on small screens and 1/3 width on medium and larger screens.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Result:</h3>
<ul>
<li>On small screens (less than 768px), each column takes 100% width. On medium screens and larger, they will take up one-third of the available width.</li>
</ul>
<h2>3. Nesting Columns</h2>
<p>Bootstrap 4 also allows you to nest columns within a column. Here&rsquo;s an example:</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;h2&gt;Column 1&lt;/h2&gt;
            &lt;p&gt;Content for column 1.&lt;/p&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-6"&gt;
                    &lt;h4&gt;Nested Column 1&lt;/h4&gt;
                    &lt;p&gt;Content for nested column 1.&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="col-6"&gt;
                    &lt;h4&gt;Nested Column 2&lt;/h4&gt;
                    &lt;p&gt;Content for nested column 2.&lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
            &lt;h2&gt;Column 2&lt;/h2&gt;
            &lt;p&gt;Content for column 2.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Result:</h3>
<ul>
<li>The first column has two nested columns that each take half the width of the parent column.</li>
</ul>
<h2>Example: Complete Bootstrap 4 Grid System</h2>
<p>Here&rsquo;s a full example that demonstrates the Bootstrap 4 grid system in action:</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 4 Grid System Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="container mt-5"&gt;
        &lt;h1&gt;Bootstrap 4 Grid System&lt;/h1&gt;
        
        &lt;div class="row"&gt;
            &lt;div class="col-12 col-md-4"&gt;
                &lt;h2&gt;Column 1&lt;/h2&gt;
                &lt;p&gt;This column takes full width on small screens and 1/3 width on medium and larger screens.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-12 col-md-4"&gt;
                &lt;h2&gt;Column 2&lt;/h2&gt;
                &lt;p&gt;This column takes full width on small screens and 1/3 width on medium and larger screens.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-12 col-md-4"&gt;
                &lt;h2&gt;Column 3&lt;/h2&gt;
                &lt;p&gt;This column takes full width on small screens and 1/3 width on medium and larger screens.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;

&lt;div class="row mt-3"&gt;
            &lt;div class="col-md-8"&gt;
                &lt;h2&gt;Column 1&lt;/h2&gt;
                &lt;p&gt;Content for column 1.&lt;/p&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-6"&gt;
                        &lt;h4&gt;Nested Column 1&lt;/h4&gt;
                        &lt;p&gt;Content for nested column 1.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="col-6"&gt;
                        &lt;h4&gt;Nested Column 2&lt;/h4&gt;
                        &lt;p&gt;Content for nested column 2.&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;
                &lt;h2&gt;Column 2&lt;/h2&gt;
                &lt;p&gt;Content for column 2.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>&nbsp;</h3>

Web Technology View More