You're reading from The Missing Bootstrap 5 Guide Customize and extend Bootstrap 5 with Sass and JavaScript to create unique website designs

Product type Paperback

Published in Aug 2022

Publisher Packt

ISBN-13 9781801076432

Length 384 pages

Edition 1st Edition

Languages

JavaScript

Tools

Bootstrap

Concepts

UI Development

Author (1):

Jeppe Schaumburg Jensen

View More author details

Table of Contents (17) Chapters

Preface

1. Part One – Customizing Bootstrap 5 with Sass

2. Chapter 1: Why and How to Customize Bootstrap FREE CHAPTER

3. Chapter 2: Using and Compiling Sass

4. Chapter 3: Downloading and Exploring the Bootstrap 5 Sass Files

5. Chapter 4: Bootstrap 5 Global Options and Colors

6. Chapter 5: Customizing Various Bootstrap 5 Elements

7. Chapter 6: Understanding and Using the Bootstrap 5 Utility API

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

9. Chapter 7: Creating the Website Using Default Bootstrap 5 Elements

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

11. Chapter 9: Improving the Website with Interactive Features Using JavaScript

12. Part Three – Advanced Topics Related to Bootstrap 5

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

14. Chapter 11: Using Bootstrap 5 with Advanced JavaScript Features

15. Chapter 12: Optimizing Bootstrap 5 CSS and JavaScript Code

16. Other Books You May Enjoy

Exploring the Bootstrap 5 Sass files

In this section, we will explore the Bootstrap 5 Sass files. These files are located in the scss folder of the downloaded Bootstrap 5 files. We will go through the contents of this folder and its subfolders.

Root folder

In the root of the scss folder, we have a total of 41 files, of which 37 are Sass partials because they start with an underscore, and the remaining 4 files are regular SCSS files. Here’s an overview with a comment next to each file:

_accordion.scss (component)
_alert.scss (component)
_badge.scss (component)
_breadcrumb.scss (component)
_button-group.scss (component)
_buttons.scss (component)
_card.scss (component)
_carousel.scss (component)
_close.scss (component)
_containers.scss (layout)
_dropdown.scss (component)
_forms.scss (imports partials from the "forms" folder)
_functions.scss (various custom Bootstrap 5 functions)
_grid.scss (layout)
_helpers.scss (imports partials from the "helpers"...