What is Bootstrap?
Originally called Twitter Blueprint, Bootstrap was created by Twitter to provide a consistent style guide to unify the look and feel of various internal Twitter projects. After being renamed and released to the open-source community, it evolved into the mobile-first component-based CSS framework it is today. It provides a consistent CSS style that can be applied to any project. But, more than this, it offers best-of-breed solutions to common web development tasks such as accessible forms, responsive layout, modals, pop-overs, navigation, and much more.
The State of CSS 2019 pegged Bootstrap as the most well-known CSS framework, if not every web developer’s favorite. Bootstrap is the seventh most popular (“starred”) project of any type on GitHub. So, if you are looking for a well-tested and well-documented CSS framework to get your project going quickly, Bootstrap is a safe bet.
How Bootstrap Works
Bootstrap provides a base “CSS reset,” which means it sets everything to zero so that all browsers have the same starting point for styling content. Then it layers on a themeable look and feel to give HTML elements a consistent and manageable style. These styled HTML elements are organized into components that can work individually or as a set. Meaning you can display a single button, or a button group, a single dropdown, or a dropdown as part of a navigation bar, a single input field, or an input group. It all works together seamlessly, is accessible by default, and is responsive across different sizes of browsers and different types of devices.
Themeable
Don’t like the default visual style? No problem. There are literally thousands of themes that you can download and apply that take the current Bootstrap CSS classes and change how they look. Without having to write any code or make any additional changes, you can simply load a new theme on your site and change the entire look and feel. Some of these themes are paid for, but many are free.
If you don’t find one that fits your needs, the CSS classes are well defined and documented, so creating your own custom theme from scratch is entirely possible. They even provide Sass-based source code that allows you to tweak one or a handful of variables and recompile. This gives developers incredible flexibility, in that they can install Bootstrap and begin developing quickly in a reliable, repeatable way, knowing that if the design for the project requires stylistic changes, they can be easily accommodated later, without having to scrap any of the work done previously. Moreover, it helps create a separation of concerns, allowing developers to focus on implementing functionality and giving designers the CSS tools they are familiar with in order to implement the necessary look and feel for the project.
Responsive
Bootstrap is a mobile-first responsive framework. This means that it follows the design pattern of making things work correctly on smaller devices, then scaling up for desktop. Smaller devices are much harder to get right due to the limited screen real estate. Having this concept baked right into the framework makes it much easier for developers to approach their projects this way. They can simply think in terms of extra small, small, medium, large, and extra-large, and allow Bootstrap to auto-adjust the display to match the current screen size. If the design calls for something other than the default breakpoints, you can adjust the themeable components and recompile to your specifications.
Criticisms
Bootstrap has been around for a long time, and lots of sites use it. Often, they don’t spend too much time customizing it; as such, Bootstrap sites often look very similar. Even when loading a theme or generating a custom theme, they still use the same grid system for layout, leading some designers to claim Bootstrap leads to cookie-cutter sites. However, this criticism is not unique to Bootstrap and would really be applicable to any popular framework. It’s a trade-off. If you want to incorporate a framework, so you don’t have to reinvent the wheel each time, you will be bringing along some baggage.
By default, Bootstrap loads a tremendous amount of functionality, and it’s rare for websites to need all of it. Pairing down the Bootstrap CSS to only ship the components you need is entirely possible with their Sass tools, but it takes developers time to integrate this into their build processes. Since this is a behind-the-scenes activity that users don’t see, it’s often not prioritized, leading to sites often being far larger than they need to be. Reducing the CSS size makes sites load faster, and user’s browsers can process the smaller CSS files more quickly. Some developers claim that Bootstrap leads to code-bloat. However, as most frameworks will offer more utilities than you generally need, all frameworks will be subject to this same criticism, which can be resolved by incorporating an appropriate Bootstrap step into a website’s standard build processes.
Explore
Bootstrap has extremely well-done documentation, and there is also a very active development community. It’s easy to find answers to your questions on https://stackoverflow.com/.
Learn more and get the code at https://getbootstrap.com/.
