BootstrapHow-ToBeginner · 4 min read

How to Use col-sm, col-md, col-lg, col-xl in Bootstrap Grid

In Bootstrap, use col-sm, col-md, col-lg, and col-xl classes to define how many columns an element should span on small, medium, large, and extra-large screens respectively. These classes help create responsive layouts that adjust automatically based on the device's screen width.

📐

Syntax

Bootstrap grid classes follow the pattern col-{breakpoint}-{number}, where:

col: Defines a column
{breakpoint}: Screen size category (sm, md, lg, xl)
{number}: Number of columns to span (1 to 12)

Example: col-md-6 means the element takes 6 columns on medium screens and above.

html

<div class="row">
  <div class="col-sm-4">Small 4 cols</div>
  <div class="col-md-6">Medium 6 cols</div>
  <div class="col-lg-2">Large 2 cols</div>
</div>

Output

A row with three columns sized differently on small, medium, and large screens.

💻

Example

This example shows a responsive layout where columns change width based on screen size using col-sm, col-md, col-lg, and col-xl.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Responsive Columns 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-sm-12 col-md-6 col-lg-4 col-xl-3 bg-primary text-white p-3">Column 1</div>
      <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3 bg-secondary text-white p-3">Column 2</div>
      <div class="col-sm-12 col-md-12 col-lg-4 col-xl-6 bg-success text-white p-3">Column 3</div>
    </div>
  </div>
</body>
</html>

Output

Three colored columns that stack on small screens and adjust widths on medium, large, and extra-large screens.

⚠️

Common Pitfalls

Common mistakes when using col-sm, col-md, col-lg, and col-xl include:

Not wrapping columns inside a .row container, which breaks the layout.
Using column numbers that exceed 12 in a single row, causing wrapping or layout issues.
Forgetting that classes apply from their breakpoint and up, so smaller screen sizes may not behave as expected if not specified.

html

<!-- Wrong: columns not inside a row -->
<div class="col-sm-6">Half width</div>
<div class="col-sm-6">Half width</div>

<!-- Right: columns inside a row -->
<div class="row">
  <div class="col-sm-6">Half width</div>
  <div class="col-sm-6">Half width</div>
</div>

Output

The first example breaks layout; the second example shows two equal columns side by side.

📊

Quick Reference

Class	Screen Size	Description
col-sm-{n}	≥576px	Small devices like phones in landscape mode
col-md-{n}	≥768px	Medium devices like tablets
col-lg-{n}	≥992px	Large devices like desktops
col-xl-{n}	≥1200px	Extra large devices like large desktops

✅

Key Takeaways

Use col-sm, col-md, col-lg, and col-xl to control column widths on different screen sizes.

Always place columns inside a .row to ensure proper alignment and spacing.

Column numbers must add up to 12 or less per row to avoid wrapping issues.

Classes apply from their breakpoint and up, so specify smaller breakpoints if you want control on small screens.

Test your layout on different screen sizes to confirm responsiveness.