Bootstrap 5 from Scratch: Web Developers

Learn how to build modern, clean, and responsive web interfaces with Bootstrap 5 through a practical step-by-step guide. This book takes you from the core fundamentals of the framework to more advanced topics such as Sass customization, native dark mode, integration with Vue 3 and Livewire, production performance, and advanced form building.

Throughout the chapters, you will learn how to structure content with containers and columns, work with Bootstrap’s main components, apply utility classes, customize styles, and build real-world projects such as a basic online store and an application that consumes an API with fetch. Everything is explained with a clear, practical, and results-oriented approach.

Chapter 1 - Introduction to Bootstrap 5: In this chapter we will give some key concepts about the frameworks, advantages of using Bootstrap and what changes it brings with its predecessor, in addition, we will prepare the development environment.

Chapter 2 - Containers: In this chapter we present an introduction to containers in Bootstrap as a fundamental structure to organize our content correctly on a website and have it displayed correctly; additionally, we introduce other common features such as Bootstrap breakpoints present in other components.

Chapter 3 - Columns: In this chapter we will learn how to use Bootstrap's grid and column system.

Chapter 4 - Components in Bootstrap: In this chapter we will learn how to work with the main components in Bootstrap, which are the fundamental elements in this technology.

Chapter 5 - Utilities: In this chapter we will learn how to use the help classes in Bootstrap, also known as utility classes with which we can establish colors, margins, among other formats, to the HTML content.

Chapter 6 - Customize Bootstrap CSS: In this chapter we will learn how to generate our custom Bootstrap bundle using Sass.

Chapter 7 - Practice with components: In this chapter we will create some composite or custom components using Bootstrap components and its utility classes as a base.

Chapter 8 - Develop websites with Bootstrap: In this chapter we will build a real website that is a kind of product sales website or online store with a very limited scope. We will also create a website in which we will make fetch queries to an API.

Chapter 9 - Native Dark Mode and Theme Systems: Learn to implement and customize native dark mode in Bootstrap 5.3+ using data-bs-theme, CSS variables, Sass maps, and a persistent dynamic theme switcher.

Chapter 10 - Integrating Bootstrap 5 in Vue 3 and Livewire: Master the reactive integration of Bootstrap 5 in Vue 3 and Laravel Livewire. Avoid memory leaks and reinitialize tooltips and modals using DOM hooks.

Chapter 11 - Bootstrap Performance and Optimization in Production: Optimize your Bootstrap 5 projects to the limit: learn granular Sass imports, advanced PurgeCSS setup, and how to replace font icons with inline SVGs.

Chapter 12 - Advanced Forms and Dynamic Validation: Create professional Bootstrap 5 forms by implementing native HTML5 validation, dynamic loading states, and file upload progress bars.