HTML
<!-- Custom Card Component -->
<div class="custom-card" data-card="interactive">
  <div class="custom-card__header">
    <h3 class="custom-card__title">Component Title</h3>
  </div>
  <div class="custom-card__body">
    <p class="custom-card__text">Content goes here</p>
  </div>
</div>

SCSS
// _custom-card.scss
.custom-card {
  @extend .card;
  border-radius: $border-radius-lg;
  transition: transform 0.2s ease-in-out;
  
  &:hover {
    transform: translateY(-2px);
  }
  
  &__header {
    @extend .card-header;
    background: linear-gradient(135deg, $primary, $secondary);
  }
  
  &__title {
    @extend .card-title;
    color: white;
    margin: 0;
  }
  
  &__body {
    @extend .card-body;
  }
}

JavaScript
// custom-card.js
class CustomCard {
  constructor(element) {
    this.element = element;
    this.init();
  }
  
  init() {
    this.element.addEventListener('click', this.handleClick.bind(this));
  }
  
  handleClick() {
    this.element.classList.toggle('custom-card--active');
  }
}

// Auto-initialize
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('[data-card="interactive"]')
    .forEach(card => new CustomCard(card));
});

Progress:

• Define component requirements and Bootstrap base classes
• Create SCSS file with BEM naming convention
• Extend Bootstrap utilities where possible
• Write modular JavaScript with data attributes
• Test responsiveness across breakpoints
• Document usage and customization options

Step 1: Component Structure

Use BEM methodology with Bootstrap extensions:

SCSS
.component-name {
  @extend .bootstrap-base-class;
  
  &__element {
    // Element styles
  }
  
  &--modifier {
    // Modifier styles
  }
}

Step 2: Bootstrap Integration

Leverage Bootstrap's utilities and variables:

SCSS
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';

.custom-component {
  padding: $spacer-2;
  color: $text-color;
  @include border-radius($border-radius);
}

Step 3: JavaScript Module Pattern

JavaScript
const ComponentName = (() => {
  const init = (selector = '[data-component]') => {
    document.querySelectorAll(selector).forEach(initComponent);
  };
  
  const initComponent = (element) => {
    // Component logic
  };
  
  return { init };
})();

Example 1: Custom Button Component Input: Need a gradient button with loading state Output:

SCSS
.btn-custom {
  @extend .btn, .btn-primary;
  background: linear-gradient(45deg, $primary, $info);
  border: none;
  
  &--loading {
    pointer-events: none;
    
    &::after {
      content: '';
      @extend .spinner-border, .spinner-border-sm;
      margin-left: $spacer-1;
    }
  }
}

Example 2: Responsive Card Grid Input: Bootstrap card grid that stacks on mobile Output:

SCSS
.card-grid {
  @extend .row;
  
  &__item {
    @extend .col-12, .col-md-6, .col-lg-4;
    margin-bottom: $spacer-3;
    
    .card {
      height: 100%;
      transition: all 0.3s ease;
    }
  }
}