• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Stacked / Horizontal

← Previous Next →

What is Bootstrap 4 Stacked / Horizontal Layout?

The Bootstrap 4 Stacked / Horizontal layout refers to how columns are arranged vertically or horizontally depending on the screen size and responsive classes used. By default, columns stack vertically on smaller devices and display horizontally side by side on larger screens. This behavior ensures content is readable and accessible across all devices without requiring custom CSS.

Using stacked or horizontal layouts is essential for creating responsive designs where the same HTML structure adapts to multiple screen sizes automatically.

What is Stacked Layout?

A stacked layout occurs when columns are displayed one below the other, typically on smaller screens. This stacking ensures that content does not become too narrow or cramped, improving readability.

Example:

<div class="container">
  <div class="row">
    <div class="col-12 bg-primary text-white p-3 mb-2">Column 1</div>
    <div class="col-12 bg-success text-white p-3 mb-2">Column 2</div>
    <div class="col-12 bg-warning text-white p-3 mb-2">Column 3</div>
  </div>
</div>

  • Each column uses .col-12, taking the full width of the row.

  • Columns appear stacked vertically on all devices.

  • Padding and margin utilities like .p-3 and .mb-2 ensure proper spacing.

What is Horizontal Layout?

A horizontal layout occurs when columns are displayed side by side. Using responsive classes, you can define when the columns switch from stacked to horizontal.

Example:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-4 bg-primary text-white p-3 mb-2">Column 1</div>
    <div class="col-12 col-md-4 bg-success text-white p-3 mb-2">Column 2</div>
    <div class="col-12 col-md-4 bg-warning text-white p-3 mb-2">Column 3</div>
  </div>
</div>

  • On extra-small and small screens, columns stack vertically.

  • On medium and larger screens, columns display horizontally side by side.

  • This ensures content remains responsive and accessible.

Combining Stacked and Horizontal Layouts

Bootstrap 4 allows you to combine stacked and horizontal layouts for different sections of a webpage. You can create a layout that stacks content on mobile devices but switches to horizontal on tablets or desktops.

Example:

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-lg-3 bg-primary text-white p-3 mb-2">Column 1</div>
    <div class="col-12 col-sm-6 col-lg-3 bg-success text-white p-3 mb-2">Column 2</div>
    <div class="col-12 col-sm-6 col-lg-3 bg-warning text-white p-3 mb-2">Column 3</div>
    <div class="col-12 col-sm-6 col-lg-3 bg-danger text-white p-3 mb-2">Column 4</div>
  </div>
</div>

  • Columns stack vertically on extra-small screens.

  • They appear in two columns per row on small devices.

  • On large devices, they appear four columns in a row.

  • This combination ensures flexible, responsive design across devices.

Using Flexbox Utilities with Stacked / Horizontal Layouts

Bootstrap 4 uses Flexbox under the hood, allowing precise control over alignment:

  • Horizontal alignment: .justify-content-start, .justify-content-center, .justify-content-end, .justify-content-around

  • Vertical alignment: .align-items-start, .align-items-center, .align-items-end

Example:

<div class="container" style="height:200px;">
  <div class="row justify-content-center align-items-center">
    <div class="col-6 bg-primary text-white p-3">Centered Column</div>
  </div>
</div>

  • The column is centered both horizontally and vertically.

  • Flexbox ensures proper alignment without writing additional CSS.

Responsive Stacked / Horizontal Layout Tips

  1. Use stacked columns for small screens to maintain readability.

  2. Switch to horizontal columns using responsive classes like .col-md-4 or .col-lg-3.

  3. Combine stacked and horizontal layouts for different sections of a webpage.

  4. Use margin and padding utilities to maintain consistent spacing.

  5. Test the layout across multiple devices to ensure responsiveness.

Summary of the Tutorial

This tutorial explained the Bootstrap 4 Stacked / Horizontal layout, focusing on how columns can stack vertically or display horizontally depending on screen size. You learned how to create stacked layouts for small devices, horizontal layouts for larger screens, and how to combine both for flexible designs. Flexbox utilities allow precise alignment, making your layouts visually consistent and responsive. Mastering stacked and horizontal layouts is essential for creating adaptive, user-friendly web pages using Bootstrap 4.

Practice Questions

  1. Create a row with three columns stacked vertically using .col-12.

  2. Make a horizontal layout where three columns are side by side on medium screens using .col-12 col-md-4.

  3. Combine stacked and horizontal layouts for four columns using .col-12 col-sm-6 col-lg-3.

  4. Use Flexbox utilities to center a column horizontally inside a row.

  5. Use Flexbox utilities to center a column vertically inside a row with fixed height.

  6. Create a row where two columns are stacked on small screens but side by side on large screens.

  7. Add background colors to each column to visually check stacked and horizontal alignment.

  8. Apply .p-3 padding to all columns in a stacked layout.

  9. Create a responsive row with columns that stack on mobile but display in three equal columns on tablets.

  10. Build a layout with five columns where the first three stack on small devices and all five appear in a horizontal row on extra-large screens.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top