❮ Previous Next ❯

Responsive Layouts

  • Create mobile-first responsive layouts using Bootstrap breakpoints and grid.

  • What is a Responsive Layout ?

    A responsive layout is a layout that automatically adjusts its structure, size, and alignment based on the screen size of the device.

    In modern web development, a single website must work on:

    • Mobile phones

    • Tablets

    • Laptops

    • Large desktops

    • Ultra-wide screens

    Bootstrap is built specifically to solve this problem using its grid system and breakpoints.

    Why Responsive Layouts Are Mandatory Today

    Responsive layouts are not optional anymore.

    Reasons:

    • Majority of users browse on mobile devices

    • Screen sizes vary widely

    • Google prioritizes mobile-friendly websites

    • Users expect consistent experience across devices

    Bootstrap enforces responsiveness by design, not as an afterthought.

    How Bootstrap Achieves Responsive Layouts

    Bootstrap achieves responsiveness through three key mechanisms:

    1. Mobile-first CSS

    2. Breakpoints

    3. Responsive grid classes

    By default:

    • Layouts are optimized for mobile

    • Enhancements are added for larger screens

    Understanding Breakpoints in Bootstrap

    What Is a Breakpoint ?

    A breakpoint is a predefined screen width at which the layout behavior changes.

    In Bootstrap:

    • Breakpoints are based on viewport width

    • Each breakpoint represents a category of devices

    • Grid and utilities adapt at these points

    Breakpoints allow developers to say:

    “Change the layout when the screen reaches this size.”

    Bootstrap Breakpoints Overview

    Bootstrap defines six standard breakpoints:

    BreakpointNameTypical Devices
    xsExtra smallMobile phones
    smSmallLarge phones
    mdMediumTablets
    lgLargeLaptops
    xlExtra largeDesktops
    xxlExtra extra largeLarge monitors

    These breakpoints are used throughout:

    • Grid system

    • Utility classes

    • Display controls

    • Spacing and alignment

  • Breakpoints Explained One by One

    xs - Extra Small (Default)

    • Applies to very small devices

    • No explicit class prefix required

    • This is the default layout

Extra Small – Default Layout

xs is the default Bootstrap breakpoint. If no breakpoint is specified, Bootstrap applies styles to extra-small (mobile) devices automatically. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>XS Breakpoint</title>

  <!-- Bootstrap CSS CDN -->
  <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 text-center">
      <div class="col-12 bg-primary text-white p-3">
        Full width on mobile
      </div>
    </div>
  </div>

</body>
</html>

  • If no breakpoint is specified, Bootstrap assumes xs.

    sm – Small Screens

    • Applies to large mobile devices

    • Used when layout needs slight adjustment from mobile

Small Screens – Large Mobiles

col-sm-6 creates two equal columns starting from small screens and above, while stacking them vertically on extra-small (mobile) devices. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SM Breakpoint</title>

  <!-- Bootstrap CSS CDN -->
  <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 text-center">
      <div class="col-sm-6 bg-primary text-white p-3">
        Two columns on small screens and above
      </div>
      <div class="col-sm-6 bg-success text-white p-3">
        Second Column
      </div>
    </div>
  </div>

</body>
</html>

  • Behavior:

    • Mobile: stacked

    • Small screens and above: side-by-side

    md – Medium Screens

    • Typically tablets

    • Very commonly used breakpoint

Medium Screens – Tablets

col-md-4 creates a three-column layout starting at medium (tablet) screens and above, while stacking columns on smaller devices. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MD Breakpoint</title>

  <!-- Bootstrap CSS CDN -->
  <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 text-center">
      <div class="col-md-4 bg-primary text-white p-3">
        Column 1
      </div>
      <div class="col-md-4 bg-success text-white p-3">
        Column 2
      </div>
      <div class="col-md-4 bg-danger text-white p-3">
        Column 3
      </div>
    </div>
  </div>

</body>
</html>

  • Behavior:

    • Mobile and small: stacked

    • Medium and above: multi-column

    lg – Large Screens

    • Laptops and standard desktops

    • Used for wider layouts

Large Screens – Laptops & Desktops

col-lg-3 applies the sidebar width starting at large (laptop/desktop) screens and above, while stacking columns on smaller devices. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LG Breakpoint</title>

  <!-- Bootstrap CSS CDN -->
  <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 text-center">
      <div class="col-lg-3 bg-secondary text-white p-3">
        Sidebar appears at laptop size
      </div>
      <div class="col-lg-9 bg-primary text-white p-3">
        Main Content
      </div>
    </div>
  </div>

