Bootstrap
- Pronunciation
- BOOT-strap
In short
Bootstrap is a free CSS framework with a responsive grid and ready-made components, such as buttons, navbars and modals, used by adding its classes to HTML.
What is Bootstrap?
Bootstrap was built at Twitter by Mark Otto and Jacob Thornton and released as open source in 2011. It gives you a stylesheet and a JavaScript file: link them in your page, add class names such as btn btn-primary or card to your HTML, and you get consistent buttons, forms, cards, navigation bars, alerts and dialogs without writing CSS yourself.
Its layout system is a 12-column grid built on flexbox. You put content in a container, split it into rows with row and give each column a width per screen size, so col-md-6 takes half the width from medium screens up and the full width below. Interactive components such as dropdowns, modals and carousels come with JavaScript plugins, which no longer need jQuery since Bootstrap 5, released in 2021. The current version, 5.3, adds a dark color mode, and the source is written in Sass, so you can change colors, spacing and fonts and leave out the parts you don't use.
Bootstrap is like a furnished apartment: you can move in and start working right away, but changing the look takes effort, which is why many Bootstrap sites look alike. It remains common for admin panels, internal tools and prototypes, where a clean, familiar design matters more than a unique one.
It is most often compared with Tailwind CSS. Bootstrap ships finished components with their own look, so a card is a single class; Tailwind ships small utility classes such as p-4 and rounded-lg, and you assemble every design from them. Bootstrap has utility classes too, and there are component libraries built on Tailwind, but the starting points differ: a ready-made design versus building blocks.
Key takeaways
- Bootstrap is a CSS framework with ready-made components and a responsive grid.
- You style pages by adding its classes, such as
btnandcol-md-6, to HTML. - The grid has 12 columns and adapts to screen sizes with breakpoints.
- Since version 5, its JavaScript components no longer need jQuery.
- Bootstrap gives you a finished look; Tailwind gives you utilities to build your own.
Example
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-8">Main content: full width on phones, 8 of 12 columns from medium screens</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Newsletter</h5>
<button class="btn btn-primary">Subscribe</button>
</div>
</div>
</div>
</div>
</div>Readers ask
Is Bootstrap still used?
Yes. It is still one of the most widely used CSS frameworks, especially for dashboards, internal tools and quick prototypes, although many new projects choose Tailwind CSS or a component library made for their framework.
What is the difference between Bootstrap and Tailwind CSS?
Bootstrap provides ready-made components with a recognizable default design. Tailwind provides low-level utility classes, so you build your own design and components from them.
Does Bootstrap need jQuery?
Not since Bootstrap 5. Version 4 and earlier used jQuery for their interactive components; version 5 rewrote them in plain JavaScript and uses the Popper library only to position dropdowns, tooltips and popovers.
See also
- CSSWeb Development, p. 14CSS is the style sheet language that controls how HTML content looks on screen, including colors, fonts, spacing, layout, and animations.
- Tailwind CSSWeb Development, p. 56Tailwind CSS is a utility-first CSS framework: instead of custom stylesheets, you style elements with small, single-purpose classes right in your HTML.
- Responsive DesignWeb Development, p. 46Responsive design is an approach to building web pages whose layout, images, and text adapt automatically to any screen size, from phones to large monitors.
- CSS GridWeb Development, p. 15CSS Grid is a two-dimensional CSS layout system that arranges elements into rows and columns at the same time, making complex page layouts simple to build.
- FlexboxWeb Development, p. 20Flexbox is a CSS layout model that arranges items in a single row or column and controls how they grow, shrink, align, and share the available space.
- jQueryWeb Development, p. 30jQuery is a JavaScript library that made selecting elements, handling events, animating and making AJAX requests easy with one short, cross-browser syntax.
Sources
Spotted a mistake or something missing on this page?Suggest an edit