The Missing Bootstrap 5 Guide: Customize and extend Bootstrap 5 with Sass and JavaScript to create unique website designs

by Jeppe Schaumburg Jensen

Length: 384 pages
Edition: 1
Language: English
Publisher: Packt Publishing
Publication Date: 2022-08-26
ISBN-10: 180107643X
ISBN-13: 9781801076432
Sales Rank: #770098 (See Top 100 Books)

1 ratings

Print Book Look Inside

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.

The Missing Bootstrap 5 Guide
Contributors
About the author
About the reviewer
Preface
    Who this book is for
    What this book covers
    To get the most out of this book
    Download the example code files
    Download the color images
    Conventions used
    Get in touch
    Share Your Thoughts
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.xhtml)
        Shop (shop.xhtml)
        Product (product.xhtml)
        About (about.xhtml)
        Contact (contact.xhtml)
        Wishlist (wishlist.xhtml)
        Cart (cart.xhtml)
        Frequently Asked Questions (faq.xhtml)
        Article page (shipping.xhtml, returns.xhtml, terms-of-service.xhtml, and privacy-policy.xhtml)
    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
    Why subscribe?
Other Books You May Enjoy
    Packt is searching for authors like you
    Share Your Thoughts

Donate to keep this site alive

To access the Link, solve the captcha.

How to download source code?

1. Go to: https://github.com/PacktPublishing

2. In the Find a repository… box, search the book title: The Missing Bootstrap 5 Guide: Customize and extend Bootstrap 5 with Sass and JavaScript to create unique website designs, sometime you may not get the results, please search the main title.

The Missing Bootstrap 5 Guide: Customize and extend Bootstrap 5 with Sass and JavaScript to create unique website designs

Key Features

Book Description

What you will learn

Who this book is for

How to download source code?

Bootstrapping Microservices, 2nd Edition: With Docker, Kubernetes, GitHub Actions, and Terraform

Linkerd: Up and Running: A Guide to Operationalizing a Kubernetes-native Service Mesh

Web API Development with ASP.NET Core 8: Learn techniques, patterns, and tools for building high-performance, robust, and scalable web APIs

Web API Cookbook: Level Up Your JavaScript Applications

Advanced JavaScript Unleashed: Master Advanced JavaScript Concepts like Prototypes, Symbols, Generators and More

ASP.NET Core 8 and Angular, 6th Edition: Full-stack web development with ASP.NET Core 8 and Angular