What Is Bootstrap? A Beginner’s Guide

Mark Otto and Jacob Thornton built Bootstrap at Twitter, and the open-source front-end CSS framework now runs on 13.3% of all websites (W3Techs, 10 October 2026).

What developers get is a mobile-first 12-column grid and prebuilt components, with utility classes alongside them. That means responsive pages without writing the base CSS yourself.

The current stable line is 5.3.8, which runs without jQuery. Bootstrap 6 entered alpha on October 8, 2026 (Bootstrap blog).

What Bootstrap is and how it works

Everything Bootstrap ships runs in the browser, so it falls under front-end development and never touches server code.

The package has HTML, CSS and JavaScript in it, but the stylesheet does nearly all the work. The JavaScript is optional.

Version 3 was the rewrite that made the library responsive by default, and Bootstrap’s own history page dates the move to a mobile-first design approach to that release. Base styles aim at small screens. Larger breakpoints get layered on top.

What a Bootstrap download contains

The compiled package comes apart into separate files. A project can load all of it or just the layers it needs (file list from the 5.3.8 package on jsDelivr).

• bootstrap.css, plus a minified twin and a source map
• bootstrap-reboot.css, the reset layer, with slightly more opinionated defaults for common HTML elements
• bootstrap-grid.css holds the grid and flex helpers and nothing else
• bootstrap-utilities.css carries only the utility classes
• bootstrap.bundle.js, every plugin with Popper included
• bootstrap.js is the same set of plugins without Popper

bootstrap.css alone covers Reboot and the grid, and the utilities come along in the same request. The standalone files are there for projects that want a lighter load.

How classes style a page

You add classes to HTML elements and the stylesheet handles the rest.

Put btn and btn-primary on a button and it picks up padding, color, rounded corners and hover states. Each component pairs an HTML structure with CSS declarations and, for some, JavaScript (Wikipedia).

The downside is that the HTML gets class-heavy, since the styling lives in the markup instead of a stylesheet.

Bootstrap history, license and versions

The public release came on August 19, 2011, as open source. It shipped under the Apache License 2.0 at first and has used the MIT License since version 3.1.0 (Wikipedia). The latest stable release is 5.3.8 (August 25, 2025), and Bootstrap 6 entered alpha on October 8, 2026.

Origin at Twitter

According to Bootstrap’s history page, the project started at Twitter in mid-2010 and spent over a year as the style guide for internal tools before going public.

The early name was Twitter Blueprint. The 2011 public release was called Twitter Bootstrap (Wikipedia).

Otto and Thornton left Twitter shortly before version 2.1.2 and kept working on the project themselves. With version 3, releases started going out under the twbs organization on GitHub instead of Twitter’s.

The maintainers report more than 1.75 billion installs since 2011 (Bootstrap blog, October 2026). That figure is self-reported, so treat it as a sense of scale and not an audit.

License terms

The MIT License covers Bootstrap today, with copyright held by The Bootstrap Authors. Anything before 3.1.0 was under the Apache License 2.0 (Wikipedia).

Under it you can use, copy, modify, merge, publish, distribute, sublicense and sell copies of the software, commercial products included. The one condition is that the copyright and permission notice stay in all copies or substantial portions of it.

There’s no warranty. The software comes “as is”, and the authors carry no liability for damages (LICENSE file).

Version timeline and what is current

Dates below follow Wikipedia and the Bootstrap blog.

• Bootstrap 2 came out on January 31, 2012, with Glyphicons and new components built in. Responsive features were an optional stylesheet.
• Bootstrap 3 (August 19, 2013) was rewritten to be responsive by default and mobile-first.
• Bootstrap 4 was finalized January 18, 2018, with JavaScript plugins still built on jQuery.
• Bootstrap 5 (May 5, 2021) dropped jQuery and Internet Explorer support, and added CSS custom properties and a Utility API.
• Bootstrap 5.3 added color modes, dark mode included.
• Bootstrap 6 alpha 1 (October 8, 2026) is a preview release.

Version 5 dropping Internet Explorer cleared out a layer of cross-browser compatibility workarounds, and it made CSS custom properties usable (Bootstrap blog, 2020).

The version 6 alpha raises the browser floor by a lot. Version 5 reached back to Chrome and Firefox 60 and Safari 12. Version 6 requires Chrome and Edge 130, Firefox 132 and Safari 18 (Bootstrap blog, October 2026).

On the JavaScript side, v6 goes ESM-only. There’s no UMD bundle and no window.bootstrap global. Sass moves to the @use and @forward module system, and customization shifts from Sass variables to CSS token maps.

