Bootstrap

In short: A widely used CSS framework with ready-made components (buttons, forms, grid layout) — saves writing your own CSS for standard UI elements.

In more detail: Bootstrap provides a responsive 12-column grid system and pre-styled components you include via CSS classes (e.g. class="btn btn-primary"), instead of writing your own styling. Popular for quick prototypes and projects without their own design system.

In Depth

Grid system and components

A simple Bootstrap layout with a responsive grid looks like this, for example:

<div class="container">
  <div class="row">
    <div class="col-md-6">Left column</div>
    <div class="col-md-6">Right column</div>
  </div>
</div>
 
<button class="btn btn-primary">Buy</button>
<div class="alert alert-warning">Warning, please check!</div>

The grid is built “mobile-first”: by default, columns stack on top of each other, and from certain screen widths onward (sm ≥576px, md ≥768px, lg ≥992px, xl ≥1200px), they arrange side by side — without you having to write media queries yourself. Besides the grid, Bootstrap provides ready-made, consistently styled components for almost all standard UI elements: navigation bars, modals (dialog windows), form fields with validation states, cards, accordions, tooltips — each with matching JavaScript for interactivity (e.g. opening/closing a modal) included.

Historical origin

Bootstrap was originally developed internally at Twitter in 2011 (“Twitter Bootstrap”), to build internal tools faster and more consistently, and was then released as an open-source project. It struck a nerve: many teams without their own design system could quickly build professional-looking interfaces with it, without needing CSS expertise on the team — Bootstrap thereby became, for years, by far the most widely used CSS framework of all.

Pros and cons

Bootstrap’s biggest advantage (quickly getting consistent-looking pages without your own CSS) is also its best-known drawback: pages with standard Bootstrap styling often look confusingly similar (“this looks like Bootstrap” is almost an insult among designers), which usually requires additional, elaborate overriding of the default styles for an individual brand identity. It also often loads CSS/JS for components you don’t even use in a specific project, unnecessarily increasing load time (modern build tools can partly mitigate this through selective importing).

Alternatives

Modern alternatives like Tailwind CSS follow a fundamentally different approach (small, combinable utility classes like flex, p-4, text-red-500 instead of finished components) and have partly overtaken Bootstrap in newer projects, since they allow more individual design without having to start completely from scratch. Component libraries for specific frameworks (e.g. Material UI for React) have also taken market share, especially in projects that already use a particular frontend framework anyway.

Sass as a customisation layer

Bootstrap itself is written in Sass (see SASS) and provides numerous variables (colours, spacing, breakpoints) that can be overridden before compiling, to achieve a more individual look without having to manually override the generated CSS classes afterwards. In practice, though, this customisation layer is often overlooked — many projects simply use the finished CSS files directly, which contributes to the well-known “looks like Bootstrap” effect, instead of using the customisability that’s actually available.

See also: CSS, HTML