Bootstrap 3 Tutorial

Bootstrap 3 Stacked/Horizontal

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="763e2ddb-32ba-4e6f-866f-55dab49c5c85" 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 Stacked and Horizontal Layouts</h3>
<p>Bootstrap 3 provides flexibility in how you can arrange your content using the grid system. You can create both stacked and horizontal layouts using the grid classes. This guide will walk you through the creation of both types of layouts, along with detailed examples.</p>
<h4>Stacked Layout</h4>
<p>A stacked layout is where columns stack vertically on smaller screens. This is the default behavior of Bootstrap&rsquo;s grid system. Columns will take the full width of their parent container on extra small screens.</p>
<h5>Example of Stacked Layout</h5>
<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 Stacked Layout&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;Stacked Layout Example&lt;/h2&gt;
    
    &lt;div class="row"&gt;
        &lt;div class="col-xs-12"&gt;
            &lt;div class="well"&gt;Column 1&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12"&gt;
            &lt;div class="well"&gt;Column 2&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12"&gt;
            &lt;div class="well"&gt;Column 3&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 Stacked Layout Code</h3>
<ol>
<li><strong>Container</strong>: The <code>.container</code> class is used to create a responsive fixed-width container.</li>
<li><strong>Row</strong>: The <code>.row</code> class creates a horizontal group for the columns.</li>
<li><strong>Columns</strong>: Each column uses <code>.col-xs-12</code> to stack vertically, taking full width on extra small devices.</li>
</ol>
<h4>Horizontal Layout</h4>
<p>A horizontal layout places columns side-by-side in a single row. You can create a horizontal layout by defining column sizes that add up to 12 within a <code>.row</code>.</p>
<h5>Example of Horizontal Layout</h5>
<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 Horizontal Layout&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;Horizontal Layout Example&lt;/h2&gt;
    
    &lt;div class="row"&gt;
        &lt;div class="col-xs-12 col-md-4"&gt;
            &lt;div class="well"&gt;Column 1&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12 col-md-4"&gt;
            &lt;div class="well"&gt;Column 2&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12 col-md-4"&gt;
            &lt;div class="well"&gt;Column 3&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 Horizontal Layout Code</h3>
<ol>
<li><strong>Container</strong>: Similar to the stacked example, a <code>.container</code> is used for layout.</li>
<li><strong>Row</strong>: The <code>.row</code> class groups the columns horizontally.</li>
<li><strong>Columns</strong>: Each column uses <code>.col-xs-12</code> for full width on extra small devices and <code>.col-md-4</code> for one-third width on medium and larger devices. This creates a horizontal layout on medium-sized screens and larger.</li>
</ol>
<h3>Combining Stacked and Horizontal Layouts</h3>
<p>You can mix stacked and horizontal layouts within the same page by using responsive classes to control how columns behave on different screen sizes.</p>
<h5>Combined Example</h5>
<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 Combined Layout&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;Combined Stacked and Horizontal Layout&lt;/h2&gt;
    
    &lt;div class="row"&gt;
        &lt;div class="col-xs-12 col-md-6"&gt;
            &lt;div class="well"&gt;Horizontal Column 1&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12 col-md-6"&gt;
            &lt;div class="well"&gt;Horizontal Column 2&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;Stacked Column 3&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-12"&gt;
            &lt;div class="well"&gt;Stacked Column 4&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

Web Technology View More