Bootstrap 5 stays supported, and v5.4.0 is planned before an end-of-life date is announced. The announcement also warns that details can change meaningfully before beta.

For production, install 5.3.8 and treat 6.0.0-alpha.1 as a preview. Be wary of tutorials that still treat Bootstrap 4 as current, since they describe jQuery-based plugins that version 5 removed.

How does the Bootstrap grid system work?

Each row splits into 12 template columns, and the columns reshape across six responsive breakpoints. Flexbox does the underlying work (Bootstrap docs, 5.3).

As with any grid system, the column lines are fixed and content snaps to them. You need a container to center and pad the content. Rows go inside it to wrap the columns, and the content sits in the columns.

Every breakpoint rests on a min-width media query, which means .col-sm-4 applies at small and at every size above it.

Plain .container sets a max-width at each breakpoint. The .container-md class, along with the other .container-{breakpoint} classes, stays 100% wide until that breakpoint is reached, and .container-fluid is 100% wide at every size.

The 5.3 documentation lists these default tiers.

Gutters default to 1.5rem and change with .g-*, .gx-* and .gy-* classes. Columns without a number share the row equally, so three .col elements each take a third.

The grid has limits. Nested rows should hold 12 columns or fewer, and the docs warn about flexbox quirks, such as HTML elements that cannot act as flex containers.

Custom breakpoints need a Sass recompile, and the docs require px values, not rem, em or percentages.

The version 6 alpha renames the classes, so .col-lg-6 becomes .lg:col-6 and .d-md-none becomes .md:d-none (Bootstrap blog, October 2026). Everything in the table stays valid for every 5.x project.

Which components and JavaScript plugins does Bootstrap include?

Navigation, overlays, content display and forms all get prebuilt components, and optional JavaScript plugins run the interactive ones.

Core components

Beyond those six, the wider set of Bootstrap components also takes in alerts, buttons, cards, forms and tables.

JavaScript plugins and data attributes

The plugins are optional, and Bootstrap 5 is designed to run without jQuery (Bootstrap docs).

If jQuery is already on the page, Bootstrap also registers its components as jQuery plugins, so older calls keep working. Nearly all plugins switch on through data-bs- attributes, which the docs call the preferred route. Dropdowns, popovers and tooltips depend on Popper for positioning, and the bundle file includes it.

The limits are documented. One element takes only one set of data attributes, so a single button cannot trigger both a tooltip and a modal.

There is no special fallback when JavaScript is disabled, and Bootstrap does not officially support libraries such as Prototype or jQuery UI.

Bootstrap Icons

No icon set comes by default. The team maintains a separate SVG package, the Bootstrap Icons collection, and it installs on its own.

How to install Bootstrap

The CDN route is the fastest start, and the official docs build their quickstart on it. Here is how the 5.3 docs’ CDN quick start goes.

1. Start an HTML5 page and put <meta charset="utf-8"> and the viewport tag <meta name="viewport" content="width=device-width, initial-scale=1"> in the head.
2. Link the stylesheet from jsDelivr, pinned to a version (bootstrap@5.3.8/dist/css/bootstrap.min.css), with the integrity and crossorigin attributes.
3. Add bootstrap.bundle.min.js from the same CDN at the end of the body.
4. Test with one component, such as a btn btn-primary button.

That viewport tag tells mobile browsers to size the page to the device’s viewport, and the docs include it for proper rendering and touch zooming on all devices.

A CDN suits prototypes and static pages. The docs say to use the integrity attribute so the browser verifies the file, and an alternative CDNs section has been in the docs since 5.3.2.

Projects with a build step usually go through a package manager. Bootstrap’s README lists npm, yarn, Bun, Composer and NuGet install commands for 5.3.8, and the docs add RubyGems. That route makes sense when the project compiles Bootstrap’s Sass.

Downloading the compiled CSS and JavaScript from getbootstrap.com and hosting them yourself helps when a page cannot call out to a CDN.

The most common failure is skipping the JavaScript bundle. Dropdowns, modals and tooltips then do nothing, since their plugins never load.

Pin the version, as the official CDN links do. Version 6 also changes the script tag: the alpha’s JavaScript is ESM-only, so the tag needs type="module" (Bootstrap blog, October 2026).

On WordPress, the steps differ, and there is a separate walkthrough for adding Bootstrap to a WordPress theme.

How to customize Bootstrap

Sass variables, CSS variables, color modes and the Utility API can all customize Bootstrap, and which one you reach for depends on when the change happens. Runtime tweaks need no build step, while dropping components or reshaping the grid needs Sass.

Sass variables and the import order

Sass gives the deepest control, and the docs say to leave Bootstrap’s core files untouched.

