<!-- Background colors -->
            <div class="bg-primary text-white">Primary background</div>
            <div class="bg-success text-white">Success background</div>
            <div class="bg-warning text-dark">Warning background</div>
            <div class="bg-light text-dark">Light background</div>

            <!-- Text colors -->
            <p class="text-primary">Primary text</p>
            <p class="text-success">Success text</p>
            <p class="text-warning">Warning text</p>
            <p class="text-muted">Muted text</p>

Customize theme colors in your SCSS variables:

// Custom theme colors
            $primary: #3498db;
            $secondary: #2ecc71;
            $success: #27ae60;
            $danger: #e74c3c;
            $warning: #f39c12;
            $info: #17a2b8;
            $light: #f8f9fa;
            $dark: #343a40;

            // Additional colors
            $custom-colors: (
            "custom-blue": #007bff,
            "custom-indigo": #6610f2,
            "custom-purple": #6f42c1,
            "custom-pink": #e83e8c,
            "custom-red": #dc3545,
            "custom-orange": #fd7e14,
            "custom-yellow": #ffc107,
            "custom-green": #28a745,
            "custom-teal": #20c997,
            "custom-cyan": #17a2b8
            );

            // Merge with default theme colors
            $theme-colors: map-merge($theme-colors, $custom-colors);

            // Import Bootstrap
            @import "bootstrap/scss/bootstrap";