Table of Contents

Preface

Part One – Customizing Bootstrap 5 with Sass

Chapter 1: Why and How to Customize Bootstrap

Technical requirements

When we should customize Bootstrap

What elements can be customized?

How we can customize Bootstrap 5

Method 1 – editing the compiled Bootstrap CSS directly

Method 2 – overwriting the Bootstrap CSS with your own custom styles

Method 3 – customizing the default styles using Sass

Examples of a component customized with the three different methods

Method 1 – editing the compiled Bootstrap CSS directly

Method 2 – overwriting the Bootstrap CSS with your own custom styles

Method 3 – customizing the default styles using Sass

Examples of user interfaces with a customized version of Bootstrap 5

The card component

Forum

The contact page

Portfolio

Further customizations in this book

Summary

Chapter 2: Using and Compiling Sass

Technical requirements

What is Sass?

Sass syntax

Comparison between the original Sass syntax and the modern Sass syntax

Parent selector

Sass features

Variables

Nesting

Partials and import

Mixins

Extend

Operators

Functions

Special values

Built-in modules

Sass features used by Bootstrap

Syntax

Partials

Variables

Maps

Mixins

Built-in modules

Most important Sass features for Bootstrap developers

Variables for customization

Maps for the utility API

Mixins and extend for semantic code

Compiling Sass

Experimenting with Sass using Sassmeister

Incorporating Sass compilation into a development workflow

Summary

Chapter 3: Downloading and Exploring the Bootstrap 5 Sass Files

Technical requirements

Downloading the Bootstrap 5 source code

From the website

From GitHub

From NPM

Exploring the Bootstrap 5 Sass files

Root folder

Importing the default Bootstrap 5

Exploring bootstrap.scss

Exploring the Bootstrap 5 variables

Default values with the !default flag

Null value default variables

Summary

Chapter 4: Bootstrap 5 Global Options and Colors

Technical requirements

About the code examples

Importing the Bootstrap 5 files individually

Changing the global options

Caret

Rounded

Shadows

Gradients

Transitions

Reduced motion

Smooth scroll

Grid classes

Container classes

CSS grid

Button pointers

Responsive Font Sizes

Validation icons

Negative margins

Deprecation messages

Important utilities

Spacer

Customizing the colors

Overview of the color variables

Generating color classes

Adding color to theme colors

Removing color from theme colors

Defining a custom color palette

Summary

Chapter 5: Customizing Various Bootstrap 5 Elements

Technical requirements

Customizing the layout

Breakpoints

Containers

Grids

Customizing content

Typography

Images

Figures

Customizing forms

Range

Customizing components

Breadcrumbs

Cards

Customizing helpers

Customizing utilities

Borders

Spacing

Summary

Chapter 6: Understanding and Using the Bootstrap 5 Utility API

Technical requirements

About the utility API

Understanding the utility API syntax

About the code examples

Name

CSS property

Values

Class

CSS variable utilities

CSS variable name

Local CSS variables

State

Responsive

RFS

Print

RTL

!important

More examples of the syntax

Using the utility API

Adding a simple utility

Adding a complex utility

Overwriting a utility

Modifying a utility

Removing a utility

Summary

Part Two – Creating a Unique-Looking Website Based on Bootstrap 5 and Customization

Chapter 7: Creating the Website Using Default Bootstrap 5 Elements

Technical requirements

About the website

Sitemap

Bootstrap Icons

Page setup

Global modules

Header

Footer

Page title

Product card

Page types

Home (index.html)

Shop (shop.html)

Product (product.html)

About (about.html)

Contact (contact.html)

Wishlist (wishlist.html)

Cart (cart.html)

Frequently Asked Questions (faq.html)

Article page (shipping.html, returns.html, terms-of-service.html, and privacy-policy.html)

Summary

Chapter 8: Customizing the Website Using Bootstrap 5 Variables, Utility API, and Sass

Technical requirements

Importing Bootstrap 5 files and custom styles

Default variable overrides

Color palette

Global options

Global variables

Layout

Forms

Components

Variable values using existing variables

Content

Forms

Components

Helpers

Utilities

Other custom styling

Alert

Offcanvas

Summary

Chapter 9: Improving the Website with Interactive Features Using JavaScript

Technical requirements

About the code examples

Simple and clean JavaScript code

Page IDs

Partial and complete code

Original and updated code

Line numbers

Adding a tooltip component to a form label

Adding toast components to product-related actions

Adding a product to the cart

Adding a product to the wishlist

Adding all products to the cart

Removing a product from the wishlist

Removing a product from the cart

Changing the product quantity in the shopping cart

Adding form validation

Adding form submission loading indicators

Adding form success messages

Creating programmatic tabs navigation

Shopping Cart tab pane

Shipping Details tab pane

Updating the progress status in the checkout flow

Updating the progress using inline styling

Updating the progress using classes

Creating a lightbox for the product gallery

Summary

Part Three – Advanced Topics Related to Bootstrap 5

Chapter 10: Using Bootstrap 5 with Advanced Sass and CSS Features

Technical requirements

Using Bootstrap 5 Sass mixins

Mixin overview

Mixins depending on global options

Mixins that are not used

Mixins used for variants

Examples

Using Bootstrap 5 Sass functions

Tint color

Shade color

Shift color

Color contrast

Extending Bootstrap 5 classes for semantic HTML

Extending Bootstrap 5 classes to create custom components

The Page title global module

Blockquote in the Reviews section

Border in the Summary section

Creating a custom component using Bootstrap 5 variables, mixins, and functions

Creating contextual color variants

Creating responsive horizontal variants

Using Bootstrap 5 CSS custom properties

Groups of CSS custom properties

Limitations of CSS custom properties for customization

The dark color theme

Breadcrumb

Helper

Prefix for CSS custom properties

Using the RFS Sass plugin

Summary

Chapter 11: Using Bootstrap 5 with Advanced JavaScript Features

Technical requirements

Interactive components of Bootstrap 5

Accordion

Alert

Button

Carousel

Collapse

Dropdown

List group

Modal

Navs and tabs

Offcanvas

Popover

Scrollspy

Toast

Tooltip

Initializing interactive components

Initializing interactive components using data attributes

Initializing interactive components using JavaScript

Initializing multiple components

Defining options for interactive components

Defining default options

Defining options using data attributes

Defining options using JavaScript

Defining default, common, and individual options

Using JavaScript methods

Asynchronous methods and transitions

Using JavaScript events

Summary

Chapter 12: Optimizing Bootstrap 5 CSS and JavaScript Code

Technical requirements

Including the Sass partials for the used components only

Removing unused helpers and utilities

Removing unused helpers

Removing unused utilities

Trimming used utilities

Setting up a build process using Node.js, npm, and Laravel Mix

Using the Laravel Mix template

Using Laravel Mix

Adding the website code to the build process

Using a module bundler to optimize JavaScript

Minifying our compiled CSS and bundled JavaScript

Summary

Other Books You May Enjoy