Write your own stylesheet that imports Bootstrap, then override variables before the main imports. Every Sass variable carries the !default flag, so a value you assign first wins.

The 5.3 Sass documentation sets the import order like this.

1. functions
2. your variable overrides
3. variables and variables-dark
4. your map overrides, then maps, mixins and root
5. optional parts such as Reboot and the grid, with the Utility API last

Assign a variable after the import and nothing changes in the output, because the CSS has already been generated.

Build tooling adds friction. Current Dart Sass versions print deprecation warnings when compiling Bootstrap, which the docs say can be ignored for now.

Version 5.3.3 fixed a break that forced a manual import of variables-dark, and its notes told people who already import it to keep doing so as the route for version 6. That advice didn’t hold, because the version 6 alpha announcement dropped both _variables.scss and _variables-dark.scss.

CSS variables and color modes

The compiled CSS exposes CSS variables (the custom properties behind version 5), all prefixed --bs-, so a brand color or border radius changes in the browser with no recompile.

Components carry local variables on their base class, and navbars have done so since 5.2.0. The 5.2 migration notes admit that coverage stays incomplete until Bootstrap 6.

For color modes, the data-bs-theme attribute switches between light and dark, either on the html element for a whole page or on a single component. Bootstrap ships no color mode picker, so the toggle script is yours, though the docs publish a sample.

There are limits. CSS variables don’t work inside media queries, so the breakpoint variables can’t drive them. Moving color modes to a prefers-color-scheme media query also removes per-component themes.

Custom theme colors need more than one map entry. Alerts and list groups also need the color in the text, subtle background and subtle border maps, once for light and once for dark, and the docs call it a manual process.

Run every new color pair through a color contrast check, since Sass’s color-contrast function does nothing beyond picking a readable text color. Version 5.3.8 fixed that function for WCAG 2.1 compliance (Bootstrap blog, August 2025), so themes built on older 5.3 releases deserve a recheck.

When variables do not reach far enough, a separate guide covers how to override Bootstrap CSS without touching the source.

Utility API

A Sass map called $utilities drives the Utility API, and it generates classes from a short list of options.

• property and values are required
• responsive, state and print add breakpoint, hover or focus, and print variants
• class renames the prefix, and rtl decides whether the utility stays in right-to-left builds

Reuse a utility’s key to override it, add one with map-merge, or remove one with map-remove. Every generated utility carries !important unless $enable-important-utilities is turned off.

Themes

Bootswatch publishes free third-party themes for Bootstrap, and its blog logs an update for 5.3.1 with color mode fixes.

The official Themes marketplace is gone. The 5.3.8 announcement says the team decided to sunset themes.getbootstrap.com and pulled its links from the docs.

Is Bootstrap still widely used?

Yes. Bootstrap runs on 13.3% of all websites and holds about three quarters of the market among sites with a detected CSS framework, though its reach has slipped since late 2025 (W3Techs, 10 October 2026).

Comparing the W3Techs snapshots from 7 December 2025 and 10 October 2026 gives these numbers.

• Bootstrap sits on 13.3% of all websites now, down from 15.3%
• Among sites with a detected CSS framework, its share is 74.8%, versus 75.0% before
• 82.2% of sites use none of the tracked frameworks, up from 79.7%
• Tailwind CSS reaches 0.3% of all websites in the latest snapshot

Bootstrap’s share among framework sites barely moved, so the drop in reach fits a growing slice of sites with no detected framework, not a shift toward one rival. W3Techs does not say why.

Developer surveys tell a different story. Tailwind CSS tops the State of CSS 2025 framework ranking, and 47% of respondents use no framework or skipped the question.

W3Techs scans live sites. State of CSS is a poll, and the people answering it chose to take a CSS survey in the first place.

Both can be right, which is why neither number settles what a new project should use.

Bootstrap compared with Tailwind CSS, Foundation and Bulma

Bootstrap hands you ready-made components. Tailwind CSS goes the other way with single-purpose utilities, and Foundation and Bulma sit closer to Bootstrap’s component model. For internal tools and prototypes, Bootstrap’s defaults win. A bespoke design on a build pipeline fits Tailwind CSS better.

Tailwind CSS (there’s an explainer on what Tailwind is) works differently. Its docs (version 4.3) describe stacking many single-purpose classes in the markup, and they concede that it breaks with traditional CSS practice.

There is no fixed stylesheet. Tailwind scans your files for class names and compiles only the CSS it finds.

The docs name faster edits and a stylesheet that stops growing as the payoff, and they answer repeated class lists with components and loops. The cost is a build step and class-heavy markup.

