BootstrapHow-ToBeginner · 4 min read

How to Use Responsive Classes in Bootstrap for Flexible Layouts

Use Bootstrap's responsive classes by adding size-specific suffixes like -sm, -md, -lg, and -xl to utility or grid classes. These classes apply styles only on screens equal to or larger than the specified breakpoint, making your layout adapt smoothly across devices.

📐

Syntax

Bootstrap responsive classes use a base class combined with a breakpoint abbreviation to target specific screen sizes. The breakpoints are sm (small), md (medium), lg (large), xl (extra large), and xxl (extra extra large).

For example, col-md-6 means the column will take half the width on medium screens and larger, but stack full width on smaller screens.

html

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4">Content</div>
    <div class="col-sm-12 col-md-6 col-lg-8">Content</div>
  </div>
</div>

Output

Two columns: full width on small screens, half width each on medium, and 1/3 + 2/3 width on large screens.

💻

Example

This example shows a responsive grid where columns adjust their width based on screen size using Bootstrap classes.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Responsive Classes Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <div class="row">
      <div class="col-12 col-sm-6 col-md-4 bg-primary text-white p-3">Column 1</div>
      <div class="col-12 col-sm-6 col-md-4 bg-success text-white p-3">Column 2</div>
      <div class="col-12 col-sm-12 col-md-4 bg-warning text-dark p-3">Column 3</div>
    </div>
  </div>
</body>
</html>

Output

Three columns stacked on extra small screens, two columns side by side on small screens, and three equal columns side by side on medium and larger screens.

⚠️

Common Pitfalls

Not including the base class for smaller screens causes unexpected stacking.
Using the wrong breakpoint suffix can make your layout not respond as intended.
Forgetting to include the viewport meta tag can break responsiveness.

Always test on different screen sizes to confirm behavior.

html

<!-- Wrong: missing base class for extra small screens -->
<div class="col-md-6">Content</div>

<!-- Right: include base class for extra small screens -->
<div class="col-12 col-md-6">Content</div>

Output

The first div will not behave responsively on extra small screens, while the second div will be full width on extra small and half width on medium and larger screens.

📊

Quick Reference

Breakpoint	Class Suffix	Screen Width (min)
Extra small	none (e.g., col-12)	<576px
Small	sm (e.g., col-sm-6)	≥576px
Medium	md (e.g., col-md-4)	≥768px
Large	lg (e.g., col-lg-3)	≥992px
Extra large	xl (e.g., col-xl-2)	≥1200px
Extra extra large	xxl (e.g., col-xxl-1)	≥1400px

✅

Key Takeaways

Use breakpoint suffixes like -sm, -md, -lg to apply styles at specific screen widths.

Always include base classes for extra small screens to ensure proper stacking.

Test your layout on multiple screen sizes to verify responsiveness.

Include the viewport meta tag in your HTML head for responsive behavior.

Bootstrap responsive classes make layouts adapt smoothly without extra CSS.