The Missing Bootstrap 5 Guide E-Book

Jeppe Schaumburg Jensen

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 281

Veröffentlichungsjahr: 2022

Beschreibung

Bootstrap is one of the world's most popular and easy-to-use frontend UI toolkits for building responsive websites, but few know how to get the most out of its vast range of components, utilities, JavaScript plugins, and other features. The Missing Bootstrap 5 Guide will help you customize Bootstrap 5 with Sass to achieve a layout that stands out from the crowd, enabling you to create something unique that doesn't look like it was created with Bootstrap.
With this practical guide to Bootstrap customization, developers working with Bootstrap will be able to utilize powerful customization techniques to create websites with unique designs and exclusive features. You’ll see how you can develop a visually appealing website quickly and easily by taking a hands-on approach to customizing your website using advanced features of CSS, Sass, and JavaScript. Starting with learning how the Bootstrap 5 visual style is created with Sass, you’ll find out how to customize it to fit your needs while achieving the website look you want. You'll then use this knowledge to create a website using most of Bootstrap 5's components and customization with Sass and JavaScript. Finally, you’ll explore various advanced Bootstrap 5 topics related to Sass, CSS, JavaScript, and source code optimization.
By the end of this book, you'll be able to design and build modern, captivating, and unique websites on your own using the immense capabilities of Bootstrap 5.

Leseprobe

The Missing Bootstrap 5 Guide

Customize and extend Bootstrap 5 with Sass and JavaScript to create unique website designs

Jeppe Schaumburg Jensen

BIRMINGHAM—MUMBAI

The Missing Bootstrap 5 Guide

Copyright © 2022 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Associate Group Product Manager: Pavan Ramchandani

Publishing Product Manager: Kushal Dave

Senior Editor: Mark Dsouza

Content Development Editor: Divya Vijayan

Technical Editor: Joseph Aloocaran

Copy Editor: Safis Editing

Project Coordinator: Rashika Ba

Proofreader: Safis Editing

Indexer: Manju Arasan

Production Designer: Alishon Mendonca

Marketing Coordinators: Anamika Singh and Marylou De Mello

First published: August 2022

Production reference: 1290722

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80107-643-2

www.packt.com

To Maja, who supported me and gave me time to write this book during the last year.

– Jeppe Schaumburg Jensen

Contributors

About the author

Jeppe Schaumburg Jensen is an experienced frontend developer with a deep interest in teaching Bootstrap and other UI frameworks. He holds a master of science degree in information technology with a specialization in interaction design and user experience. Over the last few years, he has been successful in establishing himself as an independent Instructor by creating online courses on different frontend development topics for various online course providers. On Udemy, his courses on Bootstrap have achieved the “Bestseller” and “Highest rated” badges, with more than 25,000 students so far. Besides teaching, Jeppe is a Senior Software Engineer on the Design System Team at Siteimprove, a multinational and industry-leading Software-as-a-Service (SaaS) company.

I want to thank the whole team at Packt Publishing for working with me throughout the creation of this book from the very beginning to the very end. Thank you for asking me to write this book and for trusting and supporting me in the whole process.

About the reviewer

Bello Ololade is a freelance frontend developer and product designer based in Nigeria. He broke into the tech industry two years ago when he was studying for his bachelor’s degree in zoology at Olabisi Onabanjo University, Ago Iwoye, Ogun State, Nigeria.

Since then, he has worked with many clients and startups in many countries, providing solutions through tech and design. Throughout his years of experience, he has worked with many technologies to bring forward the best experience for clients and their users.

Guust Nieuwenhuis is a Full Stack Web Wizard with experience in a wide range of technologies. Over the last couple of years, he’s been involved in projects for various clients including the European Commission, NSHQ (NATO), Adobe, AS Adventure Group, NS (Dutch Railways), CZ Groep, Proximus, Avery Dennison, and Mediagenix.

In his free time, he plays the double bass and drums, crosses the forest on his mountain bike, and coaches the youth at his local football club. He likes spending time with his wife and two kids or meeting friends for a chat, game, or drink.

When he still has some time left, he mainly spends it behind his computer to fulfil his hunger for the latest trends in IT.

Thank you to my wife, Joke, and my kids, Seppe and Saar.

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

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.

Part One – Customizing Bootstrap 5 with Sass

In this part, we will first learn why and how to customize Bootstrap. Then, we will learn how to use and compile Sass, with a special focus on the Sass features used by Bootstrap 5. After that, we take a deep dive into the Bootstrap 5 Sass files and learn how to change the global options, define a color palette, customize various Bootstrap 5 elements, and use the utility API in various ways.

