Skip to content

Responsive Frameworks — Complete Guide

DodaTech Updated 2026-06-28 5 min read

In this tutorial, you will learn about Responsive Frameworks. We cover key concepts, practical examples, and best practices to help you master this topic.

Responsive CSS frameworks like Bootstrap, Tailwind, and Foundation provide grid systems, utility classes, and components that simplify responsive development.

What You'll Learn

  • Bootstrap 5 grid and responsive utilities
  • Tailwind CSS responsive prefixes
  • Foundation responsive grid
  • Comparing framework approaches
  • Customizing breakpoints
  • When to use a framework vs custom CSS
  • Framework Accessibility considerations

Why It Matters

  • Frameworks speed up development significantly
  • Responsive grids are pre-built and tested
  • Teams benefit from standardized approaches
  • Frameworks provide cross-browser consistency

Real-World Use

  • A startup builds an MVP with Bootstrap in days
  • A design system team uses Tailwind for consistency
  • An enterprise app uses Foundation for accessibility
  • A developer uses custom CSS to avoid framework bloat
flowchart LR
  A[CSS Framework] --> B[Bootstrap]
  A --> C[Tailwind CSS]
  A --> D[Foundation]
  B --> E[Component-based]
  C --> F[Utility-first]
  D --> G[Accessibility-focused]
  B --> H[Grid + Components]
  C --> I[Responsive utilities]
  D --> J[Responsive grid + plugins]

Framework Comparison

Bootstrap 5

Bootstrap uses a 12-column grid with predefined breakpoints and component classes.

<!-- Bootstrap 5 responsive grid -->
<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Card 1</h5>
                    <p class="card-text">Responsive card that changes columns.</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Card 2</h5>
                    <p class="card-text">12 columns on mobile, 6 on tablet, 4 on desktop.</p>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Card 3</h5>
                    <p class="card-text">Automatically stacks on small screens.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap responsive utilities -->
<img src="photo.jpg" class="img-fluid" alt="Responsive image">
<div class="d-none d-md-block">Visible only on medium screens and up</div>
<div class="d-block d-md-none">Visible only on small screens</div>

Tailwind CSS

Tailwind uses utility classes with responsive prefixes (sm:, md:, lg:, xl:, 2xl:).

<!-- Tailwind responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="text-lg font-semibold">Card 1</h3>
        <p class="text-gray-600 mt-2">Responsive with Tailwind utilities.</p>
    </div>
    <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="text-lg font-semibold">Card 2</h3>
        <p class="text-gray-600 mt-2">Single column on mobile, 3 on desktop.</p>
    </div>
    <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="text-lg font-semibold">Card 3</h3>
        <p class="text-gray-600 mt-2">No custom CSS needed.</p>
    </div>
</div>

<!-- Tailwind responsive utilities -->
<img src="photo.jpg" class="w-full h-auto" alt="Responsive image">
<div class="hidden md:block">Visible on medium screens and up</div>
<div class="block md:hidden">Visible only on small screens</div>

Foundation

Foundation uses an XY grid with Flexbox-based layout and responsive visibility classes.

<!-- Foundation XY grid -->
<div class="grid-container">
    <div class="grid-x grid-margin-x">
        <div class="cell small-12 medium-6 large-4">
            <div class="card">
                <div class="card-section">
                    <h5>Card 1</h5>
                    <p>Foundation XY grid is flexbox-based.</p>
                </div>
            </div>
        </div>
        <div class="cell small-12 medium-6 large-4">
            <div class="card">
                <div class="card-section">
                    <h5>Card 2</h5>
                    <p>Responsive by default.</p>
                </div>
            </div>
        </div>
        <div class="cell small-12 medium-6 large-4">
            <div class="card">
                <div class="card-section">
                    <h5>Card 3</h5>
                    <p>12-column grid with breakpoints.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Foundation responsive visibility -->
<img src="photo.jpg" class="responsive-img" alt="Responsive image">
<div class="show-for-medium">Visible on medium screens and up</div>
<div class="hide-for-medium">Visible only on small screens</div>

Code Example: Customizing Breakpoints

// Bootstrap SCSS variable overrides
$grid-breakpoints: (
    xs: 0,
    sm: 480px,
    md: 768px,
    lg: 1024px,
    xl: 1280px,
    xxl: 1440px
);

$container-max-widths: (
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px,
    xxl: 1320px
);

// Tailwind config
module.exports = {
    theme: {
        screens: {
            'xs': '480px',
            'sm': '640px',
            'md': '768px',
            'lg': '1024px',
            'xl': '1280px',
            '2xl': '1440px',
        }
    }
};

// Foundation settings
$breakpoints: (
    small: 0,
    medium: 640px,
    large: 1024px,
    xlarge: 1200px,
    xxlarge: 1440px
);

Common Mistakes

  1. Using a framework when a few lines of CSS would suffice — Frameworks add 50-200KB of CSS. For simple sites, custom CSS is lighter.
  2. Not customizing default breakpoints — Frameworks ship with generic breakpoints. Customize them for your content.
  3. Overriding framework CSS with !important — This creates specificity wars. Use the framework's customization API (SCSS variables, Tailwind config).
  4. Ignoring unused CSS — Frameworks include many components. Use purge/tree-shaking to remove what you do not use.
  5. Using framework classes in HTML but also writing custom CSS for the same elements — Pick one approach per project.
  6. Not learning the underlying CSS — Frameworks abstract CSS. Without understanding the foundation, debugging becomes difficult.
  7. Assuming framework components are accessible by default — Many framework components need additional aria attributes and keyboard support.

Practice Questions

  1. What is the default column count in Bootstrap and Foundation? 12 columns. Tailwind uses an arbitrary grid with the grid-cols-{n} utilities.
  2. How do you make an element visible only on mobile in Tailwind? Use block md:hidden (visible on small, hidden on medium+).
  3. What is the advantage of utility-first frameworks like Tailwind? No context switching between HTML and CSS. Styles are composed directly in the markup.
  4. How do you reduce framework bundle size? Use tree-shaking/purge to remove unused classes. Import only the components you need.

FAQ

Which framework is best for responsive design?

Bootstrap is most popular for component-based sites. Tailwind offers more flexibility. Foundation has strong accessibility features. Choose based on team and project needs.

Can I use a framework with container queries?

Yes. Framework grids work at the page level (media queries), while container queries handle component-level responsiveness inside grid cells.

Do frameworks affect performance?

Yes. Frameworks add CSS weight. Bootstrap 5 is about 150KB minified. Tailwind with purge can be under 10KB for small projects.

Mini Project

Build the same responsive page layout (header, navigation, 3-column grid, sidebar, footer) three times using Bootstrap 5, Tailwind CSS, and pure CSS. Compare file sizes, development time, and maintainability. Test all three at the same breakpoints (480px, 768px, 1024px). Measure performance with Lighthouse. Document which framework you would choose for each scenario: a marketing site, an admin dashboard, and a component library.

What's Next

Continue with Lesson 24: Responsive Testing to learn how to test responsive designs effectively.

← Previous Container Queries — Complete Guide Next → Responsive Testing — Complete Guide

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Responsive Design