</body>
</html>

  • xl – Extra Large Screens

    • Large desktops

    • Used for content-heavy layouts

Extra Large Screens – Large Desktops

col-xl-2 applies a narrow sidebar layout on extra-large (large desktop) screens and stacks columns on smaller devices. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>XL Breakpoint</title>

  <!-- Bootstrap CSS CDN -->
  <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 text-center">
      <div class="col-xl-2 bg-dark text-white p-3">
        Narrow sidebar on wide screens
      </div>
      <div class="col-xl-10 bg-primary text-white p-3">
        Main Content
      </div>
    </div>
  </div>

</body>
</html>

  • xxl – Extra Extra Large Screens

    • Very large and ultra-wide displays

    • Useful for dashboards and enterprise apps

Extra Extra Large – Ultra-Wide Screens

col-xxl-1 applies column sizing on ultra-wide (extra extra large) screens, ideal for dashboards and enterprise-level layouts. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>XXL Breakpoint</title>

  <!-- Bootstrap CSS CDN -->
  <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 text-center">
      <div class="col-xxl-1 bg-dark text-white p-3">
        Ultra-wide optimization
      </div>
      <div class="col-xxl-11 bg-primary text-white p-3">
        Dashboard Content
      </div>
    </div>
  </div>

</body>
</html>

  • Responsive Columns in Practice

    Bootstrap allows multiple breakpoint rules on the same column.

Fully Responsive Column (Multiple Breakpoints)

The column is full-width on mobile, 50% on small screens, 33% on medium screens, and 25% on large screens and above. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fully Responsive Layout</title>

  <!-- Bootstrap CSS CDN -->
  <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 text-center">
      <div class="col-12 col-sm-6 col-md-4 col-lg-3 bg-primary text-white p-3">
        Responsive Column
      </div>
    </div>
  </div>

</body>
</html>

  • Explanation:

    • Mobile: full width

    • Small: half width

    • Medium: one-third

    • Large: one-fourth

    This is how professional responsive layouts are built.

    Responsive Layout Patterns

    Stacked to Side-by-Side Layout

Stacked to Side-by-Side Responsive Layout

Columns stack vertically on small screens and become side-by-side (50% width each) from medium screens and above using col-md-6. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stacked to Side-by-Side Layout</title>

  <!-- Bootstrap CSS CDN -->
  <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 text-center">
      <div class="col-md-6 bg-primary text-white p-3">
        Left
      </div>
      <div class="col-md-6 bg-success text-white p-3">
        Right
      </div>
    </div>
  </div>

</body>
</html>

  • Behavior:

    • Mobile: stacked

    • Tablet and above: two columns

Responsive Sidebar Layout (3 + 9 Grid)

Creates a 25% sidebar and 75% main content layout on large screens and above, while stacking them vertically on smaller devices. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sidebar Layout</title>

  <!-- Bootstrap CSS CDN -->
  <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 text-center">
      <div class="col-lg-3 bg-secondary text-white p-3">
        Sidebar
      </div>
      <div class="col-lg-9 bg-primary text-white p-3">
        Main Content
      </div>
    </div>
  </div>

</body>
</html>

  • Behavior:

    • Mobile: stacked

    • Laptop and above: sidebar + content

Responsive Dashboard Layout (Cards Grid)

Creates a responsive dashboard where cards stack on mobile, show 2 per row on medium screens, and 4 per row on large screens and above. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard Layout</title>

  <!-- Bootstrap CSS CDN -->
  <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 text-center">
      <div class="col-md-6 col-lg-3 bg-primary text-white p-3 mb-3">
        Card 1
      </div>
      <div class="col-md-6 col-lg-3 bg-success text-white p-3 mb-3">
        Card 2
      </div>
      <div class="col-md-6 col-lg-3 bg-warning text-dark p-3 mb-3">
        Card 3
      </div>
      <div class="col-md-6 col-lg-3 bg-danger text-white p-3 mb-3">
        Card 4
      </div>
    </div>
  </div>

</body>
</html>

  • Important Mobile-First Rule

    Bootstrap follows mobile-first logic.

    This means:

    • Smaller breakpoints apply first

    • Larger breakpoints override them

    Rule:

    xs → sm → md → lg → xl → xxl

    Always design from small to large, never the reverse.

    Common Mistakes

    1. Designing only for desktop

    2. Ignoring mobile behavior

    3. Overusing fixed widths

    4. Skipping breakpoint planning

    5. Using too many breakpoints unnecessarily

    Responsive design is about clarity, not complexity.

❮ Previous Next ❯