Advanced Components

Introduction

Going beyond the basics, this chapter teaches you how to create unique, tailor-made components by extending Bootstrap. We'll cover custom builds, performance optimizations, and advanced JavaScript integration.

1. Customizing Existing Components

Use Sass variables to tweak default components. For example, change button colors entirely.

// custom.scss
$btn-primary-bg: #ff5722;
$btn-primary-border: #ff5722;
$btn-primary-hover-bg: #ff7043;

@import "node_modules/bootstrap/scss/bootstrap";

2. Building Custom Components

Create completely new components that leverage Bootstrap's utility classes and mixins.

Example: Gradient Card

.custom-card {
  background: linear-gradient(45deg, #ff7043, #ff5722);
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

3. Extending JS Components

Hook into Bootstrap's JavaScript events to add custom behavior.

$('#customModal').on('submit', 'form', function (e) {
  e.preventDefault();
  // Custom logic here
  $('#customModal').modal('hide');
});

4. Optimization & Performance

For large apps, verify you are only shipping what you use.

• PurgeCSS: Remove unused CSS automatically.
• Minification: Compress your final assets (e.g., using cssnano).
• Modular Import: Import only needed Sass partials.