0
0
Bootsrapmarkup~5 mins

Responsive column classes in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction
Responsive column classes help your webpage look good on all screen sizes by adjusting the layout automatically.
You want your website to look good on phones, tablets, and desktops without making separate pages.
You need to arrange content side by side on big screens but stacked on small screens.
You want images or text blocks to resize and reposition smoothly when the screen size changes.
Syntax
Bootsrap
col-{breakpoint}-{number}
col means column.
breakpoint is the screen size like sm, md, lg, xl, xxl.
number is how many parts of 12 the column takes (1 to 12).
Examples
Full width column on all screen sizes.
Bootsrap
col-12
Half width column on medium and larger screens, full width on smaller.
Bootsrap
col-md-6
One third width on small screens, one quarter width on large screens.
Bootsrap
col-sm-4 col-lg-3
Sample Program
This example shows three columns that stack on small screens, become two columns on medium screens, and three columns on large screens. Colors and padding help see the columns clearly.
Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Columns 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">
    <section class="row">
      <article class="col-12 col-md-6 col-lg-4 bg-primary text-white p-3 mb-3">
        Column 1
      </article>
      <article class="col-12 col-md-6 col-lg-4 bg-success text-white p-3 mb-3">
        Column 2
      </article>
      <article class="col-12 col-md-12 col-lg-4 bg-warning text-dark p-3 mb-3">
        Column 3
      </article>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes
Bootstrap grid uses 12 parts per row, so column numbers add up to 12 or less per row.
Use col without a number for equal width columns automatically.
Always include the viewport meta tag for responsive behavior on mobile devices.
Summary
Responsive column classes adjust layout based on screen size.
Use col-{breakpoint}-{number} to control column width at different sizes.
This helps your site look good on phones, tablets, and desktops without extra work.