Imagine you are the online layout developer for The Washington Post, responsible for coding the front page of the print newspaper into a digital website version. The newspaper consistently uses the same font size and typeface for the main headline, captions, and bylines. Similarly, there are a set number of layouts to choose from, usually with the main headline at the top of the page accompanied by a photo.
Every day you could write your CSS code from scratch, defining font typeface, sizes, paragraph layouts, and the like. However, given that the newspaper follows a largely defined format, it would be easier to define this styling ahead of time in your CSS file with class names, and when necessary refer to the styling you want by name. At its core, this is how Bootstrap functions.
Bootstrap is a collection of standardized prewritten HTML, CSS, and JavaScript code that you can reference using class names and then further customize. Bootstrap allows you to create and gives you:
Layouts: Define your web page content and elements in a grid pattern.
Components: Use existing buttons, menus, and icons that have been tested on hundreds of millions of users.
Responsiveness: A fancy word for whether your site will work on mobile phones and tablets in addition to desktop computers. Ordinarily, you would write additional code so your website appears properly on these different screen sizes, but Bootstrap code is already optimized to do this for you.
Cross-browser compatibility: Chrome, Firefox, Safari, Internet Explorer, and other browsers all vary in the way they render certain HTML elements and CSS properties. Bootstrap code is optimized so your web page appears consistently no matter the browser used.
