Bootstrap is a free, open-source toolkit of pre-written CSS and a little JavaScript for building websites quickly. It gives you a responsive layout grid and ready-made pieces such as buttons, navigation bars, forms, cards and pop-up dialogs, all styled to work together. It was created at Twitter by Mark Otto and Jacob Thornton and released publicly in 2011.
How Bootstrap is used on a page
You include Bootstrap's stylesheet and then add its class names to your HTML. class="btn btn-primary" turns a link into a styled blue button. A row of col-md-4 elements inside a row gives you three equal columns on tablets and up that stack vertically on phones, using Bootstrap's 12-column grid system. Interactive parts like dropdowns, collapsing mobile menus and modals come from its JavaScript bundle. Since version 5 it no longer depends on jQuery.
Developers customise it by changing its Sass variables (brand colour, corner radius, font) and compiling their own copy, or with CSS variables in newer releases.
An example: an accountant's site in an afternoon
A freelance developer builds a site for a two-person accounting practice. Using Bootstrap's navbar, a hero section, a three-column services row and a contact form, the layout works on phones without any custom layout code. Changing the primary colour variable to the firm's navy restyles every button and link at once.
Bootstrap compared with Tailwind
Bootstrap hands you finished components with a recognisable look. Tailwind CSS hands you small single-purpose classes and leaves the design to you. Bootstrap is faster for admin panels and internal tools where a standard look is fine; Tailwind tends to win when a brand needs a distinctive design without fighting default styles.
Is it right for a small-business site?
Bootstrap is stable, well documented and still widely used, so inheriting a Bootstrap site is not a problem. The common complaint is sameness: an untouched Bootstrap site looks like thousands of others. If your developer uses it, ask that the theme variables are customised, not just the logo swapped.
Common Bootstrap mistakes
- Loading the whole library for a few buttons. Unused CSS and JavaScript still have to download.
- Overriding styles with endless custom rules instead of setting the theme variables, which leads to specificity battles.
- Mixing major versions. Class names changed between Bootstrap 3, 4 and 5, so copied snippets may silently break.
- Nesting grids too deeply, which makes simple layouts hard to change later.
Related terms
- Tailwind CSS: the utility-first alternative.
- Grid system: the column layout idea Bootstrap made popular.
- CSS: what Bootstrap is made of.
- Responsive design: the layout approach its grid is built around.