Quick answer: Bootstrap is a free, open source front-end framework of CSS and JavaScript that gives developers a responsive grid, ready made components (navigation bars, buttons, forms, modals, cards and more) and utility classes for spacing, layout and display. Developers use it because it speeds up building responsive pages, works consistently across browsers, is well documented and is familiar to almost every front-end developer, which makes handovers easier. The trade-offs are generic looking sites if it is not customized, extra code if you load everything, and, in the current version 4, a dependency on jQuery for interactive components.
A short background
Bootstrap began at Twitter as an internal toolkit for keeping interfaces consistent. It was released as open source in 2011 and quickly became one of the most popular projects on GitHub. Version 3 made the framework mobile first. Version 4, released as stable in January 2018, moved to Sass, rebuilt the grid on flexbox and replaced several older components with a more flexible card component. At the time of writing, the current release is in the 4.3 series.
What Bootstrap includes
The grid system
Bootstrap’s grid splits the page into 12 columns. You wrap content in a container, add rows and then columns that say how many of the 12 they should span at each screen size. For example, a column might span all 12 on phones, 6 on tablets and 4 on desktops.
Bootstrap 4 has five breakpoints:
| Breakpoint | Class infix | Minimum width |
|---|---|---|
| Extra small | (none) | below 576px |
| Small | sm | 576px |
| Medium | md | 768px |
| Large | lg | 992px |
| Extra large | xl | 1200px |
Because the grid uses flexbox, columns can share equal heights, align vertically and reorder without hacks.
Components
Bootstrap ships with styled, accessible starting points for common interface pieces: navbars, dropdowns, buttons, button groups, forms and input groups, cards, alerts, badges, breadcrumbs, pagination, modals, tooltips, popovers, carousels, collapse panels and progress bars.
Utilities
Utility classes handle small tasks without writing new CSS: margins and padding (mt-3, px-2), display (d-none, d-md-block), flexbox alignment, text alignment, colors, borders and sizing. They make quick layout adjustments easy.
Reboot and typography
Bootstrap includes Reboot, a set of base styles that smooths out differences between browsers, plus sensible defaults for headings, paragraphs, lists and tables.
JavaScript plugins
Interactive components such as modals, dropdowns, tooltips and the carousel use JavaScript. In Bootstrap 4 these depend on jQuery, and some (dropdowns, tooltips, popovers) also use the Popper.js library for positioning. The maintainers have said they plan to remove jQuery in the next major version.
Why developers use it
Speed. Common layouts and components are ready on day one. Developers spend time on what is unique to the project rather than rebuilding a responsive navbar for the hundredth time.
Responsive by default. The mobile first grid and responsive utilities make it much easier to build pages that work on phones, tablets and desktops.
Browser consistency. Bootstrap is tested across current browsers and, in version 4, Internet Explorer 10 and 11. That reduces surprises.
Documentation. The documentation is clear, with examples for every component. New team members can get productive quickly.
Familiarity and handovers. So many developers know Bootstrap that a project built with it is easier to hand over or to staff. Another developer can open the templates and immediately understand the class names.
Ecosystem. Many themes, templates, admin dashboards and UI kits are built on Bootstrap, and many CMS themes use it under the hood.
Customization through Sass. Colors, fonts, spacing, breakpoints and border radius are controlled by Sass variables. Change them once and the whole framework follows your brand.
The downsides
Sites can look generic. A default Bootstrap site is easy to recognize. Without custom styling, it can look like a template. This is a design discipline issue rather than a framework problem.
Unused code. Loading the full CSS and JavaScript bundle when you only use the grid and a few components adds weight. The fix is to compile only the parts you need.
Class heavy markup. Templates can fill up with layout and utility classes, which some developers find harder to read and maintain.
jQuery dependency. If the rest of your site does not use jQuery, loading it only for Bootstrap’s components adds extra weight.
Overriding styles. Fighting the framework’s defaults with many overrides can create messy CSS. It is better to change the Sass variables and build on top.
Using Bootstrap well
- Customize through Sass variables rather than overriding compiled CSS
- Import only the components you use, for example the grid, Reboot, buttons, forms and navbar
- Keep a design system on top of it, with your own colors, type and spacing, so the site does not look like a demo
- Load JavaScript only where it is needed, or skip Bootstrap’s JavaScript and write small scripts if you use few interactive components
- Use a build process with a tool like webpack or Gulp to compile, minify and remove unused CSS
- Keep the version consistent across the project and document it
Bootstrap compared with other approaches
CSS Grid and flexbox on their own. Modern browsers support both well, and for many layouts you no longer need a framework grid at all. Our guide to CSS Grid shows what is possible. Many developers now use CSS Grid for page layout and keep Bootstrap only for components, or skip it entirely.
Foundation. Another mature framework with a similar scope, popular for its flexibility and accessibility focus.
Bulma. A CSS only framework built on flexbox, with no JavaScript included.
Tailwind CSS. A newer utility first framework that reached version 1.0 this year. It provides small utility classes rather than ready made components.
Material design libraries. Libraries that follow Google’s material design guidelines offer a different visual language and component set.
When Bootstrap is a good fit
- Business sites, landing pages and marketing pages that need to be responsive quickly
- Internal tools, admin dashboards and customer portals, where consistency and speed matter more than unique design
- Projects where several developers will work on the code over time
- Prototypes and MVPs that need a usable interface fast
When it may not be
- Highly custom, design led sites where almost every component is unique
- Performance critical pages where every kilobyte counts and you cannot trim the framework
- Projects built around a different component system or a JavaScript framework with its own UI library
Questions to ask your developer
- Which version of Bootstrap are you using, and why?
- Are you compiling only the parts we need?
- How are you customizing it so the site looks like our brand?
- Are we loading jQuery only for Bootstrap, and is that worth it?
- How will we handle upgrades to future versions?
FAQ
Is Bootstrap free?
Yes. It is open source under the MIT license and free for commercial use.
Does Bootstrap slow down a website?
It can if you load everything. Compiling only the parts you use and removing unused CSS keeps it light.
Is Bootstrap still worth learning?
Yes. It is widely used in themes, dashboards and business sites, and knowing it makes it easier to work on existing projects.
Do I need Bootstrap if I use CSS Grid?
Not for layout. You might still use its components or utilities, or choose to write your own.
A solid starting point, not the finish line
The Bootstrap framework gives developers a fast, reliable base for responsive sites and applications. Used with care, customized to your brand and trimmed to what you need, it saves time without making the site feel generic. If you want a site built on a clean, maintainable front end, see Turn visitors into customers.
