Set Up Sass in Your Project:

Install Sass if you haven't already using npm or another package manager: npm install sass

Create a Sass file in your project, such as custom.scss, where you'll customize Bootstrap.

Import Bootstrap's Source Sass Files:

In your custom.scss file, import Bootstrap's source Sass files. You can import the entire Bootstrap framework or only the components you need to customize.

                                      
                                      // Import Bootstrap's source Sass files
@import 'bootstrap';

                                      
                                    

Override Bootstrap Variables:

The default Bootstrap configuration with deploying the practical use of its variables. Integrated into Bootstrap are a number of variables that helps us change the colors, typography, spacing, breakpoints etc. on demand.

Establish your custom options for the given variables before importing the Bootstrap Sass.

                                      
                                      // Override Bootstrap variables
$body-bg: #f8f9fa;
$body-color: #343a40;

// Import Bootstrap's source Sass files
@import 'bootstrap';

                                      
                                    

Extend or Override Bootstrap Styles:

Customize Bootstrap styles by extending existing styles or overriding them with your own CSS rules. You can do this directly in your custom.scss file.

                                      
                                      // Extend Bootstrap styles
.my-custom-class {
  @extend .btn; // Extend Bootstrap's button styles
}

// Override Bootstrap styles
.btn-primary {
  background-color: #ff0000; // Override Bootstrap's primary button color
}

                                      
                                    

Compile Your Custom Sass:

Compile your custom.scss file into CSS using the Sass compiler.

You can do this manually using the command line or automate the process using build tools like webpack or Gulp.

                                      
                                      sass custom.scss custom.css
                                      
                                    

Include Your Custom CSS:

include your custom CSS file (e.g., custom.css) in your HTML file after Bootstrap's CSS file to apply your customizations.

                                      
                                      <link rel="stylesheet" href="custom.css">