The Missing Bootstrap 5 Guide

The Missing Bootstrap 5 Guide

by Jeppe Schaumburg Jensen
Released August 2022
Publisher(s): Packt Publishing
ISBN: 9781801076432

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Make your website stand out by unlocking the full potential of Bootstrap 5 and creating efficient UIs

Key Features

  • Find out how to customize all parts of Bootstrap 5 with Sass, including working with the utility API
  • Create a unique website using only Bootstrap 5 with Sass customization and interactive features
  • Grasp advanced Bootstrap 5 topics related to Sass, CSS, JavaScript, and source code optimization

Book Description

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.

What you will learn

  • Identify the most important Sass features for using Bootstrap 5
  • Understand the structure and content of Sass code used in Bootstrap 5
  • Explore customization options, colors, layout, content, forms, components, helpers, and utilities
  • Find out how to customize, extend, and improve a website to make it unique
  • Discover different ways of using the CSS custom properties of Bootstrap 5
  • Get to grips with Bootstrap 5 source code optimization

Who this book is for

This book is for UI designers and developers who are familiar with HTML and have prior experience with Bootstrap. Frontend as well as backend developers using Bootstrap, who don't know how to code CSS but have a solid grasp on HTML, will also find this book useful. Experienced users of the default Bootstrap files can use this book to learn all about customization and other advanced features.

