Bootstrap Columns

Bootstrap Columns Overview

Every column class follows the pattern col-{breakpoint}-{size}, where breakpoint is optional and size ranges from 1 to 12. Omitting the breakpoint applies the class at all screen sizes, while including one (like md) applies it from that breakpoint upward.

Beyond sizing, Bootstrap columns support offsetting with offset-*, reordering with order-*, and nesting a new row-and-column structure inside any column to build more complex layouts.

Bootstrap Columns Example

<div class="row">
  <div class="col-md-4 offset-md-2">Offset by 2, spans 4</div>
  <div class="col-md-4">Spans 4</div>
</div>

<div class="row">
  <div class="col-md-6 order-md-2">Shown second on md+</div>
  <div class="col-md-6 order-md-1">Shown first on md+</div>
</div>

<div class="col-md-8">
  <div class="row">
    <div class="col-6">Nested A</div>
    <div class="col-6">Nested B</div>
  </div>
</div>

The offset-md-2 class shifts the first column two grid units to the right, leaving visible empty space instead of an empty column. The order utilities swap the visual order of the two columns on medium screens and up. The final example nests a fresh row and columns inside a parent column to build a sub-layout.

Top 10 Bootstrap Columns Examples

These are the column sizing and positioning classes you'll use most often beyond basic widths.

Popular Real-World Bootstrap Columns Examples

These column patterns solve real layout problems like centering, offsetting, and rearranging content.

Best Practices

• Use offset-* utilities to center or shift content instead of adding empty placeholder columns.
• Reserve order-* utilities for genuine visual reordering, not as a substitute for correct HTML source order.
• Keep nested grids to one or two levels deep for maintainability.
• Combine col-auto with flexible col columns for toolbars and label/input pairs.
• Use responsive column classes (col-md-6 col-lg-4) to progressively adjust layouts at each breakpoint.
• Remember that offsets and orders both respect breakpoint prefixes just like column sizes.
• Document non-obvious ordering decisions with a code comment so future edits don't break accessibility order.

Common Mistakes

• Using order-* to fix a layout problem that source order should have solved instead, hurting accessibility.
• Adding offsets that push the total column span past 12, causing unwanted wrapping.
• Forgetting offset classes need a breakpoint prefix to behave responsively, like offset-md-2.
• Deeply nesting rows and columns until the markup becomes difficult to reason about.
• Not testing reordered layouts with screen readers, since visual order and DOM order can diverge.
• Mixing col-auto and col in the same row without checking how leftover space distributes.

Key Takeaways

• Column classes follow col-{breakpoint}-{size} and can be combined across breakpoints.
• Offset utilities shift columns without adding empty placeholder elements.
• Order utilities change visual order via flexbox order, independent of DOM order.
• Columns can contain their own nested row/column structure for sub-layouts.
• Auto-width columns are ideal for content-driven elements like icons or buttons.