This part comprises the following chapters:

Chapter 1, Why and How to Customize BootstrapChapter 2, Using and Compiling SassChapter 3, Downloading and Exploring the Bootstrap 5 Sass FilesChapter 4, Bootstrap 5 Global Options and ColorsChapter 5, Customizing Various Bootstrap 5 ElementsChapter 6, Understanding and Using the Bootstrap 5 Utility API

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 BootstrapWhat elements can be customized?How we can customize Bootstrap 5Examples of a component customized with three different methodsExamples 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.

Technical requirements

A code editor and browser to preview the examples

You can find the code files of the chapter on GitHub at https://github.com/PacktPublishing/The-Missing-Bootstrap-5-Guide

When we should customize Bootstrap

When Bootstrap is used with a precompiled style sheet, it has all the default colors, typography, spacing, and more that people associate with Bootstrap. When using these styles for your own project, it will inevitably look like Bootstrap unless you change these styles. This might not be a problem if you are creating a personal project or one for internal use. But if you have specific brand guidelines that your customers or users recognize you by, you will likely need to change these styles to match the style of your brand. Since Bootstrap is so immensely popular and widespread across the internet, some people might recognize the default Bootstrap styles unless you change them. That might have a bad impact on user experience, so for professional use cases, it is highly recommended to customize the default Bootstrap styles.

What elements can be customized?

Bootstrap 5 is easily customizable in many ways. You can customize various options for typography, color, spacing, sizing, border radius, box shadow, and more across all components, as well as customize all the different components individually. You can also customize the helpers and utilities in many different ways. The most important elements to customize are, without doubt, the color palette and typography so that they will match that of your brand. The other aspects can then be further customized to align with your current brand guidelines or just to differentiate your user interface from all the websites that make use of the default Bootstrap styles.

JavaScript Behavior Can Be Customized Too

You generally want to customize the styles of Bootstrap, as described previously; however, the behavior of JavaScript-enabled components can also be changed from the default values. While this is not that important for the perception of your brand, it might be something to consider changing as well.

How we can customize Bootstrap 5

Bootstrap 5 can be customized using three different methods:

Editing the compiled Bootstrap CSS directlyOverwriting the Bootstrap CSS with your own custom stylesCustomizing the default styles using Sass

We will now see a short description of each of these methods.

What Is Sass?

Syntactically Awesome Style Sheets (Sass) is a preprocessor scripting language that is interpreted and compiled into Cascading Style Sheets (CSS). Sass extends the default capabilities of CSS with variables, nesting, partials, functions, and more. We will learn more about Sass in Chapter 2, Using and Compiling Sass.

Method 1 – editing the compiled Bootstrap CSS directly

It is possible to simply edit the compiled Bootstrap CSS directly to achieve the styles you want. This can be rather complex, depending on what you want to change, but most importantly, this will make it hard to update Bootstrap, since you will need to make all your changes again if you want to update to a newer version of it. This approach is not recommended.

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

You may choose to simply override the Bootstrap CSS with your own custom styles, but it will increase the size of the total CSS code and might take a lot of work if you want to change many aspects of the default styles. When updating to a newer version of Bootstrap 5, it is easier to maintain than the aforementioned first approach, but if new components or utilities are added to Bootstrap 5, these will have to be overridden manually according to your design needs. This approach might work for you if you simply need to change the color palette or – for some reason – cannot use a Sass compiler to work with the original source code of Bootstrap. For this book, though, we will learn how to customize Bootstrap 5 using Sass.

Method 3 – customizing the default styles using Sass

If you want maximum control and possibilities, you should customize Bootstrap using Sass. This requires a Sass compiler, some knowledge of the Sass language, and knowledge of the Bootstrap Sass files. All of this will be explained and demonstrated in the next two chapters.

Some of the advantages of using Sass are that you can change global settings, modify the used color palette and typography in only one place, and easily customize components. It is also a lot easier and quicker to work with, and on top of that, the compiled file size can be optimized to reflect the actual elements and features being used. For these reasons, this is the recommended approach to customize Bootstrap 5.

Now that we have looked at the various ways in which we can customize Bootstrap, let’s look at an example component, customized using each of the three different methods mentioned previously.

Examples of a component customized with the three different methods

In this section, we will see how we can get the same visual style using the three different methods explained in the previous section. We will customize the default Breadcrumb component from Bootstrap that looks like this:

Figure 1.1 – The default Breadcrumb component

