0
0
Bootsrapmarkup~5 mins

Column stacking on mobile in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Column stacking helps your website look good on small screens by placing columns one on top of another instead of side by side.

When you want your website to be easy to read on phones.
When you have multiple columns that look too small on narrow screens.
When you want to make sure buttons or images don't get squeezed on mobile.
When you want a simple layout on desktop but a vertical layout on mobile.
When you want to improve user experience for mobile visitors.
Syntax
Bootsrap
<div class="row">
  <div class="col-md-6 col-12">Column 1</div>
  <div class="col-md-6 col-12">Column 2</div>
</div>

Use col-md-6 to make columns side by side on medium and larger screens.

Use col-12 to make columns full width and stack on small screens.

Examples
Three columns side by side on large screens, stacked on mobile.
Bootsrap
<div class="row">
  <div class="col-lg-4 col-12">Column 1</div>
  <div class="col-lg-4 col-12">Column 2</div>
  <div class="col-lg-4 col-12">Column 3</div>
</div>
Two columns with different widths on small screens and stacked on extra small screens.
Bootsrap
<div class="row">
  <div class="col-sm-8 col-12">Wide column</div>
  <div class="col-sm-4 col-12">Narrow column</div>
</div>
Columns side by side on all screen sizes, no stacking.
Bootsrap
<div class="row">
  <div class="col-6">Half width always</div>
  <div class="col-6">Half width always</div>
</div>
Sample Program

This example uses Bootstrap classes to create two columns that sit side by side on medium and larger screens, but stack vertically on smaller screens like phones.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Column Stacking Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="container mt-4">
    <h1>Column Stacking on Mobile</h1>
    <p>Resize the browser window to see columns stack on small screens.</p>
    <div class="row border p-3">
      <div class="col-md-6 col-12 bg-primary text-white p-3">Column 1</div>
      <div class="col-md-6 col-12 bg-secondary text-white p-3">Column 2</div>
    </div>
  </main>
</body>
</html>
OutputSuccess
Important Notes

The stacking happens because col-12 makes columns full width on small screens.

Time complexity is not relevant here, but remember that responsive design improves user experience.

Common mistake: forgetting to add col-12 for small screens, so columns stay side by side and look cramped.

Summary

Use Bootstrap grid classes with different breakpoints to control column stacking.

col-12 makes columns stack on small screens.

Combine with larger breakpoint classes like col-md-6 for side-by-side on bigger screens.