Bootstrap Basics

Bootstrap Basics Overview

Every Bootstrap layout follows the same pattern: a container establishes horizontal padding and a max width, a row creates a flex context, and columns divide the row into a 12-part grid. Utility classes then adjust spacing, color, and typography without custom CSS.

Bootstrap also resets default browser styling through Reboot, its lightweight CSS normalization layer, so headings, forms, and tables look consistent across browsers before you apply a single class.

Bootstrap Basics Example

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h2 class="h4">Left column</h2>
      <p class="text-secondary">Basic Bootstrap text utilities.</p>
    </div>
    <div class="col-sm-6">
      <h2 class="h4">Right column</h2>
      <p class="text-secondary">Columns stack on mobile, sit side by side on larger screens.</p>
    </div>
  </div>
</div>

The container centers the page content, the row creates the grid context, and the two col-sm-6 columns split the row evenly once the viewport reaches the sm breakpoint, stacking full width below it.

Top 10 Bootstrap Basics Examples

These are the fundamental class patterns that appear on almost every page built with Bootstrap.

Popular Real-World Bootstrap Basics Examples

These combinations show how Bootstrap basics are applied together in everyday page sections.

Best Practices

• Always nest columns inside a row, and rows inside a container or container-fluid.
• Prefer col (equal width) over manually calculated column sizes when columns should share space evenly.
• Use semantic HTML elements first, then layer Bootstrap classes on top.
• Learn the breakpoint abbreviations (sm, md, lg, xl, xxl) since they appear in almost every class.
• Use text and background utility classes instead of writing new CSS rules for common colors.
• Group related utilities logically in the class attribute so markup stays readable.
• Test basic layouts at multiple screen widths before adding more complexity.

Common Mistakes

• Placing columns directly inside a container without a row wrapper.
• Using fixed pixel widths instead of Bootstrap's column and breakpoint system.
• Forgetting that .container has a max-width and won't stretch edge to edge.
• Overriding Reboot's default styles unintentionally with global CSS resets.
• Nesting too many rows and columns for a layout that could be simpler.
• Not checking how utilities like d-none behave across different breakpoints.

Key Takeaways

• Container, row, and column are the three building blocks of every Bootstrap layout.
• Reboot normalizes default browser styling before you add any classes.
• Utility classes handle spacing, color, and display without custom CSS.
• Breakpoint abbreviations (sm, md, lg, xl, xxl) control responsive behavior.
• Mastering these basics makes every later Bootstrap topic easier to learn.