We will add a gray background color, a border radius on all corners, and padding on all sides. We will also increase the horizontal padding on the breadcrumb items and change the divider. The customized version of the Breadcrumb component will then look like this:

Figure 1.2 – The customized Breadcrumb component

The HTML for this component is mostly the same, irrespective of the methods you use to customize the style. The HTML is as follows:

<nav aria-label="Breadcrumb">   <ol class="breadcrumb">     <li class="breadcrumb-item"><a href="#">Home</a></li>     <li class="breadcrumb-item"><a href="#">Sports</a></li>     <li class="breadcrumb-item"><a href="#">Ball games</a>     </li>     <li class="breadcrumb-item active"       aria-current="page">Baseball</li>   </ol> </nav>

The first two methods use plain CSS and should not require any further explanation. The last example is based on Sass and might not make much sense to you if you are not familiar with Sass. It is, however, included in this chapter to show you the difference in terms of what code is required to achieve the same style using each of these three methods. In the next chapter, I will give a general introduction to Sass and how it is used by Bootstrap.

Method 1 – editing the compiled Bootstrap CSS directly

In the following, we see a slightly edited version of the CSS for the Breadcrumb component found in the compiled and un-minified Bootstrap CSS file (bootstrap.css – line 4494-4525). The changes we need to make to that code to get the specific style that we want are highlighted with a + symbol for new properties and * for changes to a property:

part-1/chapter-1/customization-methods/editing-css/css/bootstrap.css

