Chapter 1: Why and How to Customize Bootstrap

Bootstrap is an open source, frontend framework used to quickly design, develop, and customize responsive, mobile-first websites. It has a flexible grid system, a great variety of prebuilt accessible and interactive components, and many useful helpers and utilities.

Bootstrap comes with predefined CSS styles for all its components. These styles cover everything from typography and colors to sizes and spacing, as well as breakpoints, options for the grid system, and more. Bootstrap 5 can be used with the default styles out of the box, but it is also possible to customize this in different ways.

In this chapter, you will learn when you would want to customize Bootstrap, what can be customized (and what the most important parts to customize are), and how it is done. Learning about this is important before you start customizing Bootstrap without any prior knowledge, since you will be better prepared to customize the right elements and pick the right method for customization.

In this chapter, we’re going to cover the following main topics:

• When we should customize Bootstrap
• What elements can be customized?
• How we can customize Bootstrap 5
• Examples of a component customized with three different methods
• Examples of user interfaces with a customized version of Bootstrap 5

Bootstrap Versions

This book is written with the latest version of Bootstrap in mind: v5.2.0, generally referred to as Bootstrap 5 throughout the book. Some of the features and techniques described in this book might also work with Bootstrap 4 but probably not Bootstrap 3.