Bootstrap is the better fit for an admin panel or internal tool, and for prototypes too. If a CDN link is all the build you want, or the team expects ready-made modals, navbars and forms, that points the same way.

Tailwind CSS earns its place when the design is bespoke and Bootstrap’s look would be overridden anyway. A build pipeline already existing helps, and so does having components in a framework such as React or Vue.

On the other two, Foundation’s 6.9 release notes cite Sass cleanup and a Node 18 requirement, and Bulma 1.0 moved to CSS variables and added a dark theme. Both sit far below Bootstrap in W3Techs’ latest snapshot.

The gap is narrowing in one place. Bootstrap 6 alpha adopts Tailwind’s responsive prefix convention, and the maintainers say so in the announcement.

For a longer side-by-side, this comparison of Tailwind and Bootstrap goes deeper.

When Bootstrap is the wrong choice

Bootstrap fits poorly when the design is fully custom or the page weight is tight. A team that can’t absorb Sass tooling churn will also have a rough time.

Weight is the easy one to measure. bootstrap.min.css is 232,111 bytes before compression, against 51,789 for the grid-only file (jsDelivr package listing, 5.3.8). Importing only the Sass parts you need trims it, but the docs warn that components depend on one another.

Tooling gets annoying too, with deprecation warnings under current Dart Sass and a planned end to node-sass support in version 6 (5.3.2 release notes).

A design that restyles most components pays twice, once for Bootstrap’s CSS and again for the overrides.

Legacy lines are their own trap. Work on version 3 stopped on September 6, 2016 (Wikipedia). Customized Sass written for version 5 also needs rewriting for version 6, because the alpha no longer supports @import for customization (Bootstrap blog).

My rule of thumb is to skip Bootstrap when most components need restyling or the page budget is tight.

If layout is the only need, load the grid-only file and write the rest yourself.

Bootstrap FAQ

Is Bootstrap good for beginners?

Yes, for getting a styled page running fast. The official quickstart loads production-ready CSS and JavaScript from a CDN with no build step.

A beginner still needs the HTML and CSS underneath, because Bootstrap’s classes sit on top of them.

Can Bootstrap work with React, Vue or Angular?

Yes, since Bootstrap’s stylesheet works in any of them. The JavaScript is where it gets awkward, and the docs carry a dedicated section on usage with JavaScript frameworks.

For React, React-Bootstrap replaces Bootstrap’s JavaScript with components built from scratch as true React components, without jQuery, and it relies on the Bootstrap stylesheet.

Does Bootstrap support right-to-left languages?

Yes. Set dir="rtl" and a lang attribute such as ar on the html element, then load the RTL build, for example bootstrap.rtl.min.css.

The RTL files are generated with RTLCSS, and directional classes use start and end, so .ms-3 replaces .ml-3. Loading both directions on one page can cost performance, per the docs.

How accessible is Bootstrap out of the box?

Partly. The docs say a project’s accessibility depends largely on the author’s markup, styling and scripting, and interactive components use WAI-ARIA roles so keyboard and screen reader users can operate them.

The default palette can fall below the WCAG 2.2 contrast ratios of 4.5:1 for text and 3:1 for non-text, so test your own color pairs.

Is Bootstrap the same as bootstrapping in statistics?

No. Bootstrapping in statistics resamples a dataset with replacement to estimate uncertainty, and machine learning builds bootstrap aggregating (bagging) on it.

The framework shares only the name. It’s a CSS framework for web pages.

Should Bootstrap 3 and 4 Sites Move to Version 5.3?

Yes. Bootstrap 3 and 4 sites should move to 5.3.8, the stable line, and leave the Bootstrap 6 alpha alone for now.

Migrate in this order.

1. Rename markup, so data-toggle becomes data-bs-toggle and .btn-block gives way to .d-grid
2. Replace dropped form classes such as .form-group
3. Rebuild Sass map overrides last

Markup renames are plain search and replace. Map overrides have to be rewritten by hand, since version 5 dropped the default Sass map merges (Bootstrap migration notes).

The move stops working where Internet Explorer 10 or 11 must be supported, because version 5 dropped both.

This advice holds as of October 11, 2026. It changes once Bootstrap 5 receives an end-of-life date or 6.0 reaches beta.

• Author
• Recent Posts

Bogdan Sandu

Bogdan Sandu specializes in web and graphic design, focusing on creating user-friendly websites, innovative UI kits, and unique fonts.

Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.

Latest posts by Bogdan Sandu (see all)

• Figma Keyboard Shortcuts That Will 10x Your Speed - October 25, 2026
• What is Backend in Web Development? - September 13, 2026
• What is Frontend Development? - September 11, 2026