Preface
Bootstrap is one of the world’s most popular frontend UI toolkit and comes with easy-to-use and off-the-shelf solutions for building responsive websites with the use of components, utilities, JavaScript plugins, and more. You can customize Bootstrap 5 with Sass to achieve a unique-looking layout that stands out from the crowd. Learning how to customize Bootstrap 5 enables a developer to create something unique that doesn’t look like Bootstrap.
Who this book is for
The book is intended for UI designers and developers who are familiar with HTML and already have some experience with using Bootstrap version 4 or 5. This includes frontend as well as backend developers using Bootstrap who don’t know how to code CSS but know enough about HTML.
Experienced users of the default Bootstrap files can also benefit from this book by learning all about customization and other advanced features.
This book won't teach the basics of how to code a user interface with default Bootstrap 5 components. Instead, this book is about customization of Bootstrap 5 in various ways.
What this book covers
Chapter 1, Why and How to Customize Bootstrap, explores why we would want to customize Bootstrap 5, what can be customized (what the most important parts to customize are), and how that’s done.
Chapter 2, Using and Compiling Sass, covers what Sass is, and we will learn about its features and benefits, how to use it, how to compile it into regular CSS, and the Sass features used by Bootstrap 5.
Chapter 3, Downloading and Exploring the Bootstrap 5 Sass Files, shows how to download Bootstrap 5 and then takes a closer look at the Bootstrap 5 Sass files and Sass variables, including how they are structured.
Chapter 4, Bootstrap 5 Global Options and Colors, delves into how to import the Bootstrap 5 Sass partials individually, how to change the global options, and how to customize the colors.
Chapter 5, Customizing Various Bootstrap 5 Elements, explores how to customize the visual style of the Bootstrap 5 elements: layout, content, forms, components, helpers, and utilities.
Chapter 6, Understanding and Using the Bootstrap 5 Utility API, examines how to use the utility API to generate and add new simple and complex utilities, as well as overwrite, modify, and remove existing utilities.
Chapter 7, Creating the Website Using Default Bootstrap 5 Elements, takes a closer look at the website we will create, including a description of the page setup, a description of global modules, and a description of the page types.
Chapter 8, Customizing the Website Using Bootstrap 5 Variables, Utility API, and Sass, shows how to customize our website by setting some global options, defining our own colors, changing the styling of various Bootstrap 5 elements, and using the utility API.
Chapter 9, Improving the Website with Interactive Features Using JavaScript, covers customizing the feel of our website by adding different interactive features, using the JavaScript-based components of Bootstrap 5 as well as custom JavaScript.
Chapter 10, Using Bootstrap 5 with Advanced Sass and CSS Features, looks at advanced Sass and CSS features related to Bootstrap 5, including how to use Sass mixins, functions, and extends, how to use CSS custom properties, and how to use the RFS plugin.
Chapter 11, Using Bootstrap 5 with Advanced JavaScript Features, examines the advanced JavaScript features that can be used with the interactive components of Bootstrap 5, including initialization, options, methods, and events.
Chapter 12, Optimizing Bootstrap 5 CSS and JavaScript Code, delves into how to optimize the compiled CSS by specifying the components we use and removing unused helpers and utilities, and how to use a module bundler to optimize JavaScript and minify both the compiled CSS and bundled JavaScript.
To get the most out of this book
You need to have some experience with creating user interfaces using Bootstrap 5 (or maybe Bootstrap 4). This means that you should know how to create various Bootstrap 5 components using HTML and all the right Bootstrap 5 classes and attributes, or at least know how this all works.
If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.
Download the example code files
You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/The-Missing-Bootstrap-5-Guide. If there’s an update to the code, it will be updated in the GitHub repository.
We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Download the color images
We also provide a PDF file that has color images of the screenshots and diagrams used in this book. You can download it here: https://packt.link/yXP75.
Conventions used
There are a number of text conventions used throughout this book.
Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: “We are first importing some configuration files so that we can use the $spacer variable as a value for the other variables, which we will set right after.”
A block of code is set as follows:
// Required @import "../bootstrap/scss/functions"; @import "../bootstrap/scss/variables"; @import "../bootstrap/scss/maps"; @import "../bootstrap/scss/mixins"; @import "../bootstrap/scss/root";
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
// Modified variables
$breadcrumb-bg: $gray-300;
$breadcrumb-border-radius: $spacer;
$breadcrumb-padding-y: $spacer;
$breadcrumb-padding-x: $spacer;
$breadcrumb-item-padding-x: $spacer;
$breadcrumb-divider: quote("·");Any command-line input or output is written as follows:
npm install bootstrap
Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: “The Page title global module is used on all pages except for the Home page and Product page.”
Tips or Important Notes
Appear like this.
Get in touch
Feedback from our readers is always welcome.
General feedback: If you have questions about any aspect of this book, email us at [email protected] and mention the book title in the subject of your message.
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.
Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Share Your Thoughts
Once you’ve read The Missing Bootstrap 5 Guide, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.
Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.