Table of contents

  1. The Missing Bootstrap 5 Guide
  2. Contributors
  3. About the author
  4. About the reviewer
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Download the color images
    6. Conventions used
    7. Get in touch
    8. Share Your Thoughts
  6. Part One – Customizing Bootstrap 5 with Sass
  7. Chapter 1: Why and How to Customize Bootstrap
    1. Technical requirements
    2. When we should customize Bootstrap
    3. What elements can be customized?
    4. How we can customize Bootstrap 5
      1. Method 1 – editing the compiled Bootstrap CSS directly
      2. Method 2 – overwriting the Bootstrap CSS with your own custom styles
      3. Method 3 – customizing the default styles using Sass
    5. Examples of a component customized with the three different methods
      1. Method 1 – editing the compiled Bootstrap CSS directly
      2. Method 2 – overwriting the Bootstrap CSS with your own custom styles
      3. Method 3 – customizing the default styles using Sass
    6. Examples of user interfaces with a customized version of Bootstrap 5
      1. The card component
      2. Forum
      3. The contact page
      4. Portfolio
      5. Further customizations in this book
    7. Summary
  8. Chapter 2: Using and Compiling Sass
    1. Technical requirements
    2. What is Sass?
    3. Sass syntax
      1. Comparison between the original Sass syntax and the modern Sass syntax
      2. Parent selector
    4. Sass features
      1. Variables
      2. Nesting
      3. Partials and import
      4. Mixins
      5. Extend
      6. Operators
      7. Functions
      8. Special values
      9. Built-in modules
    5. Sass features used by Bootstrap
      1. Syntax
      2. Partials
      3. Variables
      4. Maps
      5. Mixins
      6. Built-in modules
    6. Most important Sass features for Bootstrap developers
      1. Variables for customization
      2. Maps for the utility API
      3. Mixins and extend for semantic code
    7. Compiling Sass
      1. Experimenting with Sass using Sassmeister
      2. Incorporating Sass compilation into a development workflow
    8. Summary
  9. Chapter 3: Downloading and Exploring the Bootstrap 5 Sass Files
    1. Technical requirements
    2. Downloading the Bootstrap 5 source code
      1. From the website
      2. From GitHub
      3. From NPM
    3. Exploring the Bootstrap 5 Sass files
      1. Root folder
    4. Importing the default Bootstrap 5
      1. Exploring bootstrap.scss
    5. Exploring the Bootstrap 5 variables
      1. Default values with the !default flag
      2. Null value default variables
    6. Summary
  10. Chapter 4: Bootstrap 5 Global Options and Colors
    1. Technical requirements
    2. About the code examples
    3. Importing the Bootstrap 5 files individually
    4. Changing the global options
      1. Caret
      2. Rounded
      3. Shadows
      4. Gradients
      5. Transitions
      6. Reduced motion
      7. Smooth scroll
      8. Grid classes
      9. Container classes
      10. CSS grid
      11. Button pointers
      12. Responsive Font Sizes
      13. Validation icons
      14. Negative margins
      15. Deprecation messages
      16. Important utilities
      17. Spacer
    5. Customizing the colors
      1. Overview of the color variables
      2. Generating color classes
      3. Adding color to theme colors
      4. Removing color from theme colors
      5. Defining a custom color palette
    6. Summary
  11. Chapter 5: Customizing Various Bootstrap 5 Elements
    1. Technical requirements
    2. Customizing the layout
      1. Breakpoints
      2. Containers
      3. Grids
    3. Customizing content
      1. Typography
      2. Images
      3. Figures
    4. Customizing forms
      1. Range
    5. Customizing components
      1. Breadcrumbs
      2. Cards
    6. Customizing helpers
    7. Customizing utilities
      1. Borders
      2. Spacing
    8. Summary
  12. Chapter 6: Understanding and Using the Bootstrap 5 Utility API
    1. Technical requirements
    2. About the utility API
    3. Understanding the utility API syntax
      1. About the code examples
      2. Name
      3. CSS property
      4. Values
      5. Class
      6. CSS variable utilities
      7. CSS variable name
      8. Local CSS variables
      9. State
      10. Responsive
      11. RFS
      12. Print
      13. RTL
      14. !important
      15. More examples of the syntax
    4. Using the utility API
      1. Adding a simple utility
      2. Adding a complex utility
      3. Overwriting a utility
      4. Modifying a utility
      5. Removing a utility
    5. Summary
  13. Part Two – Creating a Unique-Looking Website Based on Bootstrap 5 and Customization
  14. Chapter 7: Creating the Website Using Default Bootstrap 5 Elements
    1. Technical requirements
    2. About the website
      1. Sitemap
    3. Bootstrap Icons
    4. Page setup
    5. Global modules
      1. Header
      2. Footer
      3. Page title
      4. Product card
    6. Page types
      1. Home (index.html)
      2. Shop (shop.html)
      3. Product (product.html)
      4. About (about.html)
      5. Contact (contact.html)
      6. Wishlist (wishlist.html)
      7. Cart (cart.html)
      8. Frequently Asked Questions (faq.html)
      9. Article page (shipping.html, returns.html, terms-of-service.html, and privacy-policy.html)
    7. Summary
  15. Chapter 8: Customizing the Website Using Bootstrap 5 Variables, Utility API, and Sass
    1. Technical requirements
    2. Importing Bootstrap 5 files and custom styles
    3. Default variable overrides
      1. Color palette
      2. Global options
      3. Global variables
      4. Layout
      5. Forms
      6. Components
    4. Variable values using existing variables
      1. Content
      2. Forms
      3. Components
      4. Helpers
    5. Utilities
    6. Other custom styling
      1. Alert
      2. Offcanvas
    7. Summary
  16. Chapter 9: Improving the Website with Interactive Features Using JavaScript
    1. Technical requirements
    2. About the code examples
      1. Simple and clean JavaScript code
      2. Page IDs
      3. Partial and complete code
      4. Original and updated code
      5. Line numbers
    3. Adding a tooltip component to a form label
    4. Adding toast components to product-related actions
      1. Adding a product to the cart
      2. Adding a product to the wishlist
      3. Adding all products to the cart
      4. Removing a product from the wishlist
      5. Removing a product from the cart
    5. Changing the product quantity in the shopping cart
    6. Adding form validation
    7. Adding form submission loading indicators
    8. Adding form success messages
    9. Creating programmatic tabs navigation
      1. Shopping Cart tab pane
      2. Shipping Details tab pane
    10. Updating the progress status in the checkout flow
      1. Updating the progress using inline styling
      2. Updating the progress using classes
    11. Creating a lightbox for the product gallery
    12. Summary
  17. Part Three – Advanced Topics Related to Bootstrap 5
  18. Chapter 10: Using Bootstrap 5 with Advanced Sass and CSS Features
    1. Technical requirements
    2. Using Bootstrap 5 Sass mixins
      1. Mixin overview
      2. Mixins depending on global options
      3. Mixins that are not used
      4. Mixins used for variants
      5. Examples
    3. Using Bootstrap 5 Sass functions
      1. Tint color
      2. Shade color
      3. Shift color
      4. Color contrast
    4. Extending Bootstrap 5 classes for semantic HTML
    5. Extending Bootstrap 5 classes to create custom components
      1. The Page title global module
      2. Blockquote in the Reviews section
      3. Border in the Summary section
    6. Creating a custom component using Bootstrap 5 variables, mixins, and functions
      1. Creating contextual color variants
      2. Creating responsive horizontal variants
    7. Using Bootstrap 5 CSS custom properties
      1. Groups of CSS custom properties
      2. Limitations of CSS custom properties for customization
      3. The dark color theme
      4. Breadcrumb
      5. Helper
      6. Prefix for CSS custom properties
    8. Using the RFS Sass plugin
    9. Summary
  19. Chapter 11: Using Bootstrap 5 with Advanced JavaScript Features
    1. Technical requirements
    2. Interactive components of Bootstrap 5
      1. Accordion
      2. Alert
      3. Button
      4. Carousel
      5. Collapse
      6. Dropdown
      7. List group
      8. Modal
      9. Navs and tabs
      10. Offcanvas
      11. Popover
      12. Scrollspy
      13. Toast
      14. Tooltip
    3. Initializing interactive components
      1. Initializing interactive components using data attributes
      2. Initializing interactive components using JavaScript
      3. Initializing multiple components
    4. Defining options for interactive components
      1. Defining default options
      2. Defining options using data attributes
      3. Defining options using JavaScript
      4. Defining default, common, and individual options
    5. Using JavaScript methods
      1. Asynchronous methods and transitions
    6. Using JavaScript events
    7. Summary
  20. Chapter 12: Optimizing Bootstrap 5 CSS and JavaScript Code
    1. Technical requirements
    2. Including the Sass partials for the used components only
    3. Removing unused helpers and utilities
      1. Removing unused helpers
      2. Removing unused utilities
      3. Trimming used utilities
    4. Setting up a build process using Node.js, npm, and Laravel Mix
      1. Using the Laravel Mix template
      2. Using Laravel Mix
      3. Adding the website code to the build process
    5. Using a module bundler to optimize JavaScript
    6. Minifying our compiled CSS and bundled JavaScript
    7. Summary
    8. Why subscribe?
  21. Other Books You May Enjoy
    1. Packt is searching for authors like you
    2. Share Your Thoughts

Product information

  • Title: The Missing Bootstrap 5 Guide
  • Author(s): Jeppe Schaumburg Jensen
  • Release date: August 2022
  • Publisher(s): Packt Publishing
  • ISBN: 9781801076432