This course explores the customization of Bootstrap 5, the latest iteration of the most popular CSS framework for developing responsive and mobile-first websites. It emphasizes how Bootstrap 5 has been improved with a new API, enhanced grid system, and utility classes that enable more fine-grained control over layouts and designs. The course guides participants through the process of tailoring Bootstrap’s pre-built components and layout utilities to meet specific design requirements without sacrificing the mobile-first philosophy. Learners are taught how to modify the Sass variables, utilize the custom CSS classes, and leverage Bootstrap’s extensive theming capabilities to create a unique look and feel while maintaining accessibility and responsiveness. The course also discusses the use of Bootstrap’s JavaScript plugins to extend functionality and enhance user interactivity. By the end, participants understand how to make Bootstrap 5 fit any design aesthetic while keeping the robustness and simplicity of the framework intact.
Overview
COURSE DIFFICULTY
Skills Learned
After completing this online training course, students will be able to:
Create HTML templates for Bootstrap
Use Bootstrap SASS and compile SASS
Customize Bootstrap's global options
Modify theme color variables in SASS
Understand and set import order in SASS
Adjust theme colors and maps
Work with Bootstrap's color palette
Customize fonts and heading styles
Style hyperlinks with Bootstrap variables
Define custom breakpoints and grid layouts
Utilize spacer and border utilities
Leverage Bootstrap's utility API
Build custom Bootstrap components
01. Customizing Bootstrap
- Introduction
- HTML Template
- Bootstrap SASS & Compiling SASS
- Global Options
- Theme Color Variables
- Import Order
- Theme Colors & Maps
- Bootstrap Color Palette
- Font & Headings
- Links
- Breakpoints & Grid
- Spacer & Border Utilities
- Utility API (Part 1)
- Utility API (Part 2)
- Custom Component
SKILLS LEARNED
Skills Learned
After completing this online training course, students will be able to:
Create HTML templates for Bootstrap
Use Bootstrap SASS and compile SASS
Customize Bootstrap's global options
Modify theme color variables in SASS
Understand and set import order in SASS
Adjust theme colors and maps
Work with Bootstrap's color palette
Customize fonts and heading styles
Style hyperlinks with Bootstrap variables
Define custom breakpoints and grid layouts
Utilize spacer and border utilities
Leverage Bootstrap's utility API
Build custom Bootstrap components
COURSE OUTLINE
01. Customizing Bootstrap
- Introduction
- HTML Template
- Bootstrap SASS & Compiling SASS
- Global Options
- Theme Color Variables
- Import Order
- Theme Colors & Maps
- Bootstrap Color Palette
- Font & Headings
- Links
- Breakpoints & Grid
- Spacer & Border Utilities
- Utility API (Part 1)
- Utility API (Part 2)
- Custom Component