.breadcrumb {   --bs-breadcrumb-padding-x: 0;   --bs-breadcrumb-padding-y: 0;   --bs-breadcrumb-margin-bottom: 1rem;   --bs-breadcrumb-bg: ;   --bs-breadcrumb-border-radius: ;   --bs-breadcrumb-divider-color: #6c757d;   --bs-breadcrumb-item-padding-x: 0.5rem;   --bs-breadcrumb-item-active-color: #6c757d;   display: flex;   flex-wrap: wrap;   padding: var(--bs-breadcrumb-padding-y)            var(--bs-breadcrumb-padding-x);   margin-bottom: var(--bs-breadcrumb-margin-bottom);   font-size: var(--bs-breadcrumb-font-size);   list-style: none; * background-color: var(--bs-gray-300); * border-radius: 1rem; + padding: 1rem; } .breadcrumb-item + .breadcrumb-item { * padding-left: 1rem; } .breadcrumb-item + .breadcrumb-item::before {   float: left; * padding-right: 1rem;   color: var(--bs-breadcrumb-divider-color); * content: var(--bs-breadcrumb-divider, "·"); } .breadcrumb-item.active {   color: var(--bs-breadcrumb-item-active-color); }

The divider for the Breadcrumb component is added with the ::before pseudo-element and the content property, as seen in the preceding. We will change the fallback value that comes after the --bs-breadcrumb-divider CSS custom property, since this is not defined by Bootstrap. Alternatively, we could have changed the divider by defining the CSS custom property in the HTML, like so:

<nav aria-label="Breadcrumb"   style="--bs-breadcrumb-divider: '·';">

It’s also possible to simply add our new divider directly as the value of the content property, like so:

content: '·';

We will learn more about how to use CSS custom properties in Chapter 10, Using Bootstrap 5 with Advanced Sass and CSS Features.

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

Here, we see the custom CSS that we would need to add to our page after the Bootstrap CSS to overwrite the same property values shown in the previous example:

part-1/chapter-1/customization-methods/overwriting-css/css/style.css

.breadcrumb {   background-color: var(--bs-gray-300);   border-radius: 1rem;   padding: 1rem; } .breadcrumb-item + .breadcrumb-item {   padding-left: 1rem; } .breadcrumb-item + .breadcrumb-item::before {   padding-right: 1rem;   content: '·'; }

If you compare this example with the previous example, you will see that we are adding/overwriting the exact same properties/values as we added/changed before.

For this to work, remember to reference your own style sheet after the Bootstrap style sheet in your <head> of the HTML file, like this:

part-1/chapter-1/customization-methods/overwriting-css/index.html

<link rel="stylesheet" href="../../../../bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css">

Method 3 – customizing the default styles using Sass

Now, we will see the recommended approach to customizing Bootstrap, where we compile the Sass styles with new values for certain Bootstrap variables. This will then give us the visual output we want.

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.

After setting these variables, we will import some other necessary Bootstrap files in the default order, and finally, we will import the Breadcrumb component. We will not be able to use other Bootstrap components, utilities, and so on with the generated style sheet, since we are just focusing on the absolutely necessary files to include for this example:

part-1/chapter-1/customization-methods/using-sass/scss/bootstrap.scss

// Required @import "../../../../../bootstrap/scss/functions"; @import "../../../../../bootstrap/scss/variables"; @import "../../../../../bootstrap/scss/maps"; @import "../../../../../bootstrap/scss/mixins"; @import "../../../../../bootstrap/scss/root"; // 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("·"); // Optional Bootstrap CSS @import "../../../../../bootstrap/scss/reboot"; @import "../../../../../bootstrap/scss/breadcrumb";

This Sass needs to be compiled by a preprocessor, and we will learn how to do this in the next chapter.

If we compare the code for the three different methods, we can see that method 3 is the most simple and easiest to understand. We are simply declaring the values for some easy-to-understand variables and do not have to use any CSS selectors to do this. This can be used for future versions of Bootstrap as well. Method 1 requires you to edit the compiled Bootstrap CSS again every time you want to use a newer version of Bootstrap 5, while with method 2, the code might need to be changed for future versions of Bootstrap if the class names or HTML structure are changed.

Examples of user interfaces with a customized version of Bootstrap 5

In this section, we will see four examples of user interfaces using a customized version of Bootstrap 5. For each example, we will first see a screenshot of the user interface using the default Bootstrap 5 styles and then a screenshot of the user interface using a customized version of Bootstrap 5. This will then be followed by a list of what has been customized. We will start with a simple example of one UI element, where we can better see the actual changes, and then have a look at three different full-page examples. All screenshots, as well as the complete customized examples, can be found in the accompanying code for this book in the following folder: part-1/chapter-1/example-user-interfaces/. I recommend that you look at those while going through these examples and the lists of what has been customized to have a better understanding of the actual changes.

The card component

The following is the first example, which is a Bootstrap 5 card component. Inside of the component, we’re using the nav and list group components as well:

Figure 1.3 – The card component using the default Bootstrap 5 styles

Figure 1.4 – The card component using a customized version of Bootstrap 5

In this example, the following Bootstrap 5 customizations have been made:

Changed the global settings for the primary color, base font size, headings, and font weightChanged the color, background color, font size, padding, margin, border width, and border radius for the card componentChanged the padding for the nav componentChanged the color, background color, and padding for the list group component

Forum

The following is the second example, which is a common forum UI taken from an online forum template. It’s created with the use of tables and various Bootstrap 5 components, including buttons, a breadcrumb, badges, dropdowns, and pagination.

Figure 1.5 – A forum UI using the default Bootstrap 5 styles

Figure 1.6 – A forum UI using a customized version of Bootstrap 5

In this example, the following Bootstrap 5 customizations have been made:

Changed global settings for primary, info, and body background colorsRemoved the underline from linksRemoved all border radiusesChanged the background color of input elementsChanged the color, padding, and borders of tablesChanged the horizontal padding for buttonsChanged the horizontal padding for paginationsChanged the padding for and added text-transform to badges

The contact page

The following is the third example, which is a contact page taken from a Small Business Website template. It features various Bootstrap 5 form elements, including input groups, text inputs, dropdowns, textarea, and buttons. It also uses the ratio helper class to embed a Google Maps map with the right aspect ratio.

Figure 1.7 – The contact page UI using the default Bootstrap 5 styles

Figure 1.8 – The contact page UI using a customized version of Bootstrap 5

In this example, the following Bootstrap 5 customizations have been made:

Changed global settings for primary and body text colorsRemoved the border radius on buttons, dropdowns, select elements, and input elementsChanged the color for input group addonsChanged the “4x3” ratio helper to “3x2”Changed the font weight and margin for headings

Portfolio

The following is the fourth and final example, which is a portfolio item page taken from a Portfolio template. It features a carousel, image thumbnails, and various kinds of typography.

Figure 1.9 – A portfolio item UI using the default Bootstrap 5 styles

Figure 1.10 – A portfolio item UI using a customized version of Bootstrap 5

In this example, the following Bootstrap 5 customizations have been made:

Changed global settings for primary and light colorsGenerated a darker variant of the primary color using a Bootstrap 5 color functionDisabled the border radius on all elements using the global optionIncreased the container maximum width for the xxl breakpointDecreased the grid gutter widthChanged the colors of headings and muted textChanged the font size used for small textChanged the color and font size of the navbarChanged the indicators of the carouselChanged the image thumbnail bordersChanged the color and font size of the figure caption

Further customizations in this book

The four preceding examples only showed the visual impact of different customizations and a brief description of the changes. In Chapter 3, Downloading and Exploring the Bootstrap 5 Sass Files