Building Responsive Layouts with React‑Bootstrap’s Grid System

Use the Grid to get fluid, breakpoint‑aware columns

React‑Bootstrap’s Row and Col components implement a flex‑based 12‑column grid. By passing breakpoint props (xs, sm, md, lg, xl) you can define how many columns a element should span and whether it should be offset, all without writing custom media queries.

Worked example: a card that shifts from full‑width on phones to two‑column on tablets

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

function ResponsiveCards() {
  return (
    
       {/* g-4 adds a 1.5rem gutter */}
        
          
            
              Feature A
              Short description that stacks on small screens.
            
          
        
        
          
            
              Feature B
              Short description that stacks on small screens.
            
          
        
      
    
  );
}
export default ResponsiveCards;

What happens:

• On extra‑small (xs) viewports each Col gets span:12 → full width, stacking vertically.
• At the medium (md) breakpoint and above the props change to span:6 → each card occupies half the row, sitting side‑by‑side.
• The Container adds horizontal padding and a max‑width that prevents the grid from touching the viewport edges.

How the mechanism works

Row renders a div with display:flex. Col translates the breakpoint props into CSS classes like col-12 and col-md-6 (React‑Bootstrap v2 uses flex‑based utility classes). The browser applies those classes, which set flex-basis and margin-left for offsets, giving the desired layout.

Limits and common mistakes

Even though the grid is powerful, a few pitfalls can break the layout:

1. Mixing inline widths or custom flex rules – Adding style={{ width: '50%' }} or custom flex properties on the same Col conflicts with the grid’s utility classes, often causing unexpected wrapping or overflow.
2. Forgetting to reset a prop at a higher breakpoint – The grid follows a mobile‑first approach. If you set xs={{ span: 8 }} but never override it for md, the column will stay 8‑column wide on medium and large screens, potentially leaving too much empty space.
3. Omitting the Container – Without it the grid extends edge‑to‑edge. On narrow viewports this can cause horizontal scroll because the gutters are not offset by the container’s padding.
4. Incorrect nesting – Placing a Row inside a Col is fine, but you must not add extra padding or margin to the inner row that would double the gutter. Use the gutter utility (g-*) on the inner row only if you need a different spacing.

Practical verification

To confirm the behavior:

1. Render the example above in a local React app with React‑Bootstrap installed.
2. Open the browser’s developer tools and inspect a Col element. You should see classes such as col-12 col-md-6.
3. Resize the viewport past the md breakpoint (≈768px) and observe the cards switch from stacked to side‑by‑side.
4. For nesting, place a Row with two Col xs={6} inside an outer Col and verify that the inner columns do not overflow the outer column’s bounds.