Using React-Bootstrap’s Responsive Grid with Row and Col

Problem: you need a layout that shifts from a single column on phones to two columns on tablets and three columns on desktops without writing custom media queries.

Solution: use breakpoint props on Col

React‑Bootstrap’s Row and Col components map directly to Bootstrap’s flexbox grid. By passing breakpoint‑specific props (xs, sm, md, lg, xl) you control how many grid columns each element occupies at each viewport width.

Worked example

import { Container, Row, Col } from 'react-bootstrap';

function ResponsiveLayout() {
  return (
    
      
        
          Column 1
        
        
          Column 2
        
        
          Column 3
        
      
    
  );
}
export default ResponsiveLayout;

Explanation:

• xs={12} makes each column take the full width on extra‑small screens (phones).
• sm={6} gives each column half the width (≥576 px), resulting in two columns.
• md={4} gives each column one‑third width (≥768 px), producing three columns.
• The Container adds Bootstrap’s default max‑width and horizontal padding; you can set container=false for a full‑width layout.
• To change the gutter between columns, add the gutter prop to Row (e.g., gutter={3}).

Limits and common mistakes

Limitations

• The grid is fluid by default; if you need a fixed‑width layout you must wrap content in a Container with a specific breakpoint (Container sm) or set fluid={false}.
• Only integer values 0‑5 are accepted for gutter; other values fall back to the default.

Common mistakes

• Omitting xs when you want a specific layout on phones causes columns to stack vertically on extra‑small screens because the xs breakpoint is the default.
• Applying inline styles like width: 50% or custom flex properties conflicts with the generated col-* classes and can break responsiveness.
• Nesting a Col directly inside another Col without an intermediate Row leads to unexpected spacing; always nest Row → Col → (optional) Row → Col.
• Using Container fluid when you actually need a constrained max‑width can cause unintended horizontal scrolling on large screens.

Verification: resize the browser window and observe the column count change at the breakpoints you set. Open DevTools, inspect a Col element, and confirm the class list includes the expected col-xs-12 col-sm-6 col-md-4 (or the equivalents you supplied). Comparing the output to a plain Bootstrap HTML snippet with the same column classes should show visual parity.