The Bootstrap grid system is a layout tool built on a container, rows and up to twelve columns. Content sits inside column elements, and Bootstrap arranges those columns side by side across the row on larger screens, then automatically stacks them into a single column on smaller screens like phones. The twelve-column model gives flexible proportions, since a column spanning six of the twelve units always takes exactly half the row.

What makes the grid genuinely useful is that its behaviour is controlled per screen size using breakpoint classes, such as col-md-6, which only applies once the screen reaches a medium width. Below that width the same element can fall back to full width automatically. This lets one HTML structure serve phones, tablets and desktops without writing separate layouts for each, which is the main reason the grid is the first thing most people learn in Bootstrap.

A site becomes responsive in Bootstrap mainly by combining the grid with breakpoint-specific classes such as col-md-6 or col-lg-4. Each of these tells the browser how wide a column should be once the screen reaches that particular size and above, so the same markup rearranges itself automatically as the viewport grows or shrinks, without any extra JavaScript.

Beyond the grid, Bootstrap also provides responsive display utilities, like d-none d-md-block, which hide an element on small screens and reveal it from medium screens upward, and responsive spacing classes, like mt-md-4, which change margin or padding only at a chosen breakpoint. Combining the grid for structure with these utility classes for fine adjustments is usually enough to make an ordinary page work comfortably across phones, tablets and desktops.