Introduction

Before utility frameworks like Tailwind (the batch 18 post), there was Bootstrap: Twitter's open-source CSS framework, released in 2011, that gave developers a responsive grid and ready-made components — buttons, navbars, cards, modals — with a few class names. For a decade it was the fastest way to make a site that looked decent on a phone and a desktop, and its class names became a shared vocabulary: ask a developer what col-md-6 means and most will know.

The grid and the components

Bootstrap's core is a 12-column grid that adapts to screen size. On a large screen, two col-md-6 columns sit side by side; on a phone, they stack:

<div class= "container" > <div class= "row" > <div class= "col-md-6" > <div class= "card" > <div class= "card-body" > <h5 class= "card-title" > Left column </h5> <p class= "card-text" > Stacks on small screens.…