Bootstrap 4 Tutorial

BS4 Containers

Last modified on: October 25, 2024

<h1>Bootstrap 4 Containers</h1>
<p>In Bootstrap 4, containers are the fundamental building blocks for creating responsive layouts. They provide a way to center your content and manage spacing and alignment. Bootstrap 4 offers three types of containers:</p>
<ol>
<li><strong>.container</strong>: A fixed-width container that adapts to the screen size.</li>
<li><strong>.container-fluid</strong>: A full-width container that spans the entire width of the viewport.</li>
<li><strong>.container-{breakpoint}</strong>: A responsive container that changes its maximum width based on the specified breakpoint (e.g., <code>.container-sm</code>, <code>.container-md</code>, <code>.container-lg</code>, <code>.container-xl</code>).</li>
</ol>
<h2>1. Fixed-Width Container</h2>
<p>The fixed-width container is centered on the page and has a maximum width that varies with the viewport size. 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;h1&gt;Fixed-Width Container&lt;/h1&gt;
    &lt;p&gt;This container is responsive and adapts to the size of the screen.&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Result:</h3>
<ul>
<li>On small screens, it will have a max width of 100% up to 576px.</li>
<li>On medium screens, it will have a max width of 720px.</li>
<li>On large screens, it will have a max width of 960px, and so on.</li>
</ul>
<h2>2. Fluid Container</h2>
<p>A fluid container takes up the full width of the viewport. Here&rsquo;s how to create one:</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-fluid"&gt;
    &lt;h1&gt;Fluid Container&lt;/h1&gt;
    &lt;p&gt;This container spans the entire width of the viewport.&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Result:</h3>
<ul>
<li>It will always occupy 100% width regardless of the viewport size.</li>
</ul>
<h2>3. Responsive Container</h2>
<p>A responsive container allows you to specify breakpoints at which the container's maximum width will change. For 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-md"&gt;
    &lt;h1&gt;Responsive Container&lt;/h1&gt;
    &lt;p&gt;This container adjusts its width based on the viewport size, starting from medium screens.&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Result:</h3>
<ul>
<li>It behaves like a fixed-width container on medium screens and larger, while being fluid on smaller screens.</li>
</ul>
<h2>Example: Combining Containers with Other Components</h2>
<p>Here&rsquo;s a complete example that demonstrates the use of different containers with Bootstrap components:</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 Containers 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;Welcome to My Website&lt;/h1&gt;
        &lt;p&gt;This is a fixed-width container.&lt;/p&gt;
    &lt;/div&gt;

&lt;div class="container-fluid bg-light mt-3"&gt;
        &lt;h1&gt;Fluid Container&lt;/h1&gt;
        &lt;p&gt;This container takes up the full width of the viewport.&lt;/p&gt;
    &lt;/div&gt;

&lt;div class="container-md mt-3"&gt;
        &lt;h1&gt;Responsive Container&lt;/h1&gt;
        &lt;p&gt;This container adjusts its width based on the viewport size.&